/* 색은 한 벌뿐이다 — 어두운 쪽. 맥의 다크 모드 설정과 무관하게 항상 같은 얼굴이다.
   밝은 한 벌을 따로 두지 않는 이유: 홈은 사진 위의 검정이라 밝은 본문과 나란히 놓으면
   같은 제품으로 보이지 않았다. 바탕(#0b0d13)과 글자(#e9edf5)를 홈과 같은 푸른 기 도는
   계열로 맞춰, 홈에서 스크롤해 들어가도 한 공간처럼 이어진다. */
:root{--surface-0:#0b0d13;--surface-1:#161a22;--surface-2:#1b1f29;--text-primary:#e9edf5;--text-secondary:#a7afbf;--text-muted:#79818f;--border:#272c38;--border-strong:#3b4250;--fill-accent:#4a97e6;--bg-accent:#123561;--text-accent:#bfdaf8;--on-accent:#fff;--bg-danger:#451619;--text-danger:#f3b8bc;--bg-warning:#3d2708;--text-warning:#f6c97e;--text-success:#b7dc93;--radius:8px;--font-sans:"Pretendard",-apple-system,"Noto Sans KR",sans-serif}
/* 날짜칸·드롭다운은 맥이 직접 그리는 부품이라, 어둡게 그리라고 알려주지 않으면 거기만 하얗게 뜬다. */
html{color-scheme:dark}
/* 상단 띠 바탕. 본문 배경과 같은 색을 반투명으로 쓴다. */
:root{--bar-bg:rgba(11,13,19,.72)}
/* 본문 기둥 폭. 모든 화면이 이 하나를 쓴다 — 상단 띠 안쪽 줄도 같은 값이라 화면을 옮겨도
   메뉴가 제자리에 있다. 아이템 목록을 4열 격자로 깔려면 760px로는 칸이 너무 좁아 넓혔다. */
:root{--shell:1000px}
/* 글자 크기는 네 단계뿐이다. 12=보조, 14=본문, 17=소제목, 22=화면 제목.
   1px 차이는 눈에 '구분'으로 읽히지 않고 지저분하게만 보여서 13·15·18·11을 모두 걷어냈다.
   홈 첫 화면의 큰 글씨(30/26)는 '표지'라 이 네 단계 밖에 따로 둔다. */
/* 줄바꿈은 낱말 단위로. 브라우저 기본값은 한글을 글자 단위로 끊어서 '넘/어설'처럼 낱말 가운데가
   잘린다. keep-all로 띄어쓰기에서만 끊고, 띄어쓰기 없이 칸보다 긴 덩어리만 예외로 쪼갠다. */
body{margin:0;background:var(--surface-0);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;
  word-break:keep-all;overflow-wrap:break-word}
/* 스크롤바가 있는 화면과 없는 화면 사이에서 가운데 정렬이 흔들리면 메뉴도 같이 흔들린다.
   항상 스크롤바 자리를 잡아두어 화면을 옮겨다녀도 폭이 변하지 않게 한다. */
html{overflow-y:scroll}
/* 상단 띠가 고정이라 그 높이(46px)만큼 본문을 내려 앉힌다. */
.page{max-width:var(--shell);margin:0 auto;padding:24px;padding-top:70px}
.lbl{font-size:12px;color:var(--text-muted);margin-bottom:6px}
.pane{background:var(--surface-1);border-radius:12px;padding:14px 16px}
.panel{background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:14px 16px}
.pill{font-size:12px;padding:3px 10px;border-radius:999px;display:inline-block}
.p-danger{background:var(--bg-danger);color:var(--text-danger)}.p-warn{background:var(--bg-warning);color:var(--text-warning)}.p-accent{background:var(--bg-accent);color:var(--text-accent)}
/* 중립 칩은 패널(surface-2) 위에 올라가면 배경색 차이가 거의 없어 글자만 떠 보인다.
   테두리를 안쪽 그림자로 넣는다 — border로 넣으면 옆 칩보다 1px 커져 줄이 어긋난다. */
.p-neutral{background:var(--surface-1);color:var(--text-secondary);
  box-shadow:inset 0 0 0 0.5px var(--border-strong)}
h1{font-size:22px;font-weight:500;letter-spacing:0;margin:0}
.date{font-size:12px;color:var(--text-muted)}
.in{border:0.5px solid var(--border);border-radius:var(--radius);padding:9px 12px;font-size:14px;color:var(--text-muted)}
button{background:transparent;border:0.5px solid var(--border-strong);border-radius:var(--radius);padding:8px 16px;font-size:15px;color:var(--text-primary);cursor:pointer}
button:disabled{color:var(--text-muted);border-color:var(--border);cursor:not-allowed}
.box{width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:transparent;flex-shrink:0}
.box.on{background:var(--fill-accent);border-color:var(--fill-accent);color:var(--on-accent)}
.ck{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:0.5px solid var(--border);font-size:14px}
.ck.done span.t{color:var(--text-muted);text-decoration:line-through}
/* 계획은 [과제] 밑에 → 가 딸리는 계층으로 적혀 온다. 들여쓰기로 그 소속을 보인다.
   줄만 나열하면 어느 과제에 딸린 항목인지 읽는 사람이 다시 맞춰봐야 한다. */
.ck.d1{padding-left:22px;border-top:none}
.ck.d2{padding-left:42px;border-top:none;font-size:13px;color:var(--text-secondary)}
.ck.d1 .box,.ck.d2 .box{transform:scale(.85)}
.who{margin-left:auto;font-size:12px;color:var(--text-muted)}
.who.auto{color:var(--text-accent)}
/* 출력 문서는 할 일이 아니라 증거다. 같은 줄 모양이면 섞여서 안 읽힌다. */
.tag-out{flex:none;padding:1px 7px;border-radius:4px;background:var(--bg-accent);
  color:var(--text-accent);font-size:11px;font-weight:600}
.stg{display:flex;gap:3px;margin:10px 0 4px}.stg span{flex:1;height:6px;border-radius:3px;background:var(--surface-1)}.stg span.d{background:var(--fill-accent)}.stg span.c{background:var(--fill-accent);outline:2px solid var(--bg-accent);outline-offset:1px}
.note{font-size:12px;color:var(--text-muted);margin-top:4px}

/* ── 더미 웹 추가분 (목업 각 파일의 인라인 style을 모은 것) ── */
a{color:inherit;text-decoration:none}
a.lk:hover{text-decoration:underline}
.catline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;margin-top:18px;color:var(--text-secondary)}
.catline .cl{display:flex;gap:16px;flex-wrap:wrap}
.catline b{font-weight:500;color:var(--text-primary)}
.row{display:grid;grid-template-columns:1fr 160px 140px 10px;gap:8px;align-items:center;padding:10px 4px;border-top:0.5px solid var(--border);font-size:14px}
.row:last-child{border-bottom:0.5px solid var(--border)}
.row:hover{background:var(--surface-1)}
a.row{cursor:pointer}
a.row::after{content:'\203A';color:var(--text-muted)}
.sigs{display:flex;gap:4px;flex-wrap:wrap}
.row>.pill{justify-self:start}
.split{display:grid;grid-template-columns:190px 1fr;gap:20px}
.split3{display:grid;grid-template-columns:1fr 250px;gap:16px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.mi{padding:10px 12px;border-radius:var(--radius);display:flex;align-items:flex-start;gap:8px;margin-bottom:2px;cursor:pointer}
.mi>div{min-width:0;overflow-wrap:anywhere;line-height:1.45}
.mi.on{background:var(--surface-1)}
.mi:hover{background:var(--surface-1)}
.bar{height:6px;border-radius:3px;background:var(--surface-1);overflow:hidden;margin:6px 0 2px}
.bar i{display:block;height:100%;background:var(--fill-accent);border-radius:3px;transition:width .5s ease-out}
textarea,input[type=text],input[type=date],select{width:100%;box-sizing:border-box;border:0.5px solid var(--border);border-radius:var(--radius);padding:9px 12px;font-size:14px;font-family:inherit;background:var(--surface-2);color:var(--text-primary)}
textarea{min-height:76px;resize:vertical}
form.inline{display:inline}
button.plain{border:none;padding:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.ck button.plain{display:flex;align-items:center;gap:10px;width:100%}
.ck.done{opacity:.55}
.hist{padding:12px 0;border-top:0.5px solid var(--border);font-size:14px}
.hist .h{font-size:12px;color:var(--text-muted);margin-bottom:3px}
.av{width:26px;height:26px;border-radius:50%;background:var(--surface-1);display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-secondary);flex-shrink:0}
.prow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:0.5px solid var(--border)}
a.prow{cursor:pointer}
a.prow:hover{background:var(--surface-1)}
a.prow::after{content:'\203A';margin-left:auto;color:var(--text-muted)}
.sect{margin:22px 0 8px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl td,.tbl th{padding:9px 6px;border-top:0.5px solid var(--border);text-align:left;font-weight:400}
.tbl th{font-size:12px;color:var(--text-muted)}
.flash{background:var(--bg-accent);color:var(--text-accent);border-radius:var(--radius);padding:9px 12px;font-size:14px;margin-bottom:14px}
.banner{background:var(--bg-warning);color:var(--text-warning);border-radius:var(--radius);padding:8px 12px;font-size:12px;margin-bottom:16px}

/* ── 홈 — 내려가며 보는 화면 ── */
/* 모든 화면이 쓰는 하나의 상단 띠. 띠는 화면 폭을 다 쓰고 안쪽 줄만 본문과 같은 폭으로 묶는다 —
   그래야 홈에서 아이템으로 들어가도 메뉴가 같은 자리에 그대로 있다. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;height:46px;
  background:var(--bar-bg);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:0.5px solid var(--border);transition:opacity .25s ease}
.topbar .tb-row{max-width:var(--shell);margin:0 auto;padding:0 24px;height:100%;
  display:flex;align-items:center;gap:18px;font-size:14px;color:var(--text-secondary)}
.topbar a{color:var(--text-secondary)}
.topbar a:hover,.topbar a.on{color:var(--text-primary)}
.topbar a.on{font-weight:500}
/* 이름표는 메뉴가 아니다. 그래서 현재 위치 표시(.on)도 붙지 않고 색도 따라 변하지 않는다.
   워드마크는 파랑 한 색이라 어두운 띠에서도 밝은 띠에서도 같은 파일을 쓴다. */
.topbar a.tb-brand{display:flex;align-items:center;margin-right:8px;opacity:.88}
.topbar a.tb-brand:hover{opacity:1}
.topbar a.tb-brand img{display:block;height:18px;width:auto}
/* 홈만 어두운 옷을 입는다. 자리와 높이는 밝은 화면과 완전히 같다. */
.topbar.dk{background:rgba(16,18,24,.4);border-bottom-color:rgba(255,255,255,.12)}
.topbar.dk .tb-row{color:#fff}
.topbar.dk a{color:rgba(255,255,255,.76)}
.topbar.dk a:hover,.topbar.dk a.on{color:#fff}
.topbar.dk .pill{background:rgba(255,255,255,.2);color:#fff}
body.dk{background:#000;color:#e9edf5}
/* 기준은 두 개다. 심볼까지 한 덩어리로 보고 가운데 맞추면(위-아래 차이 46px = 고정 띠 높이)
   문구가 낮아 보이고, 문구만 가운데 맞추면 심볼이 떠 보인다. 그 둘의 중간에 세운다 —
   덩어리 기준에서 심볼 높이의 반의반(44px)만큼 위로, 즉 차이를 46에서 2로 줄인 값. */
.hm .sc{min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:64px 24px 128px}
.sc-in{position:relative;z-index:2;width:100%;max-width:640px;text-align:center}
/* 심볼이 제 모양으로 보이는 유일한 자리. 100px 아래로는 뭉개지므로 여기서만 크게 쓴다.
   심볼+인사말을 한 덩어리로 두고 그 덩어리를 가운데 맞춘다 (위아래 여백이 같아야 한다는 주문). */
.hm-mark{display:block;width:152px;margin:0 auto 24px;opacity:.9}
/* 날짜·날씨와 인사말의 차이가 세 배까지 벌어지면 인사말만 크게 튄다. 두 배 안쪽으로 좁힌다. */
.eyebrow{font-size:14px;opacity:.72;margin-bottom:14px}
.big{font-size:30px;font-weight:500;line-height:1.35;letter-spacing:-.01em;margin:0}
.mid{font-size:26px;font-weight:500;margin:8px 0 0}
.cap{font-size:12px;letter-spacing:.09em;color:var(--text-muted)}
.wx{margin-top:16px;font-size:14px;opacity:.78}
.foot{position:absolute;bottom:58px;z-index:2;font-size:11px;opacity:.45}
.down{position:absolute;bottom:24px;z-index:2;font-size:18px;opacity:.6;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
/* 시간대는 살아 있되 전부 검정에 가라앉는다. 그 시간의 빛은 지평선 높이에만 남기고
   맨 아래는 다시 검정으로 돌려보낸다 — 다음 장이 순검정이라 안 그러면 경계가 줄로 드러난다. */
.sky{color:#fff}
.t-dawn{background:linear-gradient(180deg,#000 0%,#07080f 30%,#1d1421 58%,#3a221e 80%,#000 100%)}
.t-morning{background:linear-gradient(180deg,#000 0%,#04070e 30%,#0e1a29 58%,#1a3048 80%,#000 100%)}
.t-day{background:linear-gradient(180deg,#000 0%,#03060d 30%,#0c1826 58%,#173049 80%,#000 100%)}
.t-dusk{background:linear-gradient(180deg,#000 0%,#07060f 30%,#1f1122 58%,#3d1c17 80%,#000 100%)}
.t-night{background:linear-gradient(180deg,#000 0%,#02040b 34%,#081020 62%,#0d1a30 82%,#000 100%)}
.stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.stars i{position:absolute;background:#fff;border-radius:50%;animation:tw 4.5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.22}50%{opacity:.92}}
/* 한 장에 하나씩. 두 가지가 같은 화면에 걸치면 둘 다 흘려보게 된다.
   배경을 비우는 것은 뒤에 깔린 우주 사진이 비쳐 보이게 하기 위한 것이다. */
.hm .rev{background:transparent;color:#e9edf5;padding:24px}
.hm .cap{color:rgba(233,237,245,.5)}
/* 숨기는 건 JS가 살아 있을 때만. 스크립트가 죽어도 내용은 보여야 한다. */
.anim .rev .sc-in{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)}
.anim .rev.shown .sc-in{opacity:1;transform:none}
.faces{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:26px}
.face{display:flex;flex-direction:column;align-items:center;gap:9px}
/* 뒤에 우주 사진이 점점 진해진다. 반투명 흰색으로는 사진에 먹히므로 어두운 유리로 깔고 앉힌다. */
.hm .rev .sc-in{text-shadow:0 1px 14px rgba(0,0,0,.85)}
.face .av{width:54px;height:54px;font-size:15px;background:rgba(6,8,14,.6);color:#e9edf5;
  box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.18)}
.face .nm{font-size:12px;color:rgba(233,237,245,.78)}
/* ── 오늘의 한 문장 (금색 장식 액자) ── */
/* 금색 글씨를 쓸 수 있는 이유: 이 장에서 뒤 사진의 농도가 1.5%라 사실상 검정이다.
   (사진은 아래로 갈수록 진해져 마지막 장에서만 100%가 된다. HOME_SCRIPT 참고)
   틀 크기는 5:3으로 고정이고 글자만 가운데 놓인다 — 한 줄이든 네 줄이든 틀이 흔들리지 않는다. */
.qbox{position:relative;aspect-ratio:5/3;display:flex;align-items:center;justify-content:center;
  color:#e3c081;font-family:"AppleMyungjo","Nanum Myeongjo",serif}
.q-frame{position:absolute;inset:0;width:100%;height:100%;display:block}
.q-in{position:relative;z-index:2;text-align:center;padding:0 14%}
.q-text{font-size:22px;line-height:1.85;margin:0}
.q-by{font-size:12px;opacity:.62;letter-spacing:.04em;margin-top:18px}
/* 스크립트가 죽으면 JS가 농도를 못 정한다. 그때는 옅게 깔린 채로 두어 글자가 읽히게 한다. */
.spacebg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;opacity:.32;pointer-events:none;will-change:opacity,transform}
.anim .spacebg{opacity:0}
.finale{height:100vh}

/* ── 아이템 목록 — 카드 격자 ── */
/* 칩 줄은 스크롤해도 상단 띠 바로 아래 붙어 있는다. 40건이 되면 목록을 내려가다가도
   다른 분류로 건너뛸 수 있어야 하는데, 칩이 위로 사라지면 매번 꼭대기로 올라가야 한다. */
.chips{position:sticky;top:46px;z-index:20;display:flex;gap:8px;overflow-x:auto;
  background:var(--surface-0);margin:14px 0 2px;padding:10px 0 12px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:14px;padding:6px 13px;border-radius:999px;
  border:0.5px solid var(--border);color:var(--text-secondary);white-space:nowrap}
.chip:hover{border-color:var(--border-strong);color:var(--text-primary)}
.chip.on{background:var(--text-primary);color:var(--surface-0);border-color:var(--text-primary)}
/* 내 것이 몇 건인지 이름으로 불러주는 줄. 목록을 가리지 않게 한 줄만 쓴다. */
.mine-lead{margin:10px 0 0;font-size:15px}
.mine-lead a{font-weight:600;color:var(--text-accent);border-bottom:1px solid var(--bg-accent)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 18px;margin-top:6px}
/* 제목이 한 줄인 카드와 두 줄인 카드가 섞이면 신호 칩의 높이가 줄마다 어긋나
   한 줄로 훑을 수 없다. 칩만 카드 바닥에 붙여 한 선에 세운다. */
.pcard{display:flex;flex-direction:column}
/* 도면 이미지가 아직 없어서 종류별 그림으로 채운다. 나중에 도면이 생기면 이 칸이 그대로 사진 자리다. */
/* 아래쪽 진행 막대가 깔고 앉는 띠(막대 4px + 아래 여백 11px)만큼 비워둬야
   그림이 남는 자리의 한가운데로 온다. 안 비우면 눈에는 아래로 처져 보인다. */
.pc-thumb{position:relative;height:132px;box-sizing:border-box;padding-bottom:15px;
  background:var(--surface-2);
  border:0.5px solid var(--border);border-radius:12px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pc-thumb svg{width:58%;max-width:104px;color:var(--text-muted);opacity:.7}
.pcard:hover .pc-thumb{border-color:var(--border-strong)}
.pcard:hover .pc-thumb svg{opacity:1}
.pc-prog{position:absolute;left:12px;right:12px;bottom:11px;height:4px;border-radius:2px;background:var(--surface-1)}
.pc-prog i{display:block;height:100%;border-radius:2px;background:var(--fill-accent)}
.pc-body{padding:10px 2px 0;min-width:0;flex:1;display:flex;flex-direction:column}
.pc-name{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.pc-meta{font-size:12px;color:var(--text-muted);margin-top:5px}
.pc-stage{font-size:12px;color:var(--text-secondary);margin-top:7px}
.pc-tag{margin-top:auto;padding-top:9px}

/* ── 팀원 목록 — 사람 카드 ── */
/* 아이템 카드는 그림이 위, 사람 카드는 이름 동그라미가 옆이다. 사람은 이름만 보면 되니
   세로로 키울 이유가 없고, 옆으로 눕혀두면 좁은 화면에서도 모양이 그대로다. */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.mcard{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);
  border:0.5px solid var(--border);border-radius:12px;padding:14px}
.mcard:hover{border-color:var(--border-strong)}
.mc-av{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--bg-accent);
  color:var(--text-accent);display:flex;align-items:center;justify-content:center;font-size:14px}
.mc-body{flex:1;min-width:0}
.mc-name{font-size:17px}
.mc-meta{font-size:12px;color:var(--text-muted);margin-top:4px}
.mc-sig{display:flex;gap:4px;flex-wrap:wrap;margin-top:9px}

/* ── 현황 — 숫자 넉 장과 막대 줄 ── */
/* 홈에서 뺀 숫자들이 전부 여기 있다. 홈은 지나가다 보는 곳이고 여기는 보려고 들어오는 곳이라
   같은 숫자라도 성질이 다르다. */
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.st-card{background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:14px 16px}
.st-lbl{font-size:12px;color:var(--text-muted)}
.st-num{font-size:22px;line-height:1.1;margin-top:8px}
.st-note{font-size:12px;color:var(--text-muted);margin-top:8px}
.st-row{display:block;padding:7px 6px;border-radius:8px}
a.st-row:hover{background:var(--surface-1)}
.st-line{display:flex;align-items:center;gap:10px}
.st-nm{flex:0 0 92px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-bar{flex:1;margin:0}
/* 막대가 없는 줄에서는 이름이 남는 폭을 먹는다. 숫자 칸 위치는 그대로 유지된다. */
.st-nm.st-f{flex:1 1 auto}
/* 막대 끝이 줄마다 맞아야 길이를 견줄 수 있다. 그래서 오른쪽 칸은 내용이 아니라 폭이 정한다. */
.st-val{flex:0 0 58px;text-align:right;font-size:12px;color:var(--text-secondary);
  display:flex;align-items:center;gap:5px;justify-content:flex-end}
.st-row.w .st-val{flex:0 0 152px}
.st-cnt{flex:0 0 30px;text-align:right;font-variant-numeric:tabular-nums}

/* ── 접수 대기 ── */
/* 칸 셋과 버튼이 한 줄에 안 들어가면 버튼이 화면 밖으로 밀려 접수 자체를 못 한다.
   폰에서는 두 칸씩 접고, 버튼은 어떤 폭에서도 마지막에 온전히 남는다. */
.ib-row{padding:14px 0;border-top:0.5px solid var(--border)}
.ib-row:last-of-type{border-bottom:0.5px solid var(--border)}
.ib-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.ib-form select{width:auto}
.ib-form button{flex:0 0 auto}
.ib-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.ib-acts .ib-form{margin-top:0}
.ib-or{font-size:13px;color:var(--text-secondary,#5d6670)}
/* 접수 대기 목차 — 종류마다 하는 일이 다르므로 큼직하게 세우고 한 줄 설명을 붙인다.
   숫자만 늘어놓으면 처음 온 사람은 무엇을 정해달라는 건지 모른 채 들어간다. */
.ibx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ibx{display:block;background:var(--surface-1);border-radius:12px;padding:16px 18px}
.ibx:hover{background:var(--surface-2)}
.ibx-top{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.ibx-t{font-size:17px;color:var(--text-primary)}
.ibx-n{font-size:24px;margin-left:auto}
.ibx .note{line-height:1.55}

/* 후보 한 건에 갈 길이 셋이다 — 붙이기·새로 등록·안 올림. 셋 다 같은 급의 판단인데
   단추·넓은 드롭다운·삼각형으로 모양이 다르면, 사람은 제일 커 보이는 것을 기본값으로
   읽는다. 셋을 같은 단추로 세우고, 고른 것만 그 자리에서 펼친다. */
.pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:flex-start}
.pick>details,.pick>form{flex:0 0 auto}
.pick>details[open]{flex:1 1 100%}
.pick summary{list-style:none;display:inline-block;background:transparent;
  border:0.5px solid var(--border-strong);border-radius:var(--radius);
  padding:8px 16px;font-size:14px;color:var(--text-primary);cursor:pointer}
.pick summary::-webkit-details-marker{display:none}
.pick details[open] summary{border-color:var(--fill-accent);color:var(--text-accent)}
.pick .lbl:first-of-type{margin-top:10px}

/* ── 아이디어 ── */
.ic{margin-top:12px}
.ic-top{display:flex;align-items:center;gap:8px}
.ic-title{font-size:17px;margin-top:11px}
.ic-text{font-size:14px;color:var(--text-secondary);line-height:1.65;margin-top:7px}
.ic-cm{display:flex;gap:9px;align-items:flex-start;margin-top:11px;padding-top:11px;border-top:0.5px solid var(--border)}
.ic-cm-t{font-size:14px;line-height:1.5}
.ic-cm .note{margin-top:3px}
.ic-foot{display:flex;align-items:center;gap:8px;margin-top:14px}
/* .plain이 테두리와 여백을 지워버리므로 여기서 다시 세운다(선언 순서상 이쪽이 이긴다). */
.ic-like{font-size:14px;color:var(--text-muted);white-space:nowrap;
  padding:8px 13px;border:0.5px solid var(--border);border-radius:var(--radius)}
.ic-like.on{color:var(--text-accent);border-color:var(--bg-accent);background:var(--bg-accent)}

/* ── 업무 표준 ── */
/* 지금 할 일은 검게, 다음 단계 준비는 한 칸 들여 흐리게. 눈이 "지금"부터 읽고
   "다음"은 곁눈으로 보게 된다. 계획은 그 곁눈질에서 선다. */
.sd{display:flex;gap:12px;padding:14px 2px;border-top:0.5px solid var(--border)}
.sd:last-of-type{border-bottom:0.5px solid var(--border)}
.sd-n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--bg-accent);color:var(--text-accent);
  display:flex;align-items:center;justify-content:center;font-size:12px}
.sd-b{flex:1;min-width:0}
.sd-name{font-size:14px}
.sd-do{margin:8px 0 0;padding-left:18px;font-size:14px;line-height:1.85;color:var(--text-secondary)}
/* 출력 문서는 "이 단계가 끝났다"는 증거다. 흐리게 두면 안 읽힌다 —
   실제로 승현님이 못 보고 지나쳤다(2026-09-23). 라벨을 붙여 눈에 걸리게 둔다. */
.sd-out{margin-top:10px;font-size:14px;line-height:1.6;color:var(--text-primary)}
.sd-out b{display:inline-block;margin-right:7px;padding:1px 7px;border-radius:4px;
  background:var(--bg-accent);color:var(--text-accent);font-size:12px;font-weight:600}
.sd-next{margin-top:8px;padding-left:10px;border-left:2px solid var(--border);
  font-size:13px;line-height:1.65;color:var(--text-muted)}
.sd-next b{color:var(--text-secondary);font-weight:600}
.sd-next.last{font-style:italic}

/* ── 모바일 아래 띠 ── */
/* 좁은 화면에서는 메뉴가 위가 아니라 아래로 간다. 한 손으로 들고 볼 때 화면 꼭대기는 엄지가 닿지 않는다. */
.tabbar{display:none}
.tb-ico{display:block;width:22px;height:22px}

@media (max-width:600px){
  .big{font-size:25px}.mid{font-size:21px}
  .hm-mark{width:118px;margin-bottom:24px}
  /* 폰은 틀이 좁아 5:3을 그대로 쓰면 네 줄짜리가 장식에 닿는다. 세로를 조금 더 준다. */
  .qbox{aspect-ratio:4/3}
  .q-in{padding:0 13%}.q-text{font-size:16px}.q-by{margin-top:12px}
  /* 폰은 위 띠가 없고 아래 띠가 바닥을 덮는다. 덩어리 기준이면 아래 패딩이 띠 높이(56px+인디케이터)
     만큼 더 커야 하고, 거기서 다시 심볼(118px)의 반의반만큼 위로 올린 중간값을 쓴다. */
  .hm .sky{padding:40px 24px calc(191px + env(safe-area-inset-bottom))}
  .hm .rev{padding:24px 24px 80px}
  .topbar{display:none}
  .page{padding:16px;padding-top:16px;padding-bottom:84px}
  .chips{top:0}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--bar-bg);backdrop-filter:saturate(180%) blur(16px);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    border-top:0.5px solid var(--border);transition:opacity .25s ease;
    padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{flex:1;min-width:0;height:56px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;font-size:12px;color:var(--text-muted)}
  .tabbar a.on{color:var(--text-primary)}
  /* 카드가 옆으로 눕는다. 세로 2열로 깔면 아이템 이름이 서너 줄로 쪼개져 못 알아본다 —
     쇼핑몰과 달리 여기서는 이름이 유일한 식별자다. */
  .pgrid{grid-template-columns:1fr;gap:10px}
  .pcard{display:flex;flex-direction:row;gap:12px;align-items:flex-start;background:var(--surface-2);
    border:0.5px solid var(--border);border-radius:12px;padding:12px}
  .pc-thumb{flex:0 0 78px;width:78px;height:78px;padding-bottom:10px;
    border-radius:9px;background:var(--surface-1)}
  .pc-thumb svg{width:56%}
  .pc-prog{left:8px;right:8px;bottom:7px;height:3px}
  .pc-body{flex:1;padding:0;display:block}
  .pc-tag{margin-top:7px;padding-top:0}
  .mgrid{grid-template-columns:1fr;gap:10px}
  /* 넉 장을 한 줄에 두면 숫자가 두 줄로 접힌다. 두 장씩 두 줄로 내린다. */
  .st-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .st-nm{flex:0 0 72px}
  .ib-form select{flex:1 1 calc(50% - 4px);min-width:0}
  .ib-acts>.ib-form:last-child{flex:1 1 100%}
  /* 폰은 두 칸으로 나누면 설명이 서너 줄로 접힌다. 한 줄에 하나씩 세운다. */
  .ibx-grid{grid-template-columns:1fr}
  /* 폰에서 세 갈래를 한 줄에 우겨넣으면 글자가 잘린다. 한 줄에 하나씩 세운다. */
  .pick>details,.pick>form,.pick summary,.pick>form button{width:100%;flex:1 1 100%}
  /* 아이디어 아래 줄은 공감 버튼과 입력칸이 한 줄에 들어가기엔 좁다. */
  .ic-foot{flex-wrap:wrap}
  .ic-foot form:last-child{flex:1 0 100%}
  /* 좁은 화면에서 좌우로 나뉜 칸들은 위아래로 푼다. 그냥 두면 양쪽 다 뭉개진다. */
  .split,.split3,.split2{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:4px}
  a.row::after{display:none}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
}

/* ── 아이템 세부 화면 ── */
.ihead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:6px}
.ihead-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn-edit{padding:6px 14px;font-size:12px}
/* 상태 칩 줄은 붙박지 않는다. 카테고리 줄과 같은 자리에 겹쳐 서면 둘 다 안 읽힌다. */
.chips.sub{position:static;top:auto;margin-bottom:4px}
.sbtns{display:flex;gap:6px;margin-top:2px}
.sbtns form{flex:1;display:flex}
.sbtn{flex:1;padding:7px 0;font-size:13px;text-align:center;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface-1);color:var(--text-secondary);cursor:pointer}
.sbtn:hover{border-color:var(--border-strong);color:var(--text-primary)}
.sbtn.on{background:var(--text-primary);color:var(--surface-0);border-color:var(--text-primary);cursor:default}
/* 세 덩이를 격자에 직접 놓는다. 히스토리를 왼쪽 칸 안에 품어버리면 폰에서 위로 끌어올릴
   방법이 없다 — 그래서 히스토리도 격자의 형제로 두고, 폰에서는 소스 순서 그대로 맨 밑에 깔린다. */
.idet{display:grid;grid-template-columns:1fr 250px;gap:16px;align-items:start;margin-top:18px}
.idet>.iside{grid-column:2;grid-row:1/span 2}
.idet>.imain,.idet>.ihist{grid-column:1;min-width:0}
/* 세부 화면은 읽는 화면이다. 줄 사이가 붙어 있으면 글이 덩어리로 보인다. */
.idet .panel{padding:16px 18px}
.idet .ck{padding:11px 0}
.idet .hist{padding:14px 0}
.idet .stg{margin:14px 0 6px}
/* 정보창 제목. 본문과 같은 크기로 세우고 밑줄로 '여기부터 이 창'을 만든다. */
.phd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13px;font-weight:500;color:var(--text-primary);
  padding-bottom:9px;margin-bottom:4px;border-bottom:0.5px solid var(--border)}
.phd .dim{font-size:12px;font-weight:400}
/* 제목 밑줄 바로 아래 줄까지 윗선을 그으면 선이 두 겹으로 보인다. */
.phd+.ck,.phd+.hist,.phd+.prow{border-top:none}
/* 이름:값을 두 칸씩 나란히. 한 칸으로 내리면 넓은 화면에서 오른쪽이 통째로 빈다. */
.kvgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:6px}
.kvgrid>.kv{border-top:none;grid-template-columns:70px 1fr;gap:10px;padding:8px 0}
.kv.wide{grid-column:1/-1}
/* 이름:값 한 줄. 이름칸 너비를 고정해야 값들이 세로로 줄을 맞춘다. */
.kv{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;
  padding:9px 0;border-top:0.5px solid var(--border);font-size:14px}
.kv .k{font-size:12px;color:var(--text-muted)}
.kv .note{margin-top:3px}
.dim{color:var(--text-muted)}
.prg-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;
  color:var(--text-secondary);margin:2px 0 4px}
.prg-head b{font-weight:500;color:var(--text-primary)}
/* 담당 — 역할이 먼저, 이름이 그다음 */
/* 격자라 화살표(::after)도 칸을 하나 차지한다. 자리를 안 만들어 주면 다음 줄로 떨어진다. */
.orow{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:baseline}
.orow .orole{font-size:12px;color:var(--text-muted)}
.orow .oname{font-size:14px;color:var(--text-primary)}
a.orow::after{margin-left:0;align-self:center}
/* 빈 자리도 자리로 보여야 한다. 감추면 '담당이 없다'가 아니라 '그런 자리가 없다'로 읽힌다. */
.orow.empty .oname{font-size:13px}
/* 수정 이력 한 줄 */
.chg{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;line-height:1.6}
.chg .k{font-size:12px;color:var(--text-muted)}

/* ── 수정 팝업 ── */
.edit label{display:block;margin:14px 0 5px;font-size:12px;color:var(--text-secondary)}
.edit label:first-child{margin-top:0}
.edit .note{margin-top:5px}
.mdl{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.mdl[hidden]{display:none}
.mdl-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.mdl-box{position:relative;z-index:1;width:100%;max-width:440px;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;background:var(--surface-2);
  border:0.5px solid var(--border-strong);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.55)}
.mdl-hd{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:0.5px solid var(--border);font-size:14px}
.mdl-hd b{font-weight:500}
.mdl-x{border:none;background:none;padding:0 4px;font-size:14px;color:var(--text-muted)}
.mdl-bd{padding:16px;overflow-y:auto}
/* 고친 기록은 고치는 자리에. 칸마다 '누가 수정함'을 붙이면 나중엔 모든 칸에 다 붙는다. */
.clog{margin-top:22px;padding-top:14px;border-top:0.5px solid var(--border-strong)}
.clog .hist{padding:10px 0}
.clog .chg{grid-template-columns:64px 1fr;gap:10px}
.mdl-ft{padding:12px 16px;border-top:0.5px solid var(--border);background:var(--surface-1)}
.mdl-btns{display:flex;gap:8px;margin-top:10px}
.mdl-btns button{flex:1}
.mdl-btns .prim{background:var(--fill-accent);border-color:var(--fill-accent);color:var(--on-accent)}

@media (max-width:600px){
  /* 폰에서는 격자를 풀어 소스 순서대로 쌓는다 — 개요 → 진행 → 체크 → 담당 → 히스토리 → 수정 이력.
     히스토리는 길어서 위에 있으면 그 아래 것들을 아무도 못 본다. */
  .idet{grid-template-columns:1fr}
  /* 폰에서는 두 칸이 서로 너무 좁다. 한 줄에 하나씩. */
  .kvgrid{grid-template-columns:1fr}
  .idet>.iside,.idet>.imain,.idet>.ihist{grid-column:auto;grid-row:auto}
  /* 팝업은 아래에서 올라오는 시트로. 손가락이 닿는 자리에 버튼이 있어야 한다. */
  .mdl{padding:0;align-items:flex-end}
  .mdl-box{max-width:none;max-height:88vh;border-radius:16px 16px 0 0;border-bottom:none}
  .mdl-ft{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* ── 배우기 ──────────────────────────────────────────────────────
   읽는 화면이다. 다른 화면보다 글자를 키우고 줄 간격을 넓힌다 — 목록을 훑는
   화면과 같은 밀도로 두면 세 문단 만에 눈이 미끄러진다. */
.lrn-toc{margin-top:14px}
.lrn-i{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;margin-bottom:8px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-1)}
.lrn-i:hover{border-color:var(--border-strong)}
.lrn-i.on{border-color:var(--text-primary)}
.lrn-n{flex:0 0 26px;height:26px;line-height:26px;text-align:center;font-size:13px;
  border-radius:999px;background:var(--surface-2);color:var(--text-secondary)}
.lrn-tt{display:block;font-size:15px;color:var(--text-primary);margin-bottom:3px}
.lrn-body{margin-top:18px;font-size:15.5px;line-height:1.85;color:var(--text-primary)}
.lrn-body .lrn-h2{font-size:18px;margin:30px 0 10px;padding-top:4px}
.lrn-body .lrn-h3{font-size:16px;margin:22px 0 8px;color:var(--text-secondary)}
.lrn-p{margin:0 0 14px}
/* 부제·인용은 왼쪽 선 하나로만 구분한다. 배경을 깔면 본문 흐름이 두 번 끊긴다. */
.lrn-q{margin:0 0 16px;padding-left:12px;border-left:2px solid var(--border-strong);
  color:var(--text-secondary)}
.lrn-l{margin:0 0 14px;padding-left:20px}
.lrn-l li{margin-bottom:6px}
.lrn-c{margin:0 0 16px;padding:13px 14px;border-radius:var(--radius);overflow-x:auto;
  background:var(--surface-2);border:1px solid var(--border);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6;
  color:var(--text-primary);white-space:pre}
.lrn-body code{padding:1px 5px;border-radius:4px;background:var(--surface-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.lrn-c code{padding:0;background:none}
.lrn-t{width:100%;margin:0 0 16px;border-collapse:collapse;font-size:14px}
.lrn-t th,.lrn-t td{padding:8px 10px;border:1px solid var(--border);text-align:left;
  vertical-align:top}
.lrn-t th{background:var(--surface-2);color:var(--text-secondary);font-weight:400}
.lrn-hr{margin:26px 0;border:0;border-top:1px solid var(--border)}
/* 아이템 화면 버튼 줄 (2026-09-28, 다시 다듬음) — 사용자 기기가 다크 모드여도 이 화면은 밝은 화면이라
   다크 전용 색을 쓰지 않는다(버튼만 검게 떠서 어색했음). 주 버튼 하나만 채운 색, 나머지는 옅게,
   '문제 발생'은 오른쪽 끝에 떨어뜨려 실수로 누르지 않게. */
.iact{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px;align-items:center}
.iact form.inline{display:inline-flex;margin:0}
.iact .ia-btn,.ia-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;font-size:14px;font-weight:500;
  border-radius:10px;border:1px solid #d3d9de;background:#fff;color:#1e2226;cursor:pointer;text-decoration:none;
  box-shadow:none;transition:background .15s,border-color .15s;white-space:nowrap}
.iact .ia-btn:hover{background:#f2f5f7;border-color:#b9c2c9}
.iact .ia-btn.primary{background:#2f4a60;border-color:#2f4a60;color:#fff;font-weight:600}
.iact .ia-btn.primary:hover{background:#243a4c}
.iact .ia-btn.primary.ready{box-shadow:0 0 0 3px rgba(242,194,48,.55)}
.iact .ia-btn.warn{background:transparent;border-color:#e6c77f;color:#8a5a00}
.iact .ia-btn.warn:hover{background:#fff7e6}
.iact>form.inline:has(.warn){margin-left:auto}
@media (max-width:640px){.iact{gap:6px}.iact .ia-btn{height:42px;font-size:14px}
  .iact form.inline:first-child,.iact form.inline:first-child .ia-btn{width:100%;justify-content:center}
  .iact>form.inline:has(.warn){margin-left:0}}
/* 아이템 화면 업무표준 — 보기 전용 (2026-09-28) */
.sd-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--border,#e2e5e7);font-size:14px}
.sd-row .t{flex:1}
.sd-st{font-size:12px;padding:2px 8px;border-radius:9px;white-space:nowrap}
.sd-st.ok{background:#dcefdc;color:#1b5e20}.sd-st.wk{background:#e1e8ef;color:#2f4a60}.sd-st.no{background:#eef0f1;color:#6b737a}
.sd-row.done .t{color:#6b737a}
.sd-row.d1 .t{padding-left:14px}.sd-row.d2 .t{padding-left:28px}
.sd-row .t.hd{font-weight:600}
/* 아이템 검색 (2026-09-28) */
.isearch{display:flex;gap:8px;align-items:center;margin:10px 0 12px;max-width:560px}
.isearch input{flex:1;padding:10px 12px;font-size:15px;border:1.5px solid #9aa4ad;border-radius:10px;background:#fff}
form.isearch button,.isearch button{padding:10px 16px;border-radius:10px;border:1.5px solid #2f4a60;background:#2f4a60;color:#fff;font-size:14px;cursor:pointer}
/* 팀원 명단 (2026-09-28) */
.mc-items{display:flex;flex-direction:column;gap:3px;margin:6px 0 8px}
.mc-it{font-size:13.5px;color:inherit;text-decoration:none;line-height:1.35}
.mc-it:hover{text-decoration:underline}
.pc-thumb .pc-photo{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* 아이템 목록 카드 다시 (2026-09-28 승현님 "별로 예쁘지 않네") — 한 장짜리 카드: 사진(4:3, 제품 전체가 보이게) → 이름 2줄 → 고객사·분류·담당 → 단계·막대 → 표시 */
.pgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.pcard{background:var(--surface-2);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.pcard:hover{box-shadow:0 6px 20px rgba(20,30,40,.10);transform:translateY(-2px)}
.pc-thumb{height:auto;aspect-ratio:4/3;padding:0;border:0!important;border-radius:0!important;background:#fff!important;display:flex;align-items:center;justify-content:center}
.pc-thumb .pc-photo{object-fit:contain;padding:10px;box-sizing:border-box;border-radius:0}
.pc-body{padding:12px 14px 14px}
.pc-name{font-size:15px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-meta{font-size:12.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-stage{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;margin-top:10px}
.pc-step{font-variant-numeric:tabular-nums;color:var(--text-muted)}
.pc-body .pc-prog{position:static;display:block;height:5px;margin-top:6px;background:var(--surface-1)}
.pc-tag{padding-top:10px}
.pc-tag:empty{display:none}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr 1fr;gap:10px}
  .pcard{display:flex;flex-direction:column;padding:0;background:var(--surface-2)}
  .pc-thumb{flex:none;width:auto;height:auto;padding:0}
  .pc-body{padding:10px 10px 12px}
  .pc-name{font-size:14px}
}
@media (max-width:640px){
  .bx .pgrid>.pcard,.pgrid>.pcard{min-width:0;width:auto;align-self:stretch}
  .bx .pgrid .pc-thumb,.pgrid .pc-thumb{width:100%;flex:none;height:auto;aspect-ratio:4/3;background:#fff}
  .pc-body .pc-prog{width:100%}
}
.pgrid .pc-body{width:100%;box-sizing:border-box;align-self:stretch}
/* 버튼을 관련 칸 안으로 (2026-09-28) */
.st-ctrl{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:14px;padding:12px;border-radius:12px;background:var(--surface-1,#eef0f1)}
.st-ctrl form.inline{margin:0}
.st-now{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;font-size:14px;min-width:0}
.st-now .dim{font-size:12.5px}
.st-btn{height:38px;padding:0 14px;border-radius:10px;border:1px solid #d3d9de;background:#fff;color:#1e2226;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.st-btn:hover{background:#f2f5f7}
.st-btn.primary{background:#2f4a60;border-color:#2f4a60;color:#fff;font-weight:600}
.st-btn.primary:hover{background:#243a4c}
.st-btn.primary.ready{box-shadow:0 0 0 3px rgba(242,194,48,.55)}
.st-imp{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.st-imp form.inline{margin:0}
.st-imp .ia-btn{height:34px;padding:0 12px;font-size:13px;border-radius:9px;border:1px solid #d3d9de;background:#fff;color:#1e2226;cursor:pointer}
.st-imp .ia-btn.warn{background:transparent;border-color:#e6c77f;color:#8a5a00}
.st-imp .ia-btn.warn:hover{background:#fff7e6}
.phd .ph-btn,.ph-btn{height:30px;padding:0 12px;font-size:13px;border-radius:8px;border:1px solid #d3d9de;background:#fff;color:#1e2226;cursor:pointer;font-weight:500}
.phd .ph-btn:hover{background:#f2f5f7}
.phd{display:flex;justify-content:space-between;align-items:center}
.orow .obench{margin-left:auto;font-size:12px;color:var(--text-muted);white-space:nowrap}
.orow:hover .obench{color:#2f4a60}
@media (max-width:640px){.st-ctrl{grid-template-columns:1fr 1fr;grid-template-areas:"now now" "l r"}
  .st-ctrl>.st-now{grid-area:now}.st-ctrl>:first-child{grid-area:l}.st-ctrl>:last-child{grid-area:r;justify-self:end}
  .st-ctrl .st-btn{width:100%}.st-ctrl form.inline{display:block}}
a.orow{grid-template-columns:52px 1fr auto}
a.orow::after{display:none}
.orow .obench::after{content:" ›"}
/* 팀 전체 가공 업무 탭 (2026-09-29) */
.gtab{background:var(--surface-0,#fff);border-radius:12px;overflow:hidden;border:0.5px solid var(--border)}
.gtab table{width:100%;border-collapse:collapse;font-size:13px}
.gtab th{text-align:left;font-weight:500;font-size:12px;color:var(--text-secondary);padding:10px 12px;border-bottom:0.5px solid var(--border);white-space:nowrap}
.gtab td{padding:10px 12px;border-bottom:0.5px solid var(--border);vertical-align:top}
.gtab tr:last-child td{border-bottom:0}
.gtab .g-p{min-width:180px}.gtab .g-d{white-space:nowrap}.gtab .g-n{color:var(--text-secondary);max-width:260px}
.gtab .note{margin:2px 0 0;font-size:12px}
@media (max-width:640px){.gtab thead{display:none}.gtab table,.gtab tbody,.gtab tr,.gtab td{display:block;width:auto}
  .gtab tr{padding:10px 12px;border-bottom:0.5px solid var(--border)}.gtab td{border:0;padding:2px 0}.gtab .g-n{max-width:none}}
/* 아이템 메뉴 [+ 새 아이템] (2026-09-29) */
.i-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.i-head h1{margin-bottom:0}
.i-new{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:9px;background:#2f4a60;color:#fff!important;font-size:14px;font-weight:600;text-decoration:none!important;white-space:nowrap}
.i-new:hover{background:#243a4c}
/* 새 아이템 등록 화면 · 접수 대기 목차 (2026-09-29) */
.nf-route{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.nf-r{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;border:1px dashed #c9d1d8;background:transparent;text-decoration:none!important;color:inherit}
.nf-r b{font-size:14px;font-weight:600;color:var(--text-primary)}
.nf-r span{font-size:12.5px;color:var(--text-secondary)}
.nf-r b::after{content:" ›";color:var(--text-muted)}
.nf-r:hover{background:rgba(47,74,96,.05);border-color:#2f4a60}
.nf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;padding:20px;border-radius:14px;background:var(--surface-0,#fff);border:0.5px solid var(--border)}
.nf-f{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0}
.nf-f.w,.nf-w,.nf-ft{grid-column:1/-1}
.nf-f>span{font-size:12px;font-weight:500;color:var(--text-secondary)}
.nf input,.nf select,.nf textarea{box-sizing:border-box;width:100%;height:40px;padding:0 12px;border:1px solid #d3d9de;border-radius:9px;background:#fff;color:#1e2226;font:inherit;font-size:14px;margin:0}
.nf textarea{height:auto;min-height:80px;padding:10px 12px;line-height:1.5}
.nf input:focus,.nf select:focus,.nf textarea:focus{outline:none;border-color:#2f4a60;box-shadow:0 0 0 3px rgba(47,74,96,.12)}
.nf-ft{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:4px}
.nf-cancel{font-size:14px;color:var(--text-secondary)}
.nf .nf-go{height:42px;padding:0 22px;border:0;border-radius:10px;background:#2f4a60;color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.nf .nf-go:hover{background:#243a4c}
.nf-w{margin:0;text-align:right}
.ibx.zero{opacity:.55}
@media (max-width:640px){.nf-route{grid-template-columns:1fr}.nf{grid-template-columns:1fr;padding:16px}}
.nf{grid-template-columns:repeat(4,minmax(0,1fr))}
.bx form.nf button.nf-go[type=submit]:not(.plain),form.nf button.nf-go{background:#2f4a60;color:#fff}
.bx form.nf button.nf-go[type=submit]:not(.plain):hover{background:#243a4c}
.ibx-hint a,.nf-hint a{color:#2f4a60;font-weight:600}
@media (max-width:640px){.nf{grid-template-columns:1fr}}
.i-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.i-tools .isearch{margin:0}
.i-tools .i-new{height:42px;padding:0 18px;border-radius:10px;background:#fff;color:#2f4a60!important;border:1.5px solid #2f4a60}
.i-tools .i-new:hover{background:#2f4a60;color:#fff!important}
.i-tools .isearch{flex:0 1 560px;display:flex;gap:8px;min-width:0}
.i-tools .isearch input{flex:1 1 auto;min-width:0}
@media (max-width:640px){.i-tools .isearch{flex:1 1 100%}.i-tools .i-new{width:100%;justify-content:center}}
.nf-cancel{display:inline-flex;align-items:center;min-height:40px;padding:0 10px}
.note a[href='/items']{display:inline-flex;align-items:center;min-height:32px}
/* 메일 담당 확인 (2026-09-29) */
.ma-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ma-btns form{margin:0}
.ma-pick{min-height:40px;padding:6px 14px;border-radius:10px;border:1.5px solid #2f4a60;background:#fff;color:#2f4a60;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.ma-pick:hover{background:#2f4a60;color:#fff}
.ma-pick .dim{font-weight:400}
.ma-none{background:transparent!important;color:var(--text-secondary)!important;border:1px solid var(--border)!important}
/* 누르는 것은 큼직하게 (2026-09-29 승현님) — 글자 15px·높이 36px 이상. 문장 속 안내 링크(.note a.lk)는 참고 글자라 그대로 */
body .page > a.lk{font-size:15px;display:inline-block;padding:6px 0}
body .ph-btn,body .phd .ph-btn{height:36px;font-size:15px}
body .ia-btn,body .iact .ia-btn,body .st-imp .ia-btn{height:38px;font-size:15px}
body .st-btn{font-size:15px}
body .sbtn{font-size:15px;padding:9px 0}
body li > a[href="/logout"]{font-size:15px}
body a.row{font-size:15px}
body .bx-foot li > a{font-size:15px}
body .isearch button,body .i-new{font-size:15px}

/* ── D2 여백·크기 원칙 (2026-09-29 승현님: 하나씩 고치지 말고 원칙으로) ─────────────────
   ① 한 묶음 안은 붙이고, 묶음 사이는 띄운다  ② 여백은 좁게·보통·넓게 세 가지만
   ③ 한 줄에 선 것은 키를 맞춘다             ④ 글자는 상자 가운데, 위아래 같게
   ⑤ 크기는 제목 > 누르는 것 > 참고 글자, 세 층                                    */
:root{--gap-s:8px;--gap-m:16px;--gap-l:28px;--ctl:40px}

/* 화면 머리: [← 돌아가기] → 제목 → 설명 → (검색·칩) → 본문 */
body.bx .page > h1{margin:0;line-height:1.25}
body.bx .page > p.note:first-child,body.bx .page > a.lk:first-child{margin:0 0 var(--gap-s);padding:0;display:inline-block}
body.bx .page > h1 + p.note{margin:var(--gap-s) 0 0}
body.bx .page > h1 + p.note + *,body.bx .page > h1 + .i-tools,body.bx .page > h1 + .chips{margin-top:var(--gap-m)}
body.bx .page > h1 + p.note + :not(.chips):not(.i-tools){margin-top:var(--gap-l)}

/* 검색·칩 줄: 서로 보통 간격, 칩 두 줄은 한 묶음이라 좁게, 그 다음 본문은 보통 */
body.bx .chips{padding-block:6px;margin:var(--gap-s) 0 0}
body.bx .page > .i-tools{margin:var(--gap-m) 0 0}
body.bx .chips.sub + .chips{margin-top:0}
body.bx .chips + p.note{margin:var(--gap-s) 0 0}
body.bx .chips + .pgrid,body.bx .chips + .banner,body.bx .chips + div:not(.chips){margin-top:var(--gap-m)}
body.bx .chips + p.note + *{margin-top:var(--gap-m)}

/* 한 줄에 선 입력칸·버튼은 같은 높이 */
body.bx .isearch input,body.bx .isearch button,body.bx .i-new,
body.bx .dk-addf input,body.bx .dk-addf button,
body.bx .dk-comp select,body.bx .dk-comp input,body.bx .dk-comp button,
body.bx .dk-inl input,body.bx .dk-inl button{height:var(--ctl);min-height:0;box-sizing:border-box;padding-top:0;padding-bottom:0}
body.bx .isearch button,body.bx .i-new,body.bx .dk-addf button,body.bx .dk-comp button,body.bx .dk-inl button{display:inline-flex;align-items:center;justify-content:center}

/* 구역 사이는 넓게, 구역 제목과 내용은 좁게 */
body.bx .dk-head{margin-bottom:0}
body.bx .dk-sec{margin-top:var(--gap-l)}
body.bx .dk-sec > h2{margin:0 0 var(--gap-s)}
body.bx .dk-head + p.note{margin:var(--gap-s) 0 0}
body.bx .page > h1 + p.note + form,body.bx .page > h1 + p.note + .panel{margin-top:var(--gap-l)}
body.bx .page > .panel + .panel{margin-top:var(--gap-m)}
body.bx .chips + .banner{margin-top:var(--gap-m)}
body.bx .page > .ibx-grid + p.note,body.bx .page > p.note + p.note{margin-top:var(--gap-m)}
body.bx .page > .lbl.sect{margin-top:var(--gap-l);margin-bottom:var(--gap-s)}
body.bx .page > a.lk:first-child + .ihead{margin-top:var(--gap-s)}
body.bx .page > .ihead + .idet{margin-top:var(--gap-m)}
body.bx .dk-head + p.note + .dk-empty{margin-top:var(--gap-m)}
/* 빈 상태 안내는 바탕 없는 글이라 위아래 속여백을 두면 제목에서 떨어져 보인다 (①) */
body.bx .dk-empty{padding:2px 0}
body.bx .dk-head + p.note + .dk-empty{margin-top:var(--gap-l)}
body.bx .page > p.note + p.note.ibx-hint{margin-top:var(--gap-s)}
body.bx .page > p.note{margin-bottom:0}
body.bx form.panel button.primary{background:#2f4a60;border-color:#2f4a60;color:#fff;font-weight:600}  /* 주요 단추는 남색 하나로 */
body.bx label.lbl{font-size:12.5px;color:var(--text-muted);display:block;margin-bottom:4px}
/* 폰 아래 띠 '접수 대기' 숫자 */
.tabbar a{position:relative}
.tabbar .tb-n{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:#f2c230;color:#1e2226;font-size:10.5px;font-style:normal;font-weight:700;line-height:16px;text-align:center}

/* 단추 옆에 뜨는 확인창 (static/ask.js) */
.d2pop{position:absolute;z-index:1000;max-width:min(340px,calc(100vw - 16px));background:#fff;color:#1e2226;border:1px solid #d3d9de;
  border-radius:12px;box-shadow:0 10px 28px rgba(30,34,38,.18);padding:14px 16px;font-size:14.5px;line-height:1.5;animation:d2popIn .12s ease-out}
.d2pop-m{white-space:pre-line}
.d2pop-in{display:block;width:100%;box-sizing:border-box;margin-top:10px;height:38px;padding:0 10px;border:1px solid #c9d0d6;border-radius:8px;font:inherit}
.d2pop-b{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.d2pop-b button{height:36px;padding:0 16px;border-radius:9px;font-size:14.5px;cursor:pointer}
.d2pop-no{background:#fff;border:1px solid #c9d0d6;color:#1e2226}
.d2pop-ok{background:#2f4a60;border:1px solid #2f4a60;color:#fff;font-weight:600}
@keyframes d2popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.d2pop{animation:none}}

/* 영업 개발 요청 올리기 (2026-09-30) — 접수 대기 '영업 개발 요청' 칸 맨 위 */
.rq-new{background:var(--surface-1,#f7f8f8);border:1px solid #dde2e6;border-radius:12px;padding:0 16px;margin:var(--gap-m,16px) 0}
.rq-form .lbl{margin:0}
#request{padding-top:4px}
.rq-new>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:15px;font-weight:600;color:#2f4a60;list-style:none}
.rq-new>summary::-webkit-details-marker{display:none}
.rq-form{display:grid;grid-template-columns:1fr 1fr;max-width:760px;gap:var(--gap-m,16px);padding:0 0 16px}
.rq-form label{display:flex;flex-direction:column;gap:var(--gap-s,8px)}
.rq-form .rq-wide{grid-column:1/-1}
.rq-form input,.rq-form textarea{width:100%;box-sizing:border-box}
.rq-form input{height:var(--ctl,40px)}
.rq-form textarea{min-height:96px}
.rq-ft{grid-column:1/-1;display:flex;justify-content:flex-end}
.rq-ft button{height:var(--ctl,40px);padding:0 20px;background:#2f4a60;color:#fff;border:0;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer}
@media (max-width:640px){.rq-form{grid-template-columns:1fr}.rq-ft button{width:100%}}
.rq-pdf{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;margin-top:8px;border:1px solid #d3d9de;border-radius:8px;background:#fff;color:#2f4a60;font-size:14px;text-decoration:none;width:fit-content}
.rq-pdf:hover{background:#f2f5f7}
.page input[type=file]{height:auto;padding:0;border:0;background:none;font-size:14px;color:var(--text-secondary,#5d6670)}
.page input[type=file]::file-selector-button{height:var(--ctl,40px);padding:0 16px;margin-right:12px;border:1px solid #d3d9de;border-radius:8px;background:#fff;color:#1e2226;font:inherit;font-size:15px;cursor:pointer}
.page input[type=file]::file-selector-button:hover{background:#f2f5f7}
.bg-list{margin:8px 0 0;padding-left:20px;line-height:1.7;font-size:14.5px}
.bg-warn{margin-top:8px;padding:8px 12px;border-radius:8px;background:#fdf3dc;color:#7a5410;font-size:14px}
.bg-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}
.bg-ft .rq-pdf{margin-top:0}

/* 함께 정리해요(2026-10-01) — 확인 카드 단추·안내. 간격은 원칙의 8/16, 단추는 --ctl 높이 */
.dk-cf-btns{display:flex;flex-wrap:wrap;gap:var(--gap-s,8px);margin-top:var(--gap-s,8px)}
.dk-cf-btns button{height:var(--ctl,40px);padding:0 16px;font-size:15px;display:inline-flex;align-items:center}
.dk-cf-help{margin:0 0 var(--gap-s,8px);font-size:13px;color:var(--muted,#6b7280)}
.dk-cf-help summary{cursor:pointer;font-size:14px;color:var(--accent,#2563eb);min-height:32px;display:flex;align-items:center}
.dk-cf-help div{line-height:1.6;padding:4px 0 var(--gap-s,8px)}
.dk-cf-note{margin-bottom:var(--gap-m,16px);font-size:14px;line-height:1.6}
/* 같은 아이템 알림(아이템 메뉴)·합치기 칸(정보 수정) — 2026-10-01 */
.dup-ban{margin:var(--gap-m,16px) 0;padding:12px 16px;border-radius:12px;background:#fdf3dc;color:#5c4210;font-size:14px}
.dup-ban b{font-size:15px}
.dup-row{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-s,8px);margin-top:var(--gap-s,8px);flex-wrap:wrap}
.dup-row span{min-width:0;line-height:1.5}
.dup-go{display:inline-flex;align-items:center;height:var(--ctl,40px);padding:0 16px;border-radius:10px;background:#fff;border:1px solid #e3c98a;color:#5c4210;font-size:15px;text-decoration:none;white-space:nowrap}
.m-merge{margin-top:var(--gap-l,28px);padding-top:var(--gap-m,16px);border-top:1px solid var(--line,#e5e7eb)}
.m-dir{display:flex;flex-direction:column;gap:var(--gap-s,8px);margin:var(--gap-s,8px) 0;font-size:14px}
.m-dir label{display:flex;align-items:center;gap:var(--gap-s,8px);font-weight:400;margin:0}
.m-btns{display:flex;gap:var(--gap-s,8px);flex-wrap:wrap;margin-top:var(--gap-s,8px)}
.m-btns button{height:var(--ctl,40px);padding:0 16px;font-size:15px;display:inline-flex;align-items:center}

/* ── 펼치기·접기 원칙 (2026-10-01 승현님: "+과제 눌렀을 때와 해제했을 때 모양이 똑같아 뭐가 달라지는지 모르겠다") ──
   D2의 모든 펼침 칸은 <details><summary>로 만든다. 그러면 아래 모양이 저절로 붙는다 — 새로 만드는 칸도 마찬가지.
   ① 단추가 상태를 말한다: 닫힘 ▸ / 열림 ▾ + 오른쪽 '접기'
   ② 열린 동안 단추는 눌린 모양(바탕색·굵게)
   ③ 펼쳐진 내용은 단추와 한 테두리 상자 안에 붙는다 — '여기서 나왔다'가 보이게
   예외: ⋯ 메뉴(.dk-more)는 작은 메뉴라 따로. */
details:not(.dk-more)>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:36px}
details:not(.dk-more)>summary::-webkit-details-marker{display:none}
details:not(.dk-more)>summary::before{content:"▸";font-size:.85em;width:1em;flex:none;color:var(--text-secondary,#6b7280)}
details:not(.dk-more)[open]>summary::before{content:"▾"}
details:not(.dk-more)[open]{border:1px solid var(--line,#e3e7ec);border-radius:12px;padding:0 12px 12px;margin:var(--gap-s,8px) 0}
details:not(.dk-more)[open]>summary{margin:0 -12px var(--gap-s,8px);padding:8px 12px;border-radius:12px 12px 0 0;
  background:var(--surface-1,#eef2f6);font-weight:600}
details:not(.dk-more)[open]>summary::after{content:"접기";margin-left:auto;font-size:13px;font-weight:400;color:var(--text-secondary,#6b7280)}