/*
 * CGM 이슈 — 화면 모양. CGM 앱(beta2/css/tokens.css · ui.css)의 토큰·모양을 필요한 만큼만 옮겨 왔다(가져다 쓰지 않음 — 따로 도는 사이트).
 *   색 = 시안 A "Clear" · 누르는 것 = 12px 둥근 네모 · 표시만 하는 것(상태) = 작은 알약 · 진한 단추는 구역마다 1개 · 밝은 테마 하나.
 *   글자 16px↑(휴대폰 17px) · 누르는 곳 44px↑.
 */
@font-face{
  font-family:"Pretendard Variable";
  src:url("/vendor/PretendardVariable.woff2") format("woff2-variations");
  font-weight:45 920; font-style:normal; font-display:swap;
}
:root{
  --bg:#f6f7f7; --panel:#ffffff; --fill:#f1f2f3; --fill-2:#e8eaeb; --scrim:rgba(17,24,28,.42);
  --line:rgba(17,24,28,.07); --line-2:rgba(17,24,28,.12); --line-3:rgba(17,24,28,.22);
  --ink:#121619; --ink-2:#3b434a; --ink-3:#5b646c; --ink-4:#8a939a;
  --accent:#0d7a71; --accent-hover:#0a655e; --accent-press:#084f49; --accent-ink:#ffffff;
  --accent-soft:#e6f4f2; --accent-ring:rgba(13,122,113,.32);
  --link:var(--accent); --link-hover:var(--accent-hover);
  --ok:#15803d; --ok-soft:#e7f5ec;
  --warn:#9a5b00; --warn-soft:#fdf2df;
  --dang:#c2362e; --dang-soft:#fcebea;
  --info:#1f69b8; --info-soft:#e8f1fb;
  --violet:#6d28d9; --violet-soft:#f1ebfd;
  --muted:#5b646c; --muted-soft:#eef0f1;
  --font:"Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-xs:14px; --t-sm:15px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:28px;
  --w-reg:450; --w-med:550; --w-semi:600; --w-bold:700; --w-black:800;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r-btn:12px; --r-btn-in:8px; --r-tag:999px; --r-lg:16px; --r-xl:24px; --r-img:8px;
  --sh-1:0 0 0 1px rgba(17,24,28,.04), 0 1px 2px rgba(17,24,28,.05), 0 4px 14px -6px rgba(17,24,28,.10);
  --sh-2:0 0 0 1px rgba(17,24,28,.05), 0 2px 4px rgba(17,24,28,.05), 0 16px 32px -12px rgba(17,24,28,.18);
  --sh-pop:0 0 0 1px rgba(17,24,28,.06), 0 12px 32px -8px rgba(17,24,28,.22);
  --dur-1:140ms; --dur-2:220ms; --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --ctl:48px; --ctl-lg:56px; --ctl-sm:44px;
  --page:960px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--w-reg) var(--t-md)/1.55 var(--font);letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;}
body.modal-open{overflow:hidden;}
button,input,textarea,select{font:inherit;color:inherit;}
a{color:var(--link);}
h1,h2,h3{margin:0;line-height:1.3;letter-spacing:-.015em;}
:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}
[hidden]{display:none!important;}
.boot{margin:40vh 0 0;text-align:center;color:var(--ink-3);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- 단추 ---------- */
.btn{height:var(--ctl);min-width:var(--ctl-sm);padding:0 var(--s5);border:0;border-radius:var(--r-btn);
  background:var(--panel);color:var(--ink);box-shadow:var(--sh-1);
  font:var(--w-semi) var(--t-md)/1 var(--font);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  cursor:pointer;white-space:nowrap;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);}
