/* 가리사니 화면 스타일. Layout: one phone-width column with a slim top bar. */
 /* 제목 글꼴: GS혜자로운 (GS리테일, 무료·웹폰트 탑재 허용, 원본 파일 그대로 사용. fonts/GS-Hyejaroun-Font-License.pdf) */
@font-face{font-family:"GS Hyejaroun";src:url(/fonts/GSHYEJAROUNTTF-Bold.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap;size-adjust:90%}
:root{
  --bg:#FDFAF5; --surface:#FFFFFF; --sunk:#F8F3EB; --line:#EEE7DC; --lift:#F1EBE1;
  --ink:#191C2E; --muted:#5D6278; --faint:#8A8FA6;
  --a:#4B57E8; --a-soft:#E6E8FD; --b:#F07A2B; --b-soft:#FDEBDD;
  --seal:#D2333F; --seal-soft:#FBE3E5;
  --ok:#1E8A5A; --ok-soft:#DDF3E8;
  --wait:#D9921A; --wait-ink:#8A5A00; --wait-soft:#FFF3DC;
  --hold:#7A5AF0; --hold-ink:#5B3FC4; --hold-soft:#EEEAFE;
  --display:"GS Hyejaroun","Black Han Sans","Pretendard",system-ui,sans-serif;
  --brand:"Black Han Sans","Pretendard",system-ui,sans-serif; /* 로고·브랜드명·도장 (GS혜자로운은 라이선스상 BI/CI에 쓸 수 없음) */
  --body:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;
  --r:18px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F111A; --surface:#181B28; --sunk:#202436; --line:#2E3348; --lift:transparent;
  --ink:#ECEEF6; --muted:#A3A8C0; --faint:#767C96;
  --a:#8790FF; --a-soft:#262B55; --b:#FF9A55; --b-soft:#43291A;
  --seal:#FF5A64; --seal-soft:#45202A; --ok:#4CC88E; --ok-soft:#173528; --wait:#F0B44C; --wait-ink:#F5C978; --wait-soft:#3A2D14; --hold:#A58BFF; --hold-ink:#C3B2FF; --hold-soft:#2C2550; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F111A; --surface:#181B28; --sunk:#202436; --line:#2E3348; --lift:transparent;
  --ink:#ECEEF6; --muted:#A3A8C0; --faint:#767C96;
  --a:#8790FF; --a-soft:#262B55; --b:#FF9A55; --b-soft:#43291A;
  --seal:#FF5A64; --seal-soft:#45202A; --ok:#4CC88E; --ok-soft:#173528; --wait:#F0B44C; --wait-ink:#F5C978; --wait-soft:#3A2D14; --hold:#A58BFF; --hold-ink:#C3B2FF; --hold-soft:#2C2550; color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);word-break:keep-all;font-size:15px;line-height:1.6;padding-inline:16px;padding-block:0 40px}
.wrap{max-width:1120px;margin:0 auto}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.proto{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:16px}
.proto .tag{font-size:11px;letter-spacing:.06em;color:var(--faint);font-weight:700}
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:5px 12px;border-radius:999px;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"].sa{background:var(--a);color:#fff}
.seg button[aria-pressed="true"].sb{background:var(--b);color:#fff}
.seg button[aria-pressed="true"].sn{background:var(--ink);color:var(--surface)}
.proto .reset{margin-left:auto;border:0;background:none;font-size:13px;color:var(--muted);text-decoration:underline}
.screen{display:flex;flex-direction:column;gap:16px;max-width:600px;margin:0 auto}
.screen.wide{max-width:none}
h1,h2{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:40px;line-height:1.15}
h2{font-size:24px;line-height:1.25}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:13px}
.btn{border:0;border-radius:12px;padding:14px 16px;font-weight:700;font-size:16px;width:100%}
.btn.primary{background:var(--ink);color:var(--surface)}
.btn.a{background:var(--a);color:#fff} .btn.b{background:var(--b);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line);font-weight:500}
.btn:disabled{opacity:.45;cursor:default}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 3px 0 var(--lift,transparent)}
.label{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:14px}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
input[type=text],input[type=search],textarea{width:100%;font:inherit;color:var(--ink);background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
textarea{resize:vertical;min-height:84px}
.note{font-size:13px;color:var(--muted);background:var(--sunk);border-radius:10px;padding:10px 12px}
.who{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.dot{width:10px;height:10px;border-radius:50%}
.dot.a{background:var(--a)}.dot.b{background:var(--b)}
/* hero */
.hero{padding-top:16px;display:flex;flex-direction:column;gap:14px}
.seal{font-family:var(--brand);color:var(--seal);border:3px solid var(--seal);border-radius:50%;display:grid;place-items:center;text-align:center;line-height:1.05;transform:rotate(-8deg)}
.seal.mini{width:64px;height:64px;font-size:17px}
.steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--display);width:28px;height:28px;border-radius:50%;background:var(--sunk);display:grid;place-items:center;font-size:14px}
/* chat */
.chat{display:flex;flex-direction:column;gap:10px;min-height:240px}
.msg{max-width:86%;padding:10px 13px;border-radius:16px;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.msg.ai{background:var(--surface);border:1px solid var(--line);border-top-left-radius:4px;align-self:flex-start}
.msg.me{align-self:flex-end;color:#fff;border-top-right-radius:4px}
.msg.me.pa{background:var(--a)} .msg.me.pb{background:var(--b)}
.msg .att{display:block;font-size:12px;opacity:.85;margin-top:4px}
.typing{align-self:flex-start;color:var(--muted);font-size:14px;padding:6px 4px}
.typing::after{content:"";display:inline-block;width:1em;animation:dots 1.2s steps(4) infinite;text-align:left}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.qchips{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start}
.composer{position:sticky;bottom:0;background:var(--bg);padding-block:10px;display:flex;flex-direction:column;gap:8px}
.inbar{display:flex;gap:8px;align-items:flex-end}
.inbar textarea{min-height:46px;max-height:140px;flex:1;border-radius:22px;padding:11px 16px}
.icon{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:20px}
.icon.send{border:0;color:#fff}
.icon.send.pa{background:var(--a)}.icon.send.pb{background:var(--b)}
.files{display:flex;flex-wrap:wrap;gap:6px}
.files span{font-size:12px;background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:3px 8px}
.linkbtn{border:0;background:none;padding:0;color:var(--muted);text-decoration:underline;font-size:13px;align-self:center}
/* invite preview */
.preview{background:var(--sunk);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px}
.bubble{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.bubble .top{background:var(--ink);color:var(--surface);padding:16px;display:flex;gap:12px;align-items:center}
.bubble .top .seal{color:var(--surface);border-color:var(--surface);width:46px;height:46px;font-size:12px;flex:none}
.bubble .body{padding:12px 14px;font-size:14px}
.bubble .url{font-size:12px;color:var(--faint)}
/* status rows */
.status{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.status:last-child{border-bottom:0}
.pill{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
/* analyzing */
.anal{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.anal li{display:flex;gap:10px;align-items:center;color:var(--faint)}
.anal li.on{color:var(--ink);font-weight:700}
.anal li.done{color:var(--muted)}
.anal li::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid currentColor}
.anal li.done::before{background:currentColor}
/* card */
.tabs{display:flex;gap:6px;overflow-x:auto}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 20px 18px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.card .ctop{display:flex;justify-content:flex-start;align-items:baseline;gap:8px;font-size:12px;color:var(--muted);padding-right:72px}
.card .brand{font-family:var(--brand);font-size:16px;color:var(--ink)}
.card .ctitle{font-family:var(--display);font-size:26px;line-height:1.2;text-wrap:balance;padding-right:64px}
.ratio .names{display:flex;justify-content:space-between;font-weight:700;font-size:14px}
.ratio .nums{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-variant-numeric:tabular-nums}
.ratio .nums b{font-weight:400;font-size:56px;line-height:1}
.ratio .nums .na{color:var(--a)} .ratio .nums .nb{color:var(--b)}
.ratio .nums i{font-style:normal;font-size:30px;color:var(--faint)}
.bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--sunk);margin-top:8px}
.bar span:first-child{background:var(--a)} .bar span:last-child{background:var(--b)}
.ratio .cap{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;margin-top:8px}
.ratio .cap b{font-size:15px;color:var(--ink);font-weight:700}
.ratio .cap span{font-size:11px;color:var(--faint)}
.voice{font-size:16px;line-height:1.55;font-weight:500}
.recon{background:var(--seal-soft);border-radius:12px;padding:12px 14px;font-size:14px}
.recon b{display:block;font-size:12px;letter-spacing:.06em;color:var(--seal);margin-bottom:2px}
.card .stamp{position:absolute;top:14px;right:14px;width:62px;height:62px;font-size:15px}
.card .foot{font-size:11px;color:var(--faint);text-align:center}
.hold{font-family:var(--display);font-size:40px;color:var(--muted);text-align:center}
.cond{display:grid;gap:8px}
.cond div{border-radius:10px;padding:10px 12px;font-size:14px}
.cond .ca{background:var(--a-soft)} .cond .cb{background:var(--b-soft)}
/* detail */
.sec{display:flex;flex-direction:column;gap:8px}
.sec h3{margin:0;font-size:15px}
.sec ul{margin:0;padding-left:18px;display:grid;gap:4px}
.disp{display:grid;gap:6px;padding:10px 12px;background:var(--sunk);border-radius:10px;font-size:14px}
.disp .pt{font-weight:700}
.disp .side{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start}
.state{display:flex;flex-direction:column;gap:6px;font-size:14px;padding:12px;border-radius:12px;border:1px solid var(--line)}
.prec{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:4px;font-size:14px}
.prec .t{font-weight:700}
.badge{font-size:11px;font-weight:700;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:1px 6px;align-self:start;justify-self:start}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:12px;font-size:14px;max-width:90vw;z-index:9}
.err{color:var(--seal);font-size:14px}
.agreed{display:flex;align-items:center;gap:12px;background:var(--ok-soft);color:var(--ok);border-radius:12px;padding:12px 14px;font-weight:700}
.agreed .seal{color:var(--ok);border-color:var(--ok);width:52px;height:52px;font-size:13px;flex:none}
.safe a{color:inherit}
.vbar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--sunk)}
.vbar span:nth-child(1){background:var(--a)}.vbar span:nth-child(2){background:var(--faint)}.vbar span:nth-child(3){background:var(--b)}
.vlegend{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.vote3{display:grid;grid-template-columns:1fr .6fr 1fr;gap:6px;align-items:center}
.vote3 button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 6px;font-size:13px;line-height:1.3}
/* 가운데 "비슷해요"는 작고 흐리게: 가능하면 한쪽을 고르도록 */
.vote3 button:nth-child(2){font-size:12px;padding:7px 4px;color:var(--muted);border-style:dashed;align-self:center}
.vote3 button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.fitem{display:flex;flex-direction:column;gap:10px}
button.panel{font:inherit;color:inherit;width:100%}
@media (prefers-reduced-motion: reduce){.typing::after{animation:none;content:"..."}}

/* app chrome */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.top .brand{font-family:var(--brand);font-size:20px;color:var(--ink);text-decoration:none}
.top .acct{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}
.top .acct span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.top button{border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline;padding:4px}
.pin{letter-spacing:.5em;font-size:24px;text-align:center;font-variant-numeric:tabular-nums}
.modal{position:fixed;inset:0;background:rgba(10,12,20,.55);display:grid;place-items:center;padding:16px;z-index:20}
.modal .panel{max-width:420px;width:100%;max-height:90vh;overflow:auto}
.modal img{border-radius:12px;border:1px solid var(--line)}
.center{display:grid;place-items:center;min-height:40vh;color:var(--muted);text-align:center}
.linkbox{font-size:13px;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:10px 12px;word-break:break-all;user-select:all}
.hist{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.hist:last-child{border-bottom:0}
.btn.kakao{background:#FEE500;color:#191919;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.kakao svg{flex:none}

/* ---------- 로고 ---------- */
.top .brand{display:inline-flex;align-items:center;gap:8px}
.logo-mark{width:34px;height:23px;flex:none}
.hero .logo-big{display:flex;align-items:center;gap:12px}
.hero .logo-big .logo-mark{width:56px;height:37px}
.hero .logo-big b{font-family:var(--brand);font-weight:400;font-size:26px}

/* ---------- 넓은 화면: 리포트 / 홈 / 피드 ---------- */
.report,.r-side,.r-main,.r-grid,.home-l,.home-r,.feed-grid{display:flex;flex-direction:column;gap:16px}
.r-head{display:flex;flex-direction:column;gap:6px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.r-head h2{font-size:28px}
.r-head .lead{font-size:17px;font-weight:500}
.r-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.r-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.r-sec > h3{margin:0;font-size:13px;letter-spacing:.06em;color:var(--faint);font-weight:700}
.r-sec ul{margin:0;padding-left:18px;display:grid;gap:6px}
.stmts{display:flex;flex-direction:column;gap:12px}
.jury2{display:flex;flex-direction:column;gap:12px}
.hist-badge{font-size:11px;font-weight:700;color:var(--seal);display:block}
.danger{color:var(--seal)}
@media (min-width:960px){
  body{padding-inline:32px}
  .report{display:grid;grid-template-columns:400px minmax(0,1fr);gap:32px;align-items:start}
  .r-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .r-grid .span2{grid-column:1 / -1}
  .stmts{display:grid;grid-template-columns:1fr 1fr}
  .jury2{display:grid;grid-template-columns:1fr 1fr}
  .home{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
  .home .hero{padding-top:40px}
  .home .hero h1{font-size:56px}
  .feed-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
}
.vtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:-6px}
.vchip{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:3px 10px;font-size:12px;line-height:1.4}
.vchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* ---------- 기록 통계 ---------- */
.hstat{display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.hstat-top{display:flex;align-items:baseline;gap:8px}
.hstat-top b{font-family:var(--display);font-weight:400;font-size:34px;line-height:1}
.hstat-top .pill{margin-left:auto}
.hbar{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;background:var(--sunk)}
.hleg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.hleg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.s-ok{background:var(--ok)} .s-split{background:color-mix(in srgb,var(--seal) 60%,#fff)} .s-wait{background:var(--faint)}

/* ---------- 리포트 인포그래픽 ---------- */
.track{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:0}
.track li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:12px;color:var(--faint)}
.track li::before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.track li:first-child::before{display:none}
.track li.done::before,.track li.cur::before{background:var(--ink)}
.tdot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:var(--surface);position:relative;z-index:1}
.track li.done .tdot{background:var(--ink);border-color:var(--ink)}
.track li.cur .tdot{border-color:var(--ink)}
.track li.done,.track li.cur{color:var(--ink)}
.tl{text-align:center;word-break:keep-all}
.conf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.conf-k{font-size:12px;color:var(--faint);font-weight:700}
.gauge{display:inline-flex;gap:3px}
.gauge i{width:18px;height:8px;border-radius:3px;background:var(--line)}
.gauge i.on{background:var(--ink)}
.lean{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;font-size:12px;text-align:center;color:var(--faint)}
.lean span{padding:4px 6px;background:var(--surface);border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lean span.on{color:#fff;font-weight:700}
.lean span.on.a{background:var(--a)} .lean span.on.b{background:var(--b)} .lean span.on.n{background:var(--muted)}
.venn{width:100%;max-width:320px;height:auto;align-self:center}
.cmp{display:flex;flex-direction:column;gap:8px}
.cmp-row{display:grid;grid-template-columns:64px 1fr 52px;align-items:center;gap:8px;font-size:12px}
.cmp-k{color:var(--muted);font-weight:700}
.cmp-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.cmp .vbar{margin:0}

/* ---------- 관리자 ---------- */
.admin{display:flex;flex-direction:column;gap:16px}
.admin-link{color:var(--seal);font-weight:700;text-decoration:none;font-size:13px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.tile b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.tile span{font-size:13px;color:var(--muted)}
.tile em{font-style:normal;font-size:11px;color:var(--faint)}
.chart{width:100%;height:auto;max-height:220px}
.admin .row{flex-wrap:wrap}
.admin .row input[type=text]#q{flex:1 1 220px;min-width:0}
.tbl tr.grant .row label{flex:1 1 120px;min-width:0}
.tbl tr.grant .row label input{width:100%}
.tbl{min-width:560px}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-size:12px;color:var(--faint);font-weight:700;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr.grant td{background:var(--sunk)}
.tbl label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.btn.sm{padding:6px 10px;font-size:13px;width:auto}
input[type=number]{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
@media (min-width:960px){ .tiles{grid-template-columns:repeat(6,minmax(0,1fr))} }

/* ---------- 첫 화면 이름 풀이 ---------- */
.tagline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;background:var(--sunk);border-radius:12px;padding:12px 14px;align-self:flex-start}
.tagline b{font-family:var(--brand);font-weight:400;font-size:22px;line-height:1.2}
.tagline span{font-size:15px;color:var(--ink)}
.tagline em{font-style:normal;font-size:11px;font-weight:700;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:1px 8px;background:var(--surface)}
.about-link,.more-link{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;align-self:flex-start;border-bottom:1px solid currentColor;padding-bottom:1px}
.more-link{font-size:13px;color:var(--muted);margin-top:4px}
.top .me-link{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}

/* ---------- 로그인 고르기 ---------- */
.login-pick .btn{display:flex;align-items:center;justify-content:center;gap:8px}
.btn.google svg{flex:none}

/* ---------- 기록 한 줄: 상태별 색 ---------- */
.hist{align-items:flex-start;padding:12px 0}
.hdot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--faint)}
.hmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hmain b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist .pill{flex:none;margin-top:2px}
.todo{font-size:12px;color:var(--muted)}
.todo.mine{color:var(--wait-ink);font-weight:700}
.todo.mine::before{content:"● ";font-size:9px;vertical-align:1px}
.k-prog .hdot{background:var(--wait)}
.k-hold .hdot{background:var(--hold)}
.k-done .hdot{background:var(--ink)}
.k-both .hdot{background:var(--ok)}
.k-stop .hdot{background:var(--line)}
.pill.k-prog{background:var(--wait-soft);color:var(--wait-ink)}
.pill.k-hold{background:var(--hold-soft);color:var(--hold-ink)}
.k-hold .todo.mine{color:var(--hold-ink)}
.pill.k-done{background:var(--sunk);color:var(--ink)}
.pill.k-both{background:var(--ok-soft);color:var(--ok)}
.pill.k-stop{background:transparent;color:var(--faint);border:1px solid var(--line)}
.s-hold{background:var(--hold)}
.month{display:block;font-size:12px;font-weight:700;color:var(--faint);padding-top:12px;letter-spacing:.04em}

/* ---------- 마이페이지 ---------- */
.me{display:flex;flex-direction:column;gap:16px}
/* PC: 왼쪽 칸(내 정보·친구 초대·선물·바로가기), 오른쪽에 기록. 모바일은 화면에 적힌 순서대로 한 줄 */
@media (min-width:960px){
  .me{display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;gap:16px 32px;align-items:start}
  .me>*{grid-column:1}
  .me>.me-hist{grid-column:2;grid-row:1 / span 5}
}
.me-hist{scroll-margin-top:72px}
/* 접고 펴는 칸 */
.panel.fold{padding:0;gap:0}
.fold-h{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:0;padding:16px;cursor:pointer;text-align:left;color:inherit;font:inherit}
.fold-h .chev{width:8px;height:8px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .22s ease}
.fold.open .fold-h .chev{transform:rotate(-135deg);margin-top:4px}
.fold-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.fold.open .fold-b{grid-template-rows:1fr}
.fold-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:0 16px;visibility:hidden;transition:visibility 0s .22s}
.fold-in::after{content:"";height:4px;flex:none}
.fold.open .fold-in{visibility:visible;transition:visibility 0s}
.fold.shown .fold-in{overflow:visible}
@media (prefers-reduced-motion: reduce){.fold-b,.fold-h .chev{transition:none}}
/* 마이페이지 상태 칩: 칸처럼 둥근 모서리 사각, 조금 작게 */
.me .chips .chip{border-radius:8px;font-size:12px;padding:4px 9px}


/* ---------- 근거 캡처 ---------- */
.attach-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:-6px}
.btn.attach{cursor:pointer;flex:none}
.btn.attach.busy{opacity:.6;cursor:progress}

/* ---------- 판가름 보류 다음 단계 ---------- */
.hold-next{border-color:var(--ink);border-width:2px}
.hold-q{font-size:16px}
.hold-point{font-family:var(--display);font-size:22px;line-height:1.3}
.fork{display:grid;gap:12px}
.fork-opt{display:flex;flex-direction:column;gap:8px;background:var(--sunk);border-radius:12px;padding:14px}
.fork-opt textarea{background:var(--surface)}
.resolved{font-size:12px;font-weight:700;color:var(--muted);background:var(--sunk);border-radius:8px;padding:4px 10px;align-self:flex-start}
.r2qa{margin-top:4px;padding-top:8px;border-top:1px dashed var(--line)}

/* ---------- 서비스 소개 ---------- */
.about{display:flex;flex-direction:column;gap:40px;max-width:960px;margin:0 auto;width:100%}
.ab-hero{display:flex;flex-direction:column;gap:14px;padding-top:24px}
.ab-hero h1{font-size:36px}
.ab-hero .lead{font-size:17px;max-width:40em}
.ab-cta{max-width:460px}
.ab-cta .btn{color:inherit;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center}
.ab-sec{display:flex;flex-direction:column;gap:14px}
.ab-ex{display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:600px){.ab-ex{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ab-chip{background:var(--sunk);border-radius:10px;padding:10px 12px;display:flex;align-items:baseline;gap:8px;cursor:default}
.ab-chip b{font-size:14px;font-weight:500}
.ab-chip b::before{content:"“";color:var(--faint)} .ab-chip b::after{content:"”";color:var(--faint)}
.ab-chip .small{flex:none;font-size:11px;font-weight:700;color:var(--faint)}
.ab-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ab-step{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.ab-ill svg{width:120px;height:64px;display:block}
.ab-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--surface);font-size:12px;font-weight:700;margin-right:8px}
.ab-two{display:grid;gap:24px}
.ab-rules{margin:0;padding-left:18px;display:grid;gap:8px}
.ab-card{display:flex;flex-direction:column;gap:8px}
.card.mini{max-width:360px}
.card.mini .ctop{padding-right:0}
.card.mini .ctitle{padding-right:0;font-size:22px}
.card.mini .ratio .nums b{font-size:44px}
.ab-faq{display:grid;gap:8px}
.ab-faq details{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ab-faq summary{font-weight:700;cursor:pointer}
.ab-faq details p{margin-top:8px;font-size:14px}
.ab-end{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;background:var(--sunk);border-radius:20px;padding:28px 20px}
.ab-end .btn{max-width:360px}
@media (min-width:960px){
  .ab-hero h1{font-size:52px}
  .ab-ex{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-steps{grid-template-columns:1fr 1fr}
  .ab-two{grid-template-columns:1.1fr 1fr;align-items:start}
  .fork{grid-template-columns:1fr}
}
.ab-cta .btn.primary{color:var(--surface)}

/* ---------- 회원가입 ---------- */
.join{display:flex;flex-direction:column;gap:14px;max-width:520px;margin:0 auto;width:100%;padding-top:8px}
.agree{gap:10px}
.chk{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--ink);flex:none;margin:0}
.chk span{flex:1}
.chk em{font-style:normal;font-size:11px;font-weight:700;color:var(--seal);margin-right:4px}
.chk a{font-size:12px;color:var(--muted)}
.chk.all{padding-bottom:10px;border-bottom:1px solid var(--line);font-size:15px}
.tbl.mini{min-width:0;font-size:12px}
.tbl.mini th,.tbl.mini td{padding:6px 8px;white-space:normal}

/* ---------- 약관 문서 ---------- */
.doc{display:flex;flex-direction:column;gap:18px;max-width:720px;margin:0 auto;width:100%;padding-top:8px}
.doc h3{margin:0 0 6px;font-size:15px}
.doc p{font-size:14px;color:var(--ink);margin:0 0 6px}
.doc .tbl{margin:6px 0}
.doc a{color:var(--ink)}

/* ---------- 푸터 ---------- */
.foot{margin-top:56px;border-top:1px solid var(--line);padding:24px 0 8px}
.foot-in{display:flex;flex-direction:column;gap:12px}
.foot-brand{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.foot-brand .logo-mark{width:26px;height:17px}
.foot-brand b{font-family:var(--brand);font-weight:400;font-size:17px}
.foot-brand span{font-size:13px;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--ink);text-decoration:underline}
.foot-links b{font-weight:700;color:var(--ink)}
.foot-meta{font-size:12px;color:var(--faint);line-height:1.7}
@media (min-width:960px){ .foot-in{display:grid;grid-template-columns:1fr auto;align-items:center} .foot-meta{grid-column:1 / -1} }

/* ---------- 언어 ---------- */
.lang-btn{border:1px solid var(--line)!important;border-radius:999px;padding:2px 10px!important;text-decoration:none!important;font-size:12px!important;font-weight:700;color:var(--ink)!important}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg2 button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 8px;font-size:14px}
.seg2 button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:700}
.tr-tag{font-size:10px;font-weight:700;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:0 6px;margin-left:6px}
.fork-opt .pill{margin-left:4px;vertical-align:1px}
/* ---------- 선물 ---------- */
.gift .row input[type=number]{max-width:100px}
.gift-hero{align-items:flex-start}
.gift-box{font-size:48px;line-height:1}

/* ---------- 공유 짝 버튼 ---------- */
.share2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.share2 .btn{width:100%}
.share2 .btn.ghost{padding-inline:18px;white-space:nowrap}
.share2 .btn.kakao span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .about-link{margin-bottom:12px}
@media (max-width:959px){ .home-l{padding-bottom:12px} }

/* ---------- 이슈 이름 ---------- */
.topic-box input{font-size:16px;font-weight:700}
.topic-view{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--sunk);border-radius:12px;padding:10px 14px}
.topic-view b{font-size:16px}
.topic-chip{font-weight:700;border-color:var(--ink)}

/* ---------- 마이페이지: 내 차례 거르개 ---------- */
.mine-toggle{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--sunk)}
.mine-toggle input{width:18px;height:18px;accent-color:var(--wait);margin:0}
.mine-toggle b{font-size:12px;min-width:20px;text-align:center;border-radius:999px;padding:0 6px;background:var(--surface);color:var(--muted)}
.mine-toggle.has b{background:var(--wait-soft);color:var(--wait-ink)}

details.lang-pick summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px}
details.lang-pick summary::-webkit-details-marker{display:none}
details.lang-pick summary::after{content:"▾";margin-left:auto;color:var(--faint)}
details.lang-pick[open] summary::after{content:"▴"}
details.lang-pick[open] summary{margin-bottom:12px}
details.lang-pick{gap:0}
details.lang-pick .seg2{margin-bottom:10px}

/* ---------- 기록 관리 ---------- */
.manage{display:flex;justify-content:center;margin-top:8px}
.manage .linkbtn{font-size:12px;color:var(--faint)}
.manage-panel{width:100%;max-width:720px;margin:8px auto 0}
.manage-panel .status{gap:12px}
.manage-panel .status .btn{flex:none}
.del-note{border:1px solid var(--seal);color:var(--ink)}
.del-note .linkbtn{color:var(--seal);font-weight:700;font-size:13px}

/* ---------- 판가름 더 받기 ---------- */
.fun-get{border-width:2px;border-color:var(--ink)}
.buy-small{display:flex;flex-direction:column;gap:6px}
.buy-row{display:flex;gap:8px;flex-wrap:wrap}
.buy-chip{display:flex;align-items:baseline;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--muted)}
.buy-chip b{color:var(--ink);font-weight:700}
.buy-chip em,.buy-modal .promo{font-style:normal;font-size:10px;font-weight:700;color:var(--seal);background:var(--seal-soft);border-radius:999px;padding:1px 6px}
.buy-title{font-size:18px}

details.buy-small summary{cursor:pointer;list-style:none;align-self:flex-start}
details.buy-small summary::-webkit-details-marker{display:none}
details.buy-small summary::after{content:" ▾";color:var(--faint)}
details.buy-small[open] summary::after{content:" ▴"}
details.buy-small[open] .buy-row{margin-top:8px}
.admin-links{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;margin-top:4px}
.admin-links a{color:var(--a);text-decoration:none;font-weight:700}

/* 관리자: 주제별·관계별 누적 */
.tally-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .tally-wrap { grid-template-columns: 1fr; } }
.tally h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.t-row { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.t-row i { display: block; height: 10px; background: var(--line); border-radius: 4px; overflow: hidden; }
.t-row i b { display: block; height: 100%; background: var(--a); border-radius: 4px; }
.t-row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

/* 관리자: 이탈 단계 · 공정성 점검 */
.funnel .f-row { grid-template-columns: 110px 1fr 36px 92px; }
.funnel .f-row small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.funnel .f-row.worst span, .funnel .f-row.worst small { color: var(--b); font-weight: 600; }
.fair { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--line); }
.fair.ok { background: #e3f4ea; color: #1d7a45; }
.fair.warn { background: #fff1d6; color: #9a6200; }
.fair.bad { background: #fde4e1; color: #b3261e; }
#fairBox { margin-bottom: 10px; overflow-x: auto; }
@media (max-width: 640px) { .funnel .f-row { grid-template-columns: 84px 1fr 30px 70px; } }
@media (prefers-color-scheme: dark) {
  .fair.ok { background: #16352a; color: #7fd6a3; }
  .fair.warn { background: #3a2c10; color: #f2c46b; }
  .fair.bad { background: #3d1a18; color: #ff9b91; }
}

/* 오늘 무료 판가름 + 동그라미 ? 말풍선 */
.quota-row{display:flex;align-items:center;gap:6px;align-self:flex-start;position:relative}
.tipwrap{display:inline-flex}
.tipq{width:20px;height:20px;border-radius:50%;border:1px solid var(--faint);background:transparent;color:var(--muted);font-size:12px;font-weight:700;line-height:1;padding:0;display:grid;place-items:center;cursor:pointer}
.tipq:hover,.tipwrap.open .tipq{border-color:var(--ink);color:var(--ink)}
.tipbub{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:6;width:min(300px,calc(100vw - 32px));background:var(--ink);color:var(--surface);font-size:13px;line-height:1.55;padding:10px 12px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.tipwrap.open .tipbub{display:block}
@media (hover:hover){.tipwrap:hover .tipbub{display:block}}

/* 내 판가름 기록 검색 */
.hsearch{display:flex;align-items:center;gap:10px}
.hsearch input{flex:1;min-width:0}

/* 회원 탈퇴 */
.linkbtn.quit{color:var(--faint);font-size:12px;align-self:flex-start}
.quit-box ul{margin:4px 0 8px;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.btn.danger{background:#C4372B;color:#fff}
.hsearch input{padding-left:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
.status.quota-row{align-self:stretch}
.tip-l{display:inline-flex;align-items:center;gap:6px}

/* 공지 */
.nstrip{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--sunk);border-radius:12px;padding:4px 4px 4px 12px}
.nstrip a{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-size:14px;padding:6px 0}
.nstrip a b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nbadge{flex:none;font-size:11px;font-weight:700;color:#fff;background:var(--b);border-radius:6px;padding:2px 6px}
.nclose{flex:none;border:0;background:none;color:var(--faint);width:32px;height:32px;border-radius:8px;font-size:13px;cursor:pointer}
.nclose:hover{background:var(--line);color:var(--ink)}
.ndot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--b);margin-left:4px;vertical-align:super}
.panel.notice>b{font-size:17px}
.panel.notice p{margin:0;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.panel.notice.new{border-color:var(--b)}
.nnew{color:var(--b);font-weight:700}
.npop b{font-size:18px}
.npop p{margin:0;line-height:1.7;max-height:50vh;overflow:auto;overflow-wrap:anywhere}
.nform{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.nform .nopts{align-items:center;gap:16px;flex-wrap:wrap}
.nform input[type=date]{font:inherit;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--surface);color:var(--ink)}
.nact{white-space:nowrap}
.nact .linkbtn{margin-right:8px}

/* 약속 화면: 가장 중요한 안내 */
.promise-key{display:flex;gap:12px;align-items:flex-start;background:var(--a-soft);border:2px solid var(--a);border-radius:var(--r);padding:14px 16px}
.promise-key .pk-ico{font-size:26px;line-height:1}
.promise-key div{display:flex;flex-direction:column;gap:4px}
.promise-key b{font-size:16px;line-height:1.5;color:var(--ink)}
.promise-key em{font-style:normal;color:var(--a);white-space:nowrap}
.promise-key span{font-size:13px;color:var(--muted)}

/* 카드 이미지에만 붙는 가리사니 정보 */
.card .csign{display:none;align-items:center;justify-content:center;gap:8px;border-top:1px dashed var(--line);margin-top:10px;padding-top:10px;font-size:12px;color:var(--muted)}
.card .csign b{font-family:var(--brand);font-weight:400;font-size:14px;color:var(--ink)}
.card .csign em{font-style:normal;color:var(--a);font-weight:700}

/* 리포트 인쇄 */
.r-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.print-btn{font-size:13px}
.print-only{display:none}
@media print{
  @page{margin:14mm}
  :root{--bg:#fff;--surface:#fff}
  html,body{background:#fff !important;padding:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:none !important}
  .top,#foot,.foot,#nstrip,#toast,#modal,.no-print,.print-btn,.report .btn,.report .row,.report .chips,.report .vtabs,.report .share2,.report .linkbtn{display:none !important}
  .print-only{display:block !important}
  .report{display:block !important}
  .report .r-side,.report .r-main{display:block !important;width:auto !important;position:static !important}
  .report .card{max-width:420px;margin:0 auto 18px;break-inside:avoid}
  .report .r-grid{display:block !important}
  .report .r-sec,.report .panel{break-inside:avoid;margin-bottom:12px;border:1px solid #ddd}
  .report h2{font-size:22px}
  .print-foot{text-align:center;font-size:11px;color:#777;margin-top:16px;border-top:1px solid #ddd;padding-top:8px}
}

/* 민감정보 안내 */
.safe-note{display:flex;gap:10px;align-items:flex-start;background:var(--wait-soft);border:1px solid #f1d9a6;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.6;color:var(--ink)}
.safe-note b{font-weight:700}

/* 혼자 먼저 가려보기 */
.solo-link{align-self:center;font-size:13px;color:var(--muted);margin-top:4px}
.panel.solo{border-style:dashed;border-color:var(--a)}
.panel.solo.done{border-style:solid;background:var(--surface)}
.solo-title{font-size:17px}
.solo-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.solo-warn{margin:0;font-size:13px;color:var(--hold-ink);background:var(--hold-soft);border-radius:8px;padding:8px 10px}
.solo-sec{display:flex;flex-direction:column;gap:4px}
.solo-sec b{font-size:14px}
.solo-sec p,.solo-sec ul{margin:0;line-height:1.65}
.solo-sec ul{padding-left:18px}
.solo-cta{display:flex;flex-direction:column;gap:4px;background:var(--a-soft);border-radius:10px;padding:10px 12px}
.solo-cta b{color:var(--a)}
.solo-cta span{font-size:13px;color:var(--muted)}
.solo-recap summary{cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px}
.solo-recap[open] summary{margin-bottom:10px}
/* 혼자 먼저 가려보기 모드 표시 (입장 쓰는 화면) */
.solo-mode{display:flex;flex-direction:column;gap:4px;border:2px dashed var(--a);background:var(--a-soft);border-radius:var(--r);padding:12px 14px}
.solo-mode .sm-tag{align-self:flex-start;font-size:12px;font-weight:700;color:#fff;background:var(--a);border-radius:999px;padding:3px 10px}
.solo-mode b{font-size:15px;color:var(--ink)}
.solo-mode span:last-child{font-size:13px;color:var(--muted);line-height:1.6}
/* 혼자 가려보기: 실제 판가름 통계 */
.solo-stats{background:var(--sunk);border-radius:10px;padding:10px 12px}
.sbar{display:flex;height:10px;border-radius:6px;overflow:hidden;gap:2px;background:var(--line);margin:4px 0}
.sbar span.a{background:var(--a)} .sbar span.e{background:var(--faint)} .sbar span.b{background:var(--b)}
.slegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}
.slegend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.slegend i.a{background:var(--a)} .slegend i.e{background:var(--faint)} .slegend i.b{background:var(--b)}
.solo-unlock{font-size:13px;color:var(--ink)!important;line-height:1.6}
.solo-unlock em{font-style:normal;font-weight:700;color:var(--a)}
/* 이슈 이름: 문장 속 입력칸 (제출 버튼 위) */
.topic-line p{margin:0;line-height:2.1;font-size:15px}
.topic-line .tl-row{display:inline-flex;align-items:center;gap:4px;max-width:100%}
.topic-line .tl-row input{width:auto;min-width:0;flex:1 1 220px;max-width:260px;font-weight:700;padding:6px 10px}
@media (max-width:480px){.topic-line .tl-row{display:flex;width:100%}.topic-line .tl-row input{max-width:none}}
.submit-note{margin:0;font-size:13px;color:var(--muted);text-align:center}
/* 푸터 회사 정보 (눌러서 펼치기) */
.foot-meta{display:flex;flex-direction:column;gap:2px}
.foot-co summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;width:fit-content}
.foot-co summary::-webkit-details-marker{display:none}
.foot-co summary::after{content:"▾";font-size:10px;transition:transform .2s}
.foot-co[open] summary::after{transform:rotate(180deg)}
.foot-co div{padding:4px 0 6px;line-height:1.7}
.foot-co a{color:inherit}

/* 첫 화면: 진행 방식 그림 3칸 */
.how-steps{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:hs}
.how-steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 4px;border-radius:12px;background:var(--sunk)}
.how-steps li::before{counter-increment:hs;content:counter(hs);position:absolute;top:6px;left:8px;font-size:11px;font-weight:700;color:var(--faint)}
.how-steps li:not(:last-child)::after{content:"›";position:absolute;right:-8px;top:34px;font-size:18px;color:var(--faint);z-index:1}
.how-steps .hw-pic{width:52px;height:52px;display:block}
.how-steps .hw-pic svg{width:100%;height:100%}
.how-steps b{font-size:14px}
.how-steps span:last-child{font-size:12px;color:var(--muted);line-height:1.4;word-break:keep-all}
.how-foot{text-align:center}

/* 첫 화면: 사람들 생각은? 카드 */
.feed-card{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;flex-direction:row}
.feed-card .fc-pic{flex:none;width:52px;height:52px}
.feed-card .fc-pic svg{width:100%;height:100%}
.feed-card .fc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.feed-card .fc-go{flex:none;font-size:20px;color:var(--faint)}
.feed-card:hover .fc-go{color:var(--ink)}

/* 처음 방문 소개 */
.panel.intro{gap:14px}
.panel.intro h3{margin:0;font-family:var(--display);font-weight:400;font-size:24px}
.intro-row{display:flex;align-items:center;gap:14px}
.intro-pic{flex:none;width:56px;height:56px;border-radius:14px;background:var(--sunk);display:grid;place-items:center}
.intro-pic svg{width:44px;height:44px}
.intro-emoji{font-size:17px;letter-spacing:-2px}
.intro-row div{display:flex;flex-direction:column;gap:2px}
.intro-row b{font-size:15px}
.intro-row span{font-size:13px;color:var(--muted);line-height:1.5}
.intro-off{align-self:center;font-size:13px;color:var(--faint)}
/* 공지 목록 (접기·펼치기) */
.notice-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.notice-item+.notice-item{border-top:1px solid var(--line)}
.notice-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px}
.notice-item summary::-webkit-details-marker{display:none}
.notice-item summary b{flex:1;min-width:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-item[open] summary b{white-space:normal}
.ni-date{flex:none;font-size:12px;color:var(--faint);min-width:52px}
.ni-chev{flex:none;width:7px;height:7px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);margin:-3px 4px 0 0;transition:transform .2s}
.notice-item[open] .ni-chev{transform:rotate(-135deg);margin-top:3px}
.notice-item.new summary b{color:var(--ink)}
.ni-body{padding:0 16px 16px 78px;line-height:1.7;overflow-wrap:anywhere}
@media (max-width:480px){.ni-body{padding-left:16px}}
.notice-list+.more-btn{margin-top:12px}
/* 홈 화면에 추가 안내 */
.a2hs{display:flex;flex-direction:column;gap:12px}
.a2hs-icon{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink)}
.a2hs-icon img{border-radius:14px;box-shadow:0 2px 10px rgba(25,28,46,.14)}
.a2hs-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.55;color:var(--ink)}
.a2hs-steps b{font-weight:700}
.ai-cmp{color:var(--ink)}
.ai-cmp b{font-weight:800}
.feed-grid+.more-btn{margin-top:4px}

/* 말풍선 친구들 (파랑이·주황이) */
.mascot{display:block;line-height:0;pointer-events:none}
.mascot svg{width:100%;height:auto;display:block}
.m-hero{width:min(230px,62%);margin:4px 0 -4px -6px}
.m-sm{width:150px;align-self:center;margin:2px auto 0}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px 0}
.panel.empty{align-items:center;text-align:center}
.intro .m-sm{margin-bottom:-4px}