.btn:hover{box-shadow:var(--sh-2);}
.btn:active{transform:scale(.98);}
.btn.pri{background:var(--accent);color:var(--accent-ink);box-shadow:none;font-weight:var(--w-bold);}
.btn.pri:hover{background:var(--accent-hover);}
.btn.pri:active{background:var(--accent-press);}
.btn.txt{padding:0 var(--s3);background:transparent;box-shadow:none;color:var(--link);}
.btn.txt:hover{background:var(--fill);color:var(--link-hover);}
.btn.dang{background:var(--dang-soft);color:var(--dang);box-shadow:none;font-weight:var(--w-bold);}
.btn.dang:hover{background:color-mix(in srgb,var(--dang-soft) 84%,var(--dang));}
.btn.dang.solid{background:var(--dang);color:#fff;}
.btn.dang.solid:hover{background:color-mix(in srgb,var(--dang) 88%,var(--ink));}
.btn.txt.dang{background:transparent;color:var(--dang);}
.btn.txt.dang:hover{background:var(--dang-soft);}
.btn.lg{height:var(--ctl-lg);padding:0 var(--s6);font-size:var(--t-lg);}
.btn.sm{height:var(--ctl-sm);padding:0 var(--s4);font-size:var(--t-sm);}
.btn.block{display:flex;width:100%;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;}
.btn .ic{width:20px;height:20px;flex:0 0 auto;}
/* 회색 면 위 보조 단추는 흰 바탕 그대로 */

/* ---------- 칩(골라 보기) ---------- */
.chip{height:var(--ctl);min-width:0;padding:0 var(--s3);border:0;border-radius:var(--r-btn);background:var(--panel);color:var(--ink-2);
  box-shadow:var(--sh-1);font:var(--w-semi) var(--t-md)/1 var(--font);display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;}
.chip:hover{box-shadow:var(--sh-2);color:var(--ink);}
.chip .n{font-size:var(--t-xs);font-weight:var(--w-bold);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.chip[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);font-weight:var(--w-bold);}
.chip[aria-pressed="true"] .n{color:inherit;}
.chip.chk::before{content:"";width:18px;height:18px;border-radius:5px;flex:0 0 auto;border:2px solid var(--line-3);background:var(--panel);
  display:inline-grid;place-items:center;font-size:13px;font-weight:var(--w-black);line-height:1;color:var(--accent-ink);}
.chip.chk[aria-pressed="true"]::before{content:"✓";border-color:var(--accent);background:var(--accent);}

/* ---------- 알약(표시만) ---------- */
.tag{height:28px;padding:0 var(--s3);border-radius:var(--r-tag);display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:var(--t-xs);font-weight:var(--w-bold);line-height:1;white-space:nowrap;background:var(--fill);color:var(--ink-2);}
.tag.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.tag[data-tone="info"]{background:var(--info-soft);color:var(--info);}
.tag[data-tone="violet"]{background:var(--violet-soft);color:var(--violet);}
.tag[data-tone="warn"]{background:var(--warn-soft);color:var(--warn);}
.tag[data-tone="ok"]{background:var(--ok-soft);color:var(--ok);}
.tag[data-tone="dang"]{background:var(--dang-soft);color:var(--dang);}
.tag[data-tone="muted"]{background:var(--muted-soft);color:var(--muted);}

/* ---------- 입력 ---------- */
.f-field{display:flex;flex-direction:column;gap:var(--s2);min-width:0;}
.f-label{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);}
.f-label .lb-opt{font-weight:var(--w-reg);color:var(--ink-3);font-size:var(--t-sm);}
.f-input{width:100%;height:var(--ctl);padding:0 var(--s4);border:1.5px solid var(--line-3);border-radius:var(--r-btn);background:var(--panel);
  color:var(--ink);font:var(--w-reg) var(--t-md)/1.2 var(--font);outline:none;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);}
.f-input::placeholder{color:var(--ink-4);}
.f-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring);}
.f-input[aria-invalid="true"]{border-color:var(--dang);}
.f-hint{margin:0;font-size:var(--t-xs);color:var(--ink-3);}
.f-err{margin:0;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--dang);}
.f-err:empty{display:none;}
.f-search{height:var(--ctl);display:flex;align-items:center;gap:10px;padding:0 var(--s4);border-radius:var(--r-btn);background:var(--panel);
  box-shadow:inset 0 0 0 1.5px var(--line-3);min-width:0;flex:1 1 auto;}
.f-search:focus-within{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px var(--accent-ring);}
.f-search .ic{width:20px;height:20px;color:var(--ink-3);flex:0 0 auto;}
.f-search input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:none;background:transparent;font-size:var(--t-md);}
.f-search input::placeholder{color:var(--ink-4);}
.f-search input::-webkit-search-cancel-button{display:none;}

/* ---------- 묶음 ---------- */
.box{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s6);}
.sec-title{font-size:var(--t-xl);font-weight:var(--w-bold);}

/* ---------- 머리 줄 ---------- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--line);}
.top-in{max-width:var(--page);margin:0 auto;height:64px;padding:0 var(--s4);display:flex;align-items:center;gap:var(--s2);}
.brand{display:inline-flex;align-items:center;gap:10px;height:var(--ctl);padding:0 var(--s2);margin-left:calc(-1 * var(--s2));border-radius:var(--r-btn);
  color:var(--ink);text-decoration:none;font-size:var(--t-lg);font-weight:var(--w-black);letter-spacing:-.02em;}
.brand .mark{width:28px;height:28px;flex:0 0 auto;}
.brand:hover{background:var(--fill);}
.top .sp{flex:1 1 auto;}
.who{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap;margin-right:var(--s1);}
.who b{color:var(--ink);font-weight:var(--w-bold);}
.top-m{display:none;}

/* ---------- 쪽 ---------- */
.page{max-width:var(--page);margin:0 auto;padding:var(--s6) var(--s4) 96px;}
.page-head{display:flex;align-items:center;gap:var(--s3);margin:var(--s2) 0 var(--s5);}
.page-title{font-size:var(--t-2xl);font-weight:var(--w-black);flex:1 1 auto;min-width:0;}

/* ---------- 목록 ---------- */
.tools{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4);}
.find{display:flex;gap:var(--s2);min-width:0;}
.find .btn{flex:0 0 auto;}
.stf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2);}
.stf .chip{width:100%;}
.cnt{margin:0 0 var(--s2);font-size:var(--t-md);color:var(--ink-3);padding:0 var(--s1);}
.cnt b{color:var(--ink);font-weight:var(--w-bold);font-variant-numeric:tabular-nums;}
.ilist{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content max-content max-content max-content max-content 20px;
  column-gap:var(--s4);background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s2);}
.ihead,.irow{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;}
.ihead{padding:var(--s2) var(--s4);font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink-3);}
.irow{position:relative;min-height:64px;padding:var(--s3) var(--s4);border-radius:var(--r-btn);color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;}
.irow + .irow::before{content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;height:1px;background:var(--line-2);pointer-events:none;}
.irow:hover::before,.irow:hover + .irow::before{opacity:0;}
.irow:hover{background:var(--fill);}
.irow:active{background:var(--fill-2);}
.irow:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px;}
.c-num{font-weight:var(--w-bold);font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap;}
.c-title{font-size:var(--t-lg);font-weight:var(--w-semi);min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow-wrap:anywhere;line-height:1.35;}
.c-st{display:flex;}
.c-who,.c-date,.c-cnt,.c-cmt{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;}
.c-who{max-width:12em;overflow:hidden;text-overflow:ellipsis;}
.c-cnt{display:flex;gap:var(--s2);}
.c-go{font-size:26px;line-height:1;color:var(--ink-3);text-align:right;}
.empty{padding:var(--s10) var(--s4);text-align:center;color:var(--ink-3);grid-column:1 / -1;}
.empty b{display:block;color:var(--ink);font-size:var(--t-lg);margin-bottom:var(--s1);}
.more{margin-top:var(--s4);}

/* ---------- 이슈 화면 ---------- */
.back{margin:0 0 var(--s3) calc(-1 * var(--s3));}
.issue{display:flex;flex-direction:column;gap:var(--s4);}
.ihd{display:flex;flex-direction:column;gap:var(--s3);}
.ihd-top{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
.ihd-num{font-size:var(--t-lg);font-weight:var(--w-black);font-variant-numeric:tabular-nums;color:var(--ink-2);}
.ititle{font-size:var(--t-2xl);font-weight:var(--w-black);overflow-wrap:anywhere;}
.imeta{margin:0;font-size:var(--t-sm);color:var(--ink-3);display:flex;flex-wrap:wrap;gap:2px var(--s2);}
.imeta b{color:var(--ink-2);font-weight:var(--w-semi);}
.imeta > span + span::before{content:"·";margin-right:var(--s2);}
.ihd-acts{display:flex;gap:var(--s2);flex-wrap:wrap;}
.result{display:flex;flex-direction:column;gap:var(--s2);border-left:0;background:var(--ok-soft);box-shadow:none;}
.result[data-tone="warn"]{background:var(--warn-soft);}
.result[data-tone="muted"],.result[data-tone="info"]{background:var(--fill);}
.result-h{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-weight:var(--w-bold);}
.result-h .lbl{font-size:var(--t-md);}
.result-note{margin:0;font-size:var(--t-lg);font-weight:var(--w-semi);overflow-wrap:anywhere;}
.result-by{margin:0;font-size:var(--t-sm);color:var(--ink-3);}
.result .btn{align-self:flex-start;}
.sub{font-size:var(--t-lg);font-weight:var(--w-bold);margin:0 0 var(--s3);}
.att-view{margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s2);}
.att-view .sub{margin:0;}
.att-row{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s4);border-radius:var(--r-btn);background:var(--fill);
  color:var(--ink);text-decoration:none;}
.att-row:hover{background:var(--fill-2);}
.att-row{flex-wrap:wrap;row-gap:2px;}
.att-row .nm{flex:1 1 10em;min-width:0;font-weight:var(--w-semi);overflow-wrap:anywhere;}
.att-row .sz{margin-left:auto;}
.att-row .sz{flex:0 0 auto;font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.att-row .go{flex:0 0 auto;font-weight:var(--w-bold);color:var(--link);}
.stbox .now{margin:0 0 var(--s4);display:flex;align-items:center;gap:var(--s2);color:var(--ink-2);}
.acts{display:flex;gap:var(--s2);flex-wrap:wrap;}
.acts .btn{flex:0 0 auto;}
.none{margin:0;color:var(--ink-3);}

/* 흐름 */
.flow{display:flex;flex-direction:column;gap:var(--s3);}
.flow > .sec-title{margin:var(--s4) var(--s1) 0;}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3);}
.ev-sys{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:var(--s2) var(--s4);font-size:var(--t-sm);color:var(--ink-3);}
.ev-sys b{color:var(--ink);font-weight:var(--w-semi);}
.ev-card{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s3);}
.ev-card.st{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);}
.ev-card.done{background:var(--panel);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ok) 40%,transparent);}
.ev-card.rej{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--dang) 30%,transparent);}
.ev-h{display:flex;align-items:center;gap:6px var(--s2);flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-3);}
.ev-h b{color:var(--ink);font-size:var(--t-md);font-weight:var(--w-bold);}
.ev-h .what{color:var(--ink-2);font-weight:var(--w-semi);}
.ev-t::before{content:"·";margin-right:6px;}
.ev-k{font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--ink-2);margin:0;}
.ev-res{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-weight:var(--w-semi);overflow-wrap:anywhere;}
.ev-acts{display:flex;gap:var(--s2);justify-content:flex-end;margin:calc(-1 * var(--s1)) calc(-1 * var(--s2)) calc(-1 * var(--s2)) 0;}

/* 서식 글 */
.rich{font-size:var(--t-md);line-height:1.7;color:var(--ink);overflow-wrap:anywhere;}
.rich > :first-child{margin-top:0;}
.rich > :last-child{margin-bottom:0;}
.rich p{margin:0 0 .6em;}
.rich h2{font-size:var(--t-xl);margin:1em 0 .4em;}
.rich h3{font-size:var(--t-lg);margin:.9em 0 .35em;}
.rich ul,.rich ol{margin:0 0 .6em;padding-left:1.4em;}
.rich li{margin:.15em 0;}
.rich blockquote{margin:0 0 .6em;padding:.2em 0 .2em 1em;border-left:4px solid var(--line-2);color:var(--ink-2);}
.rich img{display:block;max-width:100%;height:auto;margin:.6em 0;border-radius:var(--r-img);box-shadow:0 0 0 1px var(--line);cursor:zoom-in;}
.rich a{word-break:break-all;}
.rich table{border-collapse:collapse;margin:0 0 .8em;max-width:100%;display:block;overflow-x:auto;font-size:var(--t-sm);line-height:1.5;}
.rich th,.rich td{border:1px solid var(--line-3);padding:6px 10px;vertical-align:top;text-align:left;min-width:3em;}
.rich th{background:var(--fill);font-weight:var(--w-semi);}
.rich-empty{color:var(--ink-3);}

/* ---------- 편집기 ---------- */
.ed{display:flex;flex-direction:column;gap:var(--s2);min-width:0;}
.ed-tools{display:flex;gap:var(--s2);flex-wrap:wrap;}
.ed-tools .btn{background:var(--fill);box-shadow:none;}
.ed-tools .btn:hover{background:var(--fill-2);}
.ed-tools .btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);}
.ed-tools .sp{flex:1 1 auto;}
.ed-area{min-height:180px;max-height:none;padding:var(--s3) var(--s4);border:1.5px solid var(--line-3);border-radius:var(--r-btn);background:var(--panel);
  outline:none;cursor:text;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);}
.ed-area:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring);}
.ed-area[aria-invalid="true"]{border-color:var(--dang);}
.ed-area.drag{border-color:var(--accent);border-style:dashed;background:var(--accent-soft);}
.ed-area:empty::before{content:attr(data-ph);color:var(--ink-4);pointer-events:none;white-space:pre-line;}
.ed-area img{cursor:default;}
.ed-area.sm{min-height:120px;}
.ed-area.big{min-height:min(52vh,460px);}
/* 올라가는 사진 자리(그 자리에 흐리게 + 몇 %) · 실패하면 [다시 올리기] [빼기] */
.up{position:relative;display:block;width:fit-content;max-width:100%;margin:.6em 0;border-radius:var(--r-img);overflow:hidden;
  box-shadow:inset 0 0 0 2px var(--accent);user-select:none;}
.up img{display:block;max-width:100%;max-height:320px;height:auto;margin:0;opacity:.45;box-shadow:none;border-radius:0;}
.up-msg{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);padding:4px 10px;border-radius:var(--r-tag);background:var(--panel);
  color:var(--accent);font-size:var(--t-sm);font-weight:var(--w-bold);line-height:1.4;box-shadow:var(--sh-1);}
.up.fail{box-shadow:inset 0 0 0 2px var(--dang);min-width:240px;}
.up.fail .up-msg{color:var(--dang);}
.up-acts{position:absolute;left:8px;bottom:8px;display:flex;gap:6px;flex-wrap:wrap;}
.up-btn{height:var(--ctl-sm);padding:0 var(--s4);border:0;border-radius:var(--r-btn);background:var(--panel);color:var(--ink);box-shadow:var(--sh-1);
  font:var(--w-semi) var(--t-sm)/1 var(--font);cursor:pointer;}
.up-btn[data-act="retry"]{background:var(--accent);color:var(--accent-ink);font-weight:var(--w-bold);}
.ed-st{margin:0;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--accent);}
.ed-st.err{color:var(--dang);}
.ed-st:empty{display:none;}
.ed-hint{margin:0;font-size:var(--t-xs);color:var(--ink-3);}

/* 첨부(올리기) */
.att{display:flex;flex-direction:column;gap:var(--s2);}
.att-top{display:flex;align-items:center;gap:var(--s3);}
.att-top .f-label{flex:1 1 auto;}
.att-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2);}
.att-list:empty{display:none;}
.att-it{display:flex;align-items:center;gap:var(--s3);min-height:52px;padding:var(--s1) var(--s1) var(--s1) var(--s4);border-radius:var(--r-btn);background:var(--fill);}
.att-it .nm{flex:1 1 auto;min-width:0;font-weight:var(--w-semi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-it .sz{flex:0 0 auto;font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;}
.att-it .sz.err{color:var(--dang);font-weight:var(--w-semi);}
.att-it .sz.up{color:var(--accent);font-weight:var(--w-semi);}
.att-it .btn{flex:0 0 auto;}
.att-drop{display:none;}

/* 끝남 창 — 결과 고르기 */
.opt-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);}
.ropt{min-height:var(--ctl);padding:var(--s2) var(--s2);border:1.5px solid var(--line-3);border-radius:var(--r-btn);background:var(--panel);
  display:flex;align-items:center;justify-content:center;text-align:center;font-weight:var(--w-semi);cursor:pointer;color:var(--ink);line-height:1.25;}
.ropt:hover{border-color:var(--ink-4);}
.ropt[aria-checked="true"]{border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:var(--w-bold);}
.opt-row[aria-invalid="true"] .ropt{border-color:var(--dang);}

/* 댓글 쓰기 */
.composer{display:flex;flex-direction:column;gap:var(--s3);}
.composer .sub{margin:0;}
.composer-f{display:flex;justify-content:flex-end;}

/* ---------- 창(가운데) · 휴대폰은 아래에서 올라오는 시트 ---------- */
.mhost{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;}
.mscrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--dur-2) var(--ease);}
.mdlg{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;
  background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-pop);overflow:hidden;opacity:0;transform:translateY(8px) scale(.98);
  transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease);}
.mdlg.wide{max-width:760px;}
.mdlg.img{max-width:min(1200px,100%);}
.mhost.show .mscrim{opacity:1;}
.mhost.show .mdlg{opacity:1;transform:none;}
.mh{flex:0 0 auto;padding:22px 26px 6px;}
.mt{font-size:var(--t-xl);font-weight:var(--w-bold);}
.mb{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 26px 20px;display:flex;flex-direction:column;gap:var(--s4);}
.mmsg{margin:0;font-size:var(--t-md);color:var(--ink-2);line-height:1.6;white-space:pre-line;}
.mf{flex:0 0 auto;display:flex;gap:10px;padding:12px 22px 22px;box-shadow:0 -1px 0 var(--line);}
.mf .btn{flex:1 1 0;height:var(--ctl-lg);font-size:var(--t-md);min-width:0;}
.mf .btn.cancel{background:var(--fill);box-shadow:none;}
.mf .btn.cancel:hover{background:var(--fill-2);}
.mf-err{margin:0;padding:0 26px 10px;flex:0 0 auto;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--dang);}
.mf-err:empty{display:none;}
.lb-img{display:block;max-width:100%;max-height:calc(100dvh - 200px);margin:0 auto;border-radius:var(--r-img);}
.mb.lb{padding:12px;align-items:center;background:var(--fill);}
@media (max-width:768px){
  .mhost{place-items:end stretch;padding:env(safe-area-inset-top,0px) 0 0;}
  .mdlg,.mdlg.wide{max-width:none;width:100%;border-radius:18px 18px 0 0;opacity:1;transform:translateY(100%);
    max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);
    padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
    transition:transform var(--dur-2) var(--ease-out);}
  .mdlg.img{max-width:none;}
  .mhost.show .mdlg{transform:none;}
  .mdlg::before{content:"";display:block;flex:0 0 auto;width:40px;height:5px;border-radius:3px;background:var(--line-3);margin:10px auto 0;}
  .mh{padding:12px 20px 2px;}
  .mb{padding:10px 20px 16px;}
  .mf{padding:10px 16px 16px;}
  .mf-err{padding:0 20px 8px;}
}
@media (prefers-reduced-motion:reduce){.mscrim,.mdlg{transition:none;}}

/* ---------- 알림(토스트) ---------- */
.toasts{position:fixed;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:1200;display:flex;flex-direction:column;align-items:center;
  gap:10px;pointer-events:none;padding:0 16px;}
.toast{min-height:52px;max-width:min(560px,100%);padding:12px 22px;border-radius:var(--r-tag);background:var(--ink);color:#fff;box-shadow:var(--sh-pop);
  display:flex;align-items:center;gap:10px;font-size:var(--t-md);font-weight:var(--w-semi);line-height:1.4;opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out);}
.toast.show{opacity:1;transform:none;}
.toast::before{content:"✓";width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:var(--ok);font-size:14px;font-weight:var(--w-black);}
.toast.dang::before{content:"!";background:var(--dang);}
.toast.info::before{content:"i";background:var(--info);}
.toast:has(.toast-a){pointer-events:auto;padding-right:8px;}
.toast-a{flex:0 0 auto;height:var(--ctl-sm);padding:0 var(--s4);border:0;border-radius:var(--r-btn);background:#fff;color:var(--ink);
  font:var(--w-bold) var(--t-sm)/1 var(--font);cursor:pointer;margin-left:var(--s2);}
.toast-a:hover{background:var(--fill-2);}
@media (max-width:768px){body.modal-open .toasts{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;}}

/* ---------- 목록 — 내 임시저장 줄 · 저장 공간(dev) ---------- */
.drafts-row{width:100%;min-height:var(--ctl);margin:0 0 var(--s3);padding:var(--s2) var(--s4);border:0;border-radius:var(--r-btn);
  background:var(--warn-soft);color:var(--ink);display:flex;align-items:center;gap:var(--s3);cursor:pointer;text-align:left;font:inherit;}
.drafts-row:hover{background:color-mix(in srgb,var(--warn-soft) 88%,var(--warn));}
.drafts-row .dr-t{flex:1 1 auto;min-width:0;font-weight:var(--w-semi);}
.drafts-row .dr-t b{font-variant-numeric:tabular-nums;}
.drafts-row .dr-go{flex:0 0 auto;font-weight:var(--w-bold);color:var(--warn);white-space:nowrap;}
.storage{margin:var(--s5) var(--s1) 0;font-size:var(--t-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.storage.warn{color:var(--dang);font-weight:var(--w-semi);}
.dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2);}
.dl-it{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s4);border-radius:var(--r-btn);background:var(--fill);}
.dl-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dl-t{font-weight:var(--w-semi);overflow-wrap:anywhere;}
.dl-s{font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.dl-a{flex:0 0 auto;display:flex;gap:var(--s1);}

/* ---------- 쓰기 화면(새 창) ---------- */
.write{display:flex;flex-direction:column;gap:var(--s5);}
.page.has-wbar{padding-bottom:140px;}
.wbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--panel) 94%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--line-2);padding-bottom:env(safe-area-inset-bottom,0px);}
.wbar-in{max-width:var(--page);margin:0 auto;min-height:76px;padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s2);}
.wbar .sp{flex:1 1 auto;}
.wbar .btn{flex:0 0 auto;min-width:112px;}
.save-st{min-width:0;font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.done-box{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;padding:var(--s10) var(--s5);margin-top:var(--s6);}
.done-num{margin:0;font-size:var(--t-2xl);font-weight:var(--w-black);color:var(--accent);font-variant-numeric:tabular-nums;}
.done-t{font-size:var(--t-xl);font-weight:var(--w-bold);}
.done-acts{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;margin-top:var(--s3);}

/* ---------- 로그인 ---------- */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--s6) var(--s4);}
.login-card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:var(--s5);}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-bottom:var(--s2);}
.login-brand .mark{width:52px;height:52px;}
.login-brand h1{font-size:var(--t-2xl);font-weight:var(--w-black);}
.login-brand p{margin:0;color:var(--ink-3);font-size:var(--t-md);}
.login form{display:flex;flex-direction:column;gap:var(--s4);}

/* ---------- 휴대폰 ---------- */
@media (max-width:760px){
  body{font-size:17px;}
  .f-input,.f-search input{font-size:17px;}
  .top-in{height:60px;}
  .top-d{display:none;}
  .top-m{display:inline-flex;}
  .page{padding:var(--s4) var(--s3) 88px;}
  .page-title{font-size:26px;}
  .box{padding:var(--s5) var(--s4);border-radius:20px;}
  .stf{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ilist{display:flex;flex-direction:column;padding:var(--s1);border-radius:20px;}
  .ihead{display:none;}
  .irow{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;grid-template-areas:"num st date" "title title title" "who cnt cmt";
    column-gap:var(--s2);row-gap:6px;padding:var(--s3) 36px var(--s3) var(--s3);}
  .c-num{grid-area:num;}
  .c-st{grid-area:st;}
  .c-date{grid-area:date;justify-self:end;}
  .c-title{grid-area:title;font-size:var(--t-lg);}
  .c-who{grid-area:who;max-width:9em;}
  .c-cnt{grid-area:cnt;}
  .c-cmt{grid-area:cmt;justify-self:end;}
  .c-go{position:absolute;right:12px;top:50%;transform:translateY(-50%);}
  .ititle{font-size:24px;}
  .opt-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ev-card{padding:var(--s4);}
  .ev-t{flex-basis:100%;}
  .ev-t::before{content:none;}
  .ev-sys .ev-t{padding-left:2px;}
  .att-it .sz{display:none;}
  .att-it .sz.up,.att-it .sz.err{display:inline;}
  .composer-f .btn{width:100%;}
  .wbar-in{flex-wrap:wrap;row-gap:6px;padding:var(--s2) var(--s3);}
  .save-st{flex:1 1 100%;order:-1;text-align:center;}
  .wbar .sp{display:none;}
  .wbar .btn{flex:1 1 0;min-width:0;}
  .page.has-wbar{padding-bottom:170px;}
  .dl-it{flex-wrap:wrap;}
  .dl-a{width:100%;justify-content:flex-end;}
  .done-acts{flex-direction:column;align-self:stretch;}
  .done-acts .btn{width:100%;}
}
@media (max-width:420px){
  .ed-tools{flex-wrap:nowrap;gap:6px;}
  .ed-tools .btn{padding:0 10px;}
}
@media (max-width:360px){
  .find .btn{padding:0 var(--s3);}
  .stf .chip{padding:0 6px;font-size:var(--t-sm);}
}