@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;src:url(/fonts/Pretendard-Regular.subset.woff2) format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-display:swap;src:url(/fonts/Pretendard-SemiBold.subset.woff2) format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;src:url(/fonts/Pretendard-Bold.subset.woff2) format("woff2")}

/* 색상 토큰: 무채색 바탕 + 금빛 한 가지 강조색 (clippie.kr 메인과 동일 계열) */
:root{
  --bg:#f3f4f6;--surface:#ffffff;--sunken:#f7f7f8;--line:#e4e4e7;--line-strong:#d4d4d8;
  --text:#18181b;--text-2:#3f3f46;--muted:#71717a;
  --accent:#8a6a2f;--accent-hover:#6f5424;--accent-soft:#fdf8ee;--accent-line:#e2c186;--on-accent:#ffffff;
  --ok:#15803d;--ok-soft:#ecfdf3;--warn:#c2410c;--warn-soft:#fff1e9;--err:#b91c1c;--err-soft:#fef2f2;
  /* 금색은 강조색과 같은 한 벌만 쓴다 */
  --gold:#8a6a2f;--gold-soft:#fdf8ee;--gold-line:#e2c186;
  --r-sm:8px;--r:10px;--r-lg:16px;
  --shadow:0 1px 2px rgba(24,24,27,.04),0 4px 16px rgba(24,24,27,.04);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f0f11;--surface:#18181b;--sunken:#1f1f23;--line:#2a2a2f;--line-strong:#3a3a40;
  --text:#f4f4f5;--text-2:#d4d4d8;--muted:#a1a1aa;
  --accent:#e2b476;--accent-hover:#efc994;--accent-soft:#2a2014;--accent-line:#6f5730;--on-accent:#171208;
  --ok:#4ade80;--ok-soft:#10261a;--warn:#fb923c;--warn-soft:#2a1a10;--err:#f87171;--err-soft:#2c1414;
  --gold:#e2b476;--gold-soft:#2a2014;--gold-line:#6f5730;
  --shadow:none;color-scheme:dark;
}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 "Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all}
h1,h2,h3{margin:0;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent)}
em{font-style:normal;color:var(--accent);font-weight:600}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* 폼 요소 */
label{display:grid;gap:6px;font-weight:600;font-size:13px;color:var(--text-2)}
input,select,textarea,button{font:inherit;color:var(--text)}
input,select,textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r);padding:9px 12px;background:var(--surface);font-weight:400;font-size:14px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:120px;resize:vertical}
button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-strong);border-radius:var(--r);padding:9px 14px;background:var(--surface);cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s}
button:hover{border-color:var(--muted)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.6;cursor:progress}
button:focus-visible,.nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.ghost{background:transparent;border-color:transparent}
.ghost:hover{background:var(--sunken);border-color:var(--line)}
.icon-btn{padding:8px}
.wide{width:100%}
.message{padding:9px 12px;border-radius:var(--r);background:var(--warn-soft);color:var(--warn);font-size:13px}
.hint{font-size:12px;color:var(--muted)}
.rule{font-size:12px;color:var(--accent);background:var(--accent-soft);padding:7px 10px;border-radius:var(--r-sm)}
.error{color:var(--err)}
.brand{display:flex;align-items:baseline;gap:8px;font-size:15px;letter-spacing:.14em;color:var(--accent);font-weight:700;white-space:nowrap}
.brand span{letter-spacing:0;color:var(--text);font-weight:600;font-size:14px}

/* 로그인 화면 */
.auth-screen{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)}
.auth-screen.single{grid-template-columns:1fr;place-items:center;padding:24px}
.auth-brand{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:48px clamp(32px,6vw,96px);background:var(--surface);border-right:1px solid var(--line)}
.auth-brand h1{font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.auth-brand>p{color:var(--muted)}
.auth-flow{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:420px}
.auth-flow li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);font-weight:600}
.auth-flow b{width:26px;height:26px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);font-size:13px}
.auth-panel{display:flex;flex-direction:column;justify-content:center;gap:16px;width:100%;max-width:420px;margin:auto;padding:40px 28px}
.auth-screen.single .auth-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.auth-panel h1{font-size:22px}
.auth-panel form,#resetForm{display:grid;gap:14px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r)}
.tabs button{border:0;background:transparent;color:var(--muted);padding:8px}
.tabs .selected{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.auth-help{font-size:13px;text-align:center}

/* 앱 셸: 화면 높이에 고정, 스크롤은 각 패널 안에서만 */
.shell{height:100dvh;display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);overflow:hidden}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:20px;padding:0 16px 0 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-end{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.flow{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;gap:4px}
.flow li{display:flex;align-items:center;gap:4px}
.flow li+li::before{content:"";width:18px;height:1px;background:var(--line-strong)}
.flow span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.flow i{font-style:normal;width:20px;height:20px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line-strong);font-size:11px}
.flow span.on{color:var(--text)}
.flow span.on i{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.flow span.on:not(:has(~ .on)){background:var(--accent-soft);color:var(--accent)}
.flow li:has(span.on)+li:has(span.on)::before{background:var(--accent-line)}
#cl-sprite{display:none!important}
.brand .mark{width:24px;height:24px;border-radius:6px;vertical-align:-5px;margin-right:7px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;background:var(--sunken);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor}
.badge.on{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.badge.off{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.account{display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid var(--line);color:var(--muted);min-width:0}
.account div{display:grid;line-height:1.25;min-width:0}
.account b{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account small{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}

.rail{display:flex;flex-direction:column;gap:3px;padding:13px 10px 11px;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto}
.rail-label{display:block;padding:12px 8px 4px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.rail-spacer{flex:1 0 12px}
.nav{flex-direction:row;justify-content:flex-start;gap:9px;padding:9px 10px;border:0;border-radius:var(--r);background:transparent;color:var(--muted);font-size:11.5px;font-weight:650;text-align:left;white-space:nowrap}
.nav .ic{width:18px;height:18px;flex:0 0 auto}
.nav:hover{background:var(--sunken);color:var(--text)}
.nav.on{background:var(--accent-soft);color:var(--accent)}

.stage{min-height:0;padding:14px;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.view{flex:1 1 0;display:grid;gap:14px;min-height:0}
.view-write{grid-template-columns:300px minmax(0,1fr) minmax(320px,380px)}
.view-setup{grid-template-columns:repeat(3,minmax(0,1fr))}
.view-admin{grid-template-rows:auto minmax(0,1fr)}
.view-deepdive{grid-template-rows:minmax(0,1fr)}
.dd-frame{display:block;width:100%;height:100%;min-height:0;border:1px solid var(--line);border-radius:14px;background:#060a15}
.view-studio-tool{padding:0!important;overflow:hidden!important;background:#0b0d12}
.studio-tool-frame{display:block;width:100%;height:100%;min-height:0;border:0;background:#0b0d12}

.panel{display:flex;flex-direction:column;min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.panel-head h2{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.panel-head h2 .ic{color:var(--accent)}
.panel-body{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.step-no{font-style:normal;width:22px;height:22px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font-size:12px}
.panel-body::-webkit-scrollbar,.result-body::-webkit-scrollbar,.kw-wrap::-webkit-scrollbar{width:10px;height:10px}
.panel-body::-webkit-scrollbar-thumb,.kw-wrap::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px;border:3px solid var(--surface)}

/* 1단계 */
.levels{border:0;padding:0;margin:0;display:grid;gap:6px}
.levels legend{font-weight:600;font-size:13px;color:var(--text-2);margin-bottom:6px;padding:0}
.levels label{display:block;cursor:pointer}
.levels input{position:absolute;opacity:0;pointer-events:none;width:auto}
.levels span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r);transition:border-color .15s,background .15s}
.levels b{font-size:14px;color:var(--text)}
.levels small{font-weight:400;color:var(--muted);font-size:12px}
.levels label:hover span{border-color:var(--muted)}
.levels input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.levels input:checked+span b{color:var(--accent)}
.levels input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.check{display:flex;align-items:flex-start;gap:8px;font-weight:600;cursor:pointer}
.check input{width:16px;height:16px;margin:2px 0 0;padding:0;accent-color:var(--accent);flex:0 0 auto}
.check span{display:grid;gap:2px}
.check small{font-weight:400;color:var(--muted);font-size:12px}
#keywordButton{margin-top:auto}

/* 결과 */
.results .panel-head{align-items:baseline}
.kw-summary{flex:1 1 260px;font-size:12px;color:var(--muted)}
.result-body{flex:1;min-height:0;display:flex;flex-direction:column}
.kw-wrap{flex:1;min-height:0;overflow:auto}
.kw-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:600px}
.kw-table th{position:sticky;top:0;z-index:1;text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:9px 12px;background:var(--sunken);border-bottom:1px solid var(--line)}
.kw-table td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.kw-table td:nth-child(n+2):nth-child(-n+5),.kw-table th:nth-child(n+2):nth-child(-n+5){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kw-table td:last-child{text-align:right;width:1%}
.kw-table tbody tr:hover td{background:var(--sunken)}
.kw-table tr.muted td{color:var(--muted)}
.kw-table tr.chosen td{background:var(--accent-soft)}
.kw-table tr.chosen .pick{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.kw-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.kw-badges .tag{font-size:11px;padding:1px 7px}
.kw-empty{color:var(--warn);background:var(--warn-soft);white-space:normal}
.kw-table td.kw-sub,.kw-table td.kw-empty{text-align:left}
.kw-sub{font-size:12px;color:var(--muted);font-weight:600;background:var(--sunken)}
.kw-broad{display:block;font-size:11px;color:var(--muted);font-weight:400}
.pick{padding:5px 12px;font-size:12px}
.kw-note{flex:0 0 auto;font-size:11px;color:var(--muted);padding:9px 16px;border-top:1px solid var(--line);background:var(--sunken)}

.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px;text-align:center;color:var(--muted)}
.empty .ic{width:36px;height:36px;padding:8px;box-sizing:content-box;border-radius:var(--r-lg);background:var(--sunken);color:var(--accent);stroke-width:1.5;margin-bottom:4px}
.empty b{color:var(--text);font-size:14px}
.empty p{max-width:340px;font-size:13px}
.empty.compact{padding:24px 8px}

.skeleton-table{flex:1;display:grid;align-content:start;gap:1px;padding:0}
.skeleton-table i,.skeleton{display:block;height:44px;background:linear-gradient(90deg,var(--sunken) 0%,var(--line) 40%,var(--sunken) 80%);background-size:300% 100%;animation:shimmer 1.4s ease-in-out infinite}
.skeleton-table i:first-child{height:36px;opacity:.6}
.skeleton{height:64px;border-radius:var(--r)}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* 2단계 */
.picked{padding:12px 14px;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--accent-soft);display:grid;gap:4px}
.picked b{color:var(--text);font-size:14px}
.picked span,.picked small{font-size:12px;color:var(--muted)}
.picked input{margin-top:4px;background:var(--surface)}
.step-block{display:flex;flex-direction:column;gap:10px}
.step-block #titleButton{width:100%}
.title-intent{font-size:13px;color:var(--text-2);background:var(--sunken);padding:9px 12px;border-radius:var(--r)}
.title-list{display:grid;gap:8px}
.title-list:empty{display:none}
.title-option{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;font-weight:400;transition:border-color .15s,background .15s}
.title-option:hover{border-color:var(--muted)}
.title-option input{margin-top:3px;width:16px;height:16px;padding:0;accent-color:var(--accent);flex:0 0 auto}
.title-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.title-body{display:grid;gap:3px;min-width:0}
.title-body b{font-size:14px;color:var(--text);overflow-wrap:anywhere;font-weight:600}
.title-body small{color:var(--muted);font-size:12px}
.title-top{display:flex;gap:8px;align-items:center}
.title-top .tag{font-size:11px;padding:1px 8px}
#titleEdit{width:100%}

/* 태그 · 목록 */
.tag{flex:0 0 auto;display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--sunken);color:var(--text-2);border:1px solid var(--line)}
.tag.ready,.tag.published{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.tag.failed{background:var(--err-soft);color:var(--err);border-color:transparent}
.tag.running,.tag.publishing,.tag.queued{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.saved{display:flex;flex-wrap:wrap;gap:6px}
.saved span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--sunken);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--text-2)}
.saved .online{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.saved .error{background:var(--err-soft);color:var(--err);border-color:transparent}
.recheck,.userToggle{padding:3px 9px;font-size:12px;border-radius:var(--r-sm)}

/* 연결 설정 */
#credentialForm,#jobForm{display:grid;gap:12px}
.api-help{padding:12px 14px;border-radius:var(--r);background:var(--sunken);border:1px solid var(--line);color:var(--text-2);font-size:13px;display:grid;gap:10px}
.api-help-lead{margin:0}
.api-link-row{margin:0}
.api-link{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-strong);color:var(--accent);text-decoration:none;font-weight:600;font-size:13px}
.api-link:hover{border-color:var(--accent)}
.api-link .ic{width:15px;height:15px}
.api-steps{margin:0;padding-left:18px;line-height:1.7}
.api-steps b{color:var(--text)}
.guide{margin:0;padding-left:18px;color:var(--text-2);line-height:1.8}
code{padding:2px 6px;background:var(--sunken);border-radius:6px}
#keyBox{padding:12px;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--accent-soft);display:grid;gap:8px}
#pairingKey{display:block;padding:10px;background:var(--text);color:var(--surface);border-radius:var(--r-sm);overflow-wrap:anywhere}
.jobs{display:grid;gap:8px}
.jobs>p{color:var(--muted);font-size:13px}
.job{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:6px}
.job>div{display:flex;justify-content:space-between;gap:12px}
.job small{color:var(--muted)}
.job p{white-space:pre-wrap;font-size:13px}
.job pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px;background:var(--sunken);padding:12px;border-radius:var(--r-sm);max-height:40vh;overflow:auto}
.job summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:13px}

/* 관리자 */
.admin{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:14px;height:100%;min-height:0}
.admin-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.tile{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tile b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.tile small{color:var(--muted);font-size:11px}
.admin-cols{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.2fr) minmax(0,1.1fr);gap:14px;min-height:0}
.admin-rows{display:grid;gap:6px}
.admin-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.admin-row>div{flex:1;min-width:0}
.admin-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.admin-row p{margin:4px 0 0;font-size:12px;overflow-wrap:anywhere;color:var(--text-2)}

/* 좁은 화면: 고정 높이를 풀고 세로로 쌓는다 */
@media (max-width:1280px){
  .flow span{padding-right:6px}
  .account div{display:none}
  .view-write{grid-template-columns:280px minmax(0,1fr) 320px}
  .admin-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:1100px){.flow li span{font-size:0;gap:0;padding:3px}.flow i{font-size:11px}.flow span.on:not(:has(~ .on)){font-size:12px;gap:6px;padding:4px 10px 4px 4px}}
@media (max-width:1023px){
  .shell{height:auto;min-height:100dvh;overflow:visible;grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
  .topbar{position:sticky;top:0;z-index:5;flex-wrap:wrap;gap:10px;padding:10px 14px}
  .flow{order:3;width:100%;justify-content:space-between;margin:0}
  .flow li+li::before{width:8px}
  .rail{flex-direction:row;padding:6px 10px;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:0}
  .rail-label,.rail-spacer{display:none}
  .rail{overflow-x:auto;overflow-y:hidden}
  .nav{flex-direction:row;font-size:13px;padding:8px 12px}
  .nav .ic{width:18px;height:18px}
  .stage{overflow:visible;padding:12px}
  .view,.view-write,.view-setup{height:auto;grid-template-columns:1fr}
  .panel{overflow:visible}
  .panel-body,.kw-wrap{overflow:visible}
  .kw-wrap{overflow-x:auto}
  .admin,.admin-cols{height:auto;grid-template-columns:1fr}
  .admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth-screen{grid-template-columns:1fr}
  .auth-brand{border-right:0;border-bottom:1px solid var(--line);padding:32px 24px;gap:18px}
  .empty{padding:24px}
  #keywordButton{margin-top:4px}
}
/* 보여줄 개수 · 추천도 · 황금키워드 */
.counts{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.counts legend{font-weight:600;font-size:13px;color:var(--text-2);margin-bottom:6px;padding:0}
.counts label{display:block;cursor:pointer}
.counts input{position:absolute;opacity:0;pointer-events:none;width:auto}
.counts span{display:block;text-align:center;padding:6px 0;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--text-2)}
.counts input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.counts input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.grade{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--sunken);color:var(--text-2);border:1px solid var(--line)}
.grade.gold{background:var(--accent);color:var(--on-accent);border-color:transparent}
.grade.great{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.grade.good{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.grade.fair{color:var(--text-2)}
.grade.hard{color:var(--muted);border-style:dashed}
.tag.gold{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-line)}
.kw-table tr.golden td{background:var(--gold-soft)}
.kw-table tr.golden td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.kw-table tr.golden .kw-name{color:var(--gold)}
.kw-table tr.muted .grade{opacity:.8}

/* 4단계: 이미지 · 오른쪽 탭 */
.side-head{padding:10px 12px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;padding:3px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r)}
.seg-btn{gap:5px;padding:6px 4px;border:0;background:transparent;color:var(--muted);font-size:13px}
.seg-btn .step-no{width:18px;height:18px;font-size:11px}
.seg-btn.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.seg-btn:disabled{cursor:not-allowed;opacity:.55}
.slot-list{border:0;padding:0;margin:0;display:grid;gap:4px}
.slot-list legend{font-weight:600;font-size:13px;color:var(--text-2);margin-bottom:6px;padding:0}
#imageSlots{display:grid;gap:2px}
.check.slot{font-weight:400;font-size:13px;padding:5px 2px;color:var(--text)}
.check.slot.sub{padding-left:22px}
.check.slot.off{opacity:.55}
#imageForm{display:grid;gap:12px}
.image-list{display:grid;gap:10px}
.image-list:empty{display:none}
.image-card{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.image-frame{background:var(--sunken);display:grid}
.image-frame img{width:100%;height:auto;display:block}
.image-frame .skeleton.image,.image-frame .image-error{aspect-ratio:16/9}
.skeleton.image{height:100%;border-radius:0}
.image-error{place-self:center;padding:12px;font-size:12px;color:var(--err);text-align:center}
.image-card figcaption{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;padding:8px 10px}
.image-card figcaption b{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.image-state{font-size:11px;color:var(--muted)}
.image-state.ready{color:var(--ok)}
.image-state.failed{color:var(--err)}
.image-state.running,.image-state.queued{color:var(--warn)}
.image-actions{grid-column:1/-1;display:flex;gap:6px}
.image-actions:empty{display:none}
.btn-link{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-sm);border:1px solid var(--line-strong);font-size:12px;font-weight:600;text-decoration:none;color:var(--text)}
.btn-link:hover{border-color:var(--accent);color:var(--accent)}
.ghost.small{padding:4px 10px;font-size:12px}

/* 5단계: 태그 · 다음 단계 안내 */
.next-step{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--accent-soft)}
.next-step b{font-size:13px;color:var(--text)}
.next-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.primary.small{padding:5px 12px;font-size:12px}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.tag-list:empty{display:none}
.tag-chip{padding:5px 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--surface);color:var(--muted);border:1px dashed var(--line-strong)}
.tag-chip.on{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.finish{display:grid;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.finish h3{font-size:13px;font-weight:600;color:var(--text-2)}
.finish ol{margin:0;padding:0;list-style:none;display:grid;gap:6px;counter-reset:finish}
.finish li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;counter-increment:finish}
.finish li span::before{content:counter(finish) ". ";color:var(--muted)}

/* 네이버 블로그에 올리기 */
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mode-pick label{display:block;cursor:pointer}
.mode-pick input{position:absolute;opacity:0;pointer-events:none;width:auto}
.mode-pick span{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r)}
.mode-pick b{font-size:13px;color:var(--text)}
.mode-pick small{font-size:11px;color:var(--muted);font-weight:400}
.mode-pick input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.mode-pick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.naver-result{padding:9px 12px;border-radius:var(--r);background:var(--ok-soft);color:var(--ok);font-size:13px}
.naver-result a{color:inherit;font-weight:700}
.naver-result small{display:block;margin-top:4px;color:var(--text-2);font-size:12px}

/* 1년 추이(계절성) */
.kw-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--line)}
.check.inline{font-size:13px}
.kw-table td.season-td:nth-child(5){white-space:normal;width:76px}
.spark{display:block;width:62px;height:18px;margin-left:auto;fill:var(--line-strong)}
.spark.steady{fill:var(--ok)}
.spark.mild{fill:var(--accent-line)}
.spark.seasonal{fill:var(--accent)}
.spark.new{fill:var(--warn)}
.season.new{color:var(--warn)}
.season{display:block;margin-top:3px;font-size:10.5px;line-height:1.3;font-weight:600;color:var(--text-2)}
.season.steady{color:var(--ok)}
.season.seasonal{color:var(--accent)}
.season-soon{display:block;font-size:10px;color:var(--warn)}
.season-none{font-size:11px;color:var(--muted)}
.kw-table{min-width:0;font-size:12.5px}
.kw-table th,.kw-table td{padding:8px 7px}
.kw-table td:first-child{min-width:140px}
.kw-table .pick{padding:5px 9px}

/* 주제 추천 */
.source-seg{grid-template-columns:1fr 1fr}
.source-box{display:grid;gap:10px}
.cat-grid{border:0;padding:0;margin:0}
.cat-grid legend{font-weight:600;font-size:13px;color:var(--text-2);margin-bottom:6px;padding:0}
#categoryList{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#categoryList label{display:block;cursor:pointer}
#categoryList input{position:absolute;opacity:0;pointer-events:none;width:auto}
#categoryList span{display:block;text-align:center;padding:7px 2px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}
#categoryList input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
#categoryList input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.trend{display:block;font-size:10.5px;font-weight:700;color:var(--muted)}
.trend.up{color:var(--err)}
.trend.down{color:var(--muted)}

/* AI 로그인 상태 */
.cli-box{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.cli-box h3{font-size:13px;font-weight:600;color:var(--text-2)}
.cli-list{display:grid;gap:6px}
.cli-row{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r)}
.cli-row div{display:grid;gap:1px}
.cli-row b{font-size:13px}
.cli-row small{font-size:11px;color:var(--muted)}
.cli-row .cli-state{font-size:12px;font-weight:600;color:var(--muted)}
.cli-row.ok .cli-state{color:var(--ok)}
.cli-row.need{background:var(--warn-soft);border-color:transparent}
.cli-row.need .cli-state{color:var(--warn)}
.cli-row button{grid-column:1/-1;justify-self:start}

/* 이미지 비율·글 넣기 */
.img-opt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 8px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r)}
.img-opt>b{font-size:13px}
.img-opt .check{grid-column:1/-1;font-size:13px}
.ratio-pick{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.ratio-pick label{display:block;cursor:pointer}
.ratio-pick input{position:absolute;opacity:0;pointer-events:none;width:auto}
.ratio-pick span{display:block;padding:4px 10px;text-align:center;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--text-2)}
.ratio-pick input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ratio-pick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* 내 블로그 말투 */
.style-box{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.style-box h4{margin:0;font-size:13px;font-weight:700}
.style-guide{margin:0;padding-left:18px;font-size:12px;line-height:1.7;color:var(--text-2)}

/* 하단 꼬리 달기 */
.tail-box{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.tail-box h4{margin:0;font-size:13px;font-weight:700}
.tail-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.tail-box h4 small{font-weight:400;color:var(--muted);margin-left:4px}
.blog-id-row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:end}
.blog-id-row button.small{padding:8px 12px;font-size:13px}
.related-list{display:grid;gap:2px;max-height:220px;overflow:auto}
.check.related{font-weight:400;font-size:13px;padding:5px 2px;color:var(--text)}
.check.related span{line-height:1.4}

/* 3단계: 원고 */
.view-draft{grid-template-columns:280px minmax(0,1fr) 320px}
.post-list{display:grid;gap:6px}
.post-list:empty{display:none}
.post-item{display:grid;justify-items:start;gap:3px;text-align:left;white-space:normal;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-weight:400}
.post-item b{font-size:13px;font-weight:600;line-height:1.4;color:var(--text)}
.post-item span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}
.post-item small{font-size:11px;color:var(--muted)}
.post-item.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.dot{flex:0 0 auto;width:7px;height:7px;border-radius:999px;background:var(--line-strong)}
.dot.written{background:var(--ok)}
.dot.writing{background:var(--warn)}
.dot.failed{background:var(--err)}
.editor-head{justify-content:space-between}
.editor-meta{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.editor-actions{display:flex;gap:6px}
.post-state{font-size:12px;color:var(--muted)}
.post-state.writing,.post-state.dirty{color:var(--warn)}
.post-state.failed{color:var(--err)}
.post-state.written{color:var(--ok)}
.editor-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:16px}
.title-field input{font-size:18px;font-weight:700;padding:10px 12px;letter-spacing:-.01em}
#postBody{flex:1;min-height:0;resize:none;font-size:15px;line-height:1.85;padding:16px 18px;background:var(--sunken)}
#postBody:focus{background:var(--surface)}
.writing{flex:1;display:grid;align-content:start;gap:12px;padding:6px 2px}
.skeleton.line{height:14px;border-radius:6px}
.skeleton.line.short{width:60%}
.skeleton.block{height:96px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.checks li{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:var(--r);border:1px solid var(--line)}
.checks li .ic{margin-top:1px}
.checks li div{display:grid;gap:1px}
.checks li b{font-size:13px;font-weight:600}
.checks li small{font-size:12px;color:var(--muted)}
.checks .pass .ic{color:var(--ok)}
.checks .warn{background:var(--warn-soft);border-color:transparent}
.checks .warn .ic{color:var(--warn)}
.checks .idle{color:var(--muted);font-size:13px;border-style:dashed}
.next-box h3,.upcoming h3{font-size:13px;font-weight:600;color:var(--text-2);margin:6px 0 6px}
.next-box ul{margin:0;padding-left:18px;font-size:13px;line-height:1.8;color:var(--text-2)}
.upcoming{margin-top:auto;display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.upcoming p{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.upcoming small{margin-left:auto;font-size:11px}
.step-no.dim{background:var(--sunken);color:var(--muted);border:1px solid var(--line)}
.picked #draftButton{margin-top:6px;width:100%;padding:11px 14px}
/* .picked span 의 회색 작은 글씨가 버튼 글자에 먹지 않게 따로 준다 */
.picked #draftButton span{font-size:14px;font-weight:700;color:var(--on-accent)}
.picked #draftButton .ic{color:var(--on-accent)}
@media (max-width:1280px){.view-draft{grid-template-columns:240px minmax(0,1fr) 280px}}
@media (max-width:1023px){.view-draft{grid-template-columns:1fr}.editor-body{min-height:70vh}#postBody{min-height:60vh}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 내 사진으로 쓰기 */
.write-mode{grid-template-columns:1fr 1fr}
.photo-drop{position:relative;display:grid;justify-items:center;gap:4px;padding:18px 12px;border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--sunken);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.photo-drop:hover,.photo-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.photo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.photo-drop .ic{width:26px;height:26px;color:var(--accent)}
.photo-drop b{font-size:14px;color:var(--text)}
.photo-drop small{font-weight:400;font-size:12px;color:var(--muted)}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.photo-grid:empty{display:none}
.photo-card{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);display:grid}
.photo-card.warn{border-color:var(--warn)}
.photo-frame{position:relative;aspect-ratio:4/3;background:var(--sunken);display:grid;place-items:center;overflow:hidden}
.photo-frame canvas{width:100%;height:100%;object-fit:contain;display:block}
.photo-frame .skeleton{position:absolute;inset:0;height:auto;border-radius:0}
.photo-no{position:absolute;left:6px;top:6px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px;border-radius:999px;background:var(--text);color:var(--surface);font-size:11px;font-weight:700}
.photo-card figcaption{display:grid;gap:4px;padding:6px 8px}
.photo-state{font-size:11px;color:var(--muted);line-height:1.35}
.photo-state.ok{color:var(--ok)}
.photo-state.busy{color:var(--warn)}
.photo-state.fail{color:var(--err)}
.photo-actions{display:flex;gap:2px;flex-wrap:wrap}
.photo-actions button{padding:3px 7px;font-size:11px}
.photo-editor{width:min(1000px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:0 24px 64px rgba(0,0,0,.35)}
.photo-editor[open]{display:grid;gap:8px}
.photo-editor::backdrop{background:rgba(9,9,11,.6)}
.photo-editor h4{margin:0;font-size:15px;font-weight:700}
.photo-editor canvas{justify-self:center;max-width:100%;max-height:calc(100dvh - 170px);width:auto;height:auto;display:block;border-radius:var(--r-sm);touch-action:none;cursor:crosshair;background:var(--sunken)}
.photo-result{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.photo-result h4{margin:0;font-size:13px;font-weight:700}
.photo-result h4 small{font-weight:400;color:var(--muted);margin-left:4px}
.photo-captions-head{display:grid;gap:2px}
.photo-captions-head small{font-size:12px;color:var(--muted)}
.photo-captions{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.photo-captions li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start}
.photo-captions li b{font-size:12px;color:var(--muted);padding-top:8px;min-width:40px}
.photo-captions li.private b{color:var(--warn)}
.photo-captions textarea{min-height:58px;font-size:13px;padding:7px 9px}
.photo-kw{display:grid;gap:6px}
#photoReset{justify-self:start}
.photo-card-post .image-frame img{aspect-ratio:auto}
.image-card .photo-caption{grid-column:1/-1;font-size:12px;color:var(--text-2);line-height:1.45}
@media (max-width:1023px){.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 쓰레드 */
.view-threads{grid-template-columns:340px minmax(0,1fr) minmax(360px,420px)}
.th-seg .seg-btn{font-size:12.5px;padding:6px 2px}
.th-count{font-size:11px;color:var(--accent);font-weight:700;margin-left:3px}
.th-sub{font-weight:400;color:var(--muted);font-size:12px}
.th-field{display:grid;gap:6px}
.th-field>b{font-weight:600;font-size:13px;color:var(--text-2)}
.th-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.th-chips label{display:block;cursor:pointer}
.th-chips input,.th-formats input{position:absolute;opacity:0;pointer-events:none;width:auto}
.th-chips span{display:block;text-align:center;padding:7px 2px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}
.th-chips input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.th-chips input:focus-visible+span,.th-formats input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.th-tones{grid-template-columns:repeat(3,1fr)}
.th-goals{display:grid;gap:2px}
.th-inline{grid-template-columns:52px 1fr;align-items:center;font-weight:600;font-size:12px}
.th-inline input{padding:7px 10px;font-size:13px}
.th-short{min-height:64px}
.th-plan,.th-analysis{display:grid;gap:14px}
.th-plan:empty{display:none}
.th-block{display:grid;gap:8px}
.th-block h4{margin:0;font-size:13px;font-weight:700;color:var(--text)}
.th-block h4 small{font-weight:400;color:var(--muted);margin-left:4px}
.th-lead{font-size:14px;line-height:1.6;color:var(--text);padding:10px 12px;border-left:3px solid var(--accent);background:var(--sunken);border-radius:0 var(--r-sm) var(--r-sm) 0}
.th-bio{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;white-space:pre-wrap}
.th-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--sunken)}
.th-bar i{display:block;flex:1 1 0;min-width:4px}
.th-bar-0{background:var(--accent)}
.th-bar-1{background:var(--accent-line)}
.th-bar-2{background:var(--ok)}
.th-bar-3{background:var(--muted)}
.th-dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:6px}
.th-pillars,.th-patterns,.th-metrics,.th-hooks{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.th-pillars li,.th-patterns li{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r)}
.th-pillars b,.th-patterns b{font-size:13px;display:flex;align-items:center}
.th-pillars b span{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.th-pillars small,.th-patterns small,.th-funnel small,.th-card small,.th-metrics small{font-size:12px;color:var(--text-2);line-height:1.5}
.th-ex,.th-how{color:var(--muted)!important}
.th-funnel{margin:0;padding:0;list-style:none;display:grid;counter-reset:funnel}
.th-funnel li{position:relative;display:grid;gap:2px;padding:6px 0 12px 30px;counter-increment:funnel}
.th-funnel li::before{content:counter(funnel);position:absolute;left:0;top:6px;width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700}
.th-funnel li:not(:last-child)::after{content:"";position:absolute;left:9.5px;top:28px;bottom:0;width:1px;background:var(--accent-line)}
.th-funnel b{font-size:13px}
.th-card{display:grid;gap:3px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r)}
.th-card b{font-size:13px}
.th-card em{font-weight:700;color:var(--accent)}
.th-caution{color:var(--warn)!important}
.th-week{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.th-week summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600}
.th-week ul{margin:6px 0 0;padding-left:30px;font-size:12.5px;line-height:1.7;color:var(--text-2)}
.th-metrics li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 10px;border-bottom:1px solid var(--line)}
.th-metrics b{font-size:13px}
.th-metrics span{font-size:12px;font-weight:700;color:var(--accent);text-align:right}
.th-metrics small{grid-column:1/-1}
.th-guide{font-size:12.5px;color:var(--text-2)}
.th-guide li{margin-bottom:4px}
.th-code{display:block;margin:4px 0;overflow-wrap:anywhere;font-size:12px}
.th-connect{justify-content:center;padding:9px 14px;font-size:14px;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.th-connect:hover{color:var(--on-accent);background:var(--accent-hover)}
.th-connect.disabled{opacity:.55}
.th-trend-list{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.th-trend{width:100%;display:grid;grid-template-columns:1fr auto;gap:0 8px;justify-items:start;text-align:left;padding:8px 10px;white-space:normal;font-weight:400}
.th-trend b{font-size:13px}
.th-trend .trend{font-size:12px;grid-row:span 2;align-self:center}
.th-trend small{font-size:11px;color:var(--muted)}
.th-src{grid-template-columns:repeat(3,1fr)}
.th-src-box{display:grid;gap:8px}
.th-src-box textarea{min-height:150px;font-size:13px}
.th-search{display:grid;grid-template-columns:1fr auto auto;gap:6px}
.th-search select{width:auto}
.th-results{display:grid;gap:6px;max-height:360px;overflow:auto}
.th-results:empty{display:none}
.th-found,.th-ref-list li{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r)}
.th-found p,.th-ref-list p{margin:2px 0 0;font-size:12.5px;white-space:pre-wrap;color:var(--text)}
.th-found small,.th-ref-list small{font-size:11px;color:var(--muted)}
.th-collected{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunken)}
.th-collected h4{margin:0;font-size:13px;font-weight:700}
.th-collected h4 small{font-weight:400;color:var(--muted);margin-left:4px}
.th-ref-list{margin:0;padding:0;list-style:none;display:grid;gap:4px;max-height:240px;overflow:auto}
.th-ref-list:empty{display:none}
.th-ref-list li{background:var(--surface)}
.th-analysis .skeleton{height:84px}
.th-directions{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.th-direction{display:grid;gap:4px;align-content:start;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--r)}
.th-direction>b{font-size:14px;line-height:1.35}
.th-direction small{font-size:12px;color:var(--text-2);line-height:1.5}
.th-direction button{margin-top:4px;justify-self:start}
.th-hook{margin:0;font-size:13px;color:var(--accent);font-weight:600}
.th-why{color:var(--muted)!important}
.th-money{color:var(--ok)!important}
.th-hooks li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}
.th-formats{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.th-formats label{display:block;cursor:pointer}
.th-formats span{display:grid;gap:1px;padding:7px 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.th-formats b{font-size:12.5px;color:var(--text)}
.th-formats small{font-size:11px;color:var(--muted);font-weight:400;line-height:1.35}
.th-formats input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.th-batches{display:grid;gap:6px}
.th-batches:empty{display:none}
.th-batch{display:grid;gap:2px;padding:8px 10px;border-radius:var(--r);background:var(--warn-soft)}
.th-batch.done{background:var(--ok-soft)}
.th-batch.failed{background:var(--err-soft)}
.th-batch b{font-size:13px}
.th-batch small{font-size:12px;color:var(--text-2)}
.th-posts{display:grid;gap:10px}
.th-posts:empty{display:none}
.th-post{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.th-post.scheduled{border-color:var(--accent-line)}
.th-post.failed{border-color:var(--err)}
.th-post-head{display:flex;align-items:center;gap:8px;min-width:0}
.th-post-head small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.th-text{position:relative;gap:4px;font-size:12px}
.th-text textarea{min-height:150px;font-size:14px;line-height:1.6;padding-bottom:22px}
.th-reply textarea{min-height:90px;font-size:13px;padding-bottom:9px}
.th-text span small{font-weight:400;color:var(--muted)}
.th-counter{position:absolute;right:10px;bottom:6px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.th-counter.over{color:var(--err);font-weight:700}
.th-meta input{padding:6px 10px;font-size:13px}
.th-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.th-actions input[type=datetime-local]{width:auto;flex:1 1 170px;padding:5px 8px;font-size:12px}
.th-body{margin:0;font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.th-reply-body{padding-left:10px;border-left:2px solid var(--line-strong);color:var(--text-2);font-size:12.5px}
.th-reply-body small{font-weight:700;color:var(--muted);margin-right:4px}
.th-stats{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:4px}
.th-stats li{display:grid;justify-items:center;padding:6px 2px;border-radius:var(--r-sm);background:var(--sunken)}
.th-stats b{font-size:14px;font-variant-numeric:tabular-nums}
.th-stats small{font-size:10.5px;color:var(--muted)}
@media (max-width:1280px){.view-threads{grid-template-columns:300px minmax(0,1fr) 340px}}
@media (max-width:1023px){.view-threads{grid-template-columns:1fr}}

/* 쓰레드 화면에서는 블로그 작성 단계 표시를 숨긴다 */
.shell:has(#blogSubnav[hidden]) .flow{visibility:hidden}

/* 네이버 블로그 대메뉴: 글쓰기 · 원고 탭 */
.subnav{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.subnav-seg{grid-template-columns:repeat(2,minmax(0,1fr));width:min(800px,100%);padding:4px}
.subnav-seg .seg-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;font-size:14px;border:1px solid transparent;color:var(--muted)}
.subnav-seg .seg-btn .ic{width:17px;height:17px}
.subnav-seg .seg-btn b{font-weight:700}
.subnav-seg .seg-btn small{font-size:11.5px;font-weight:400;color:var(--muted)}
.subnav-seg .seg-btn:not(.on):hover{background:var(--surface);color:var(--text);border-color:var(--line)}
/* 지금 보는 화면: 금빛 바탕 + 테두리 + '지금 보는 화면' 표시 (그림자·막대 없음) */
.subnav-seg .seg-btn,.subnav-seg .seg-btn.on{box-shadow:none}
.subnav-seg .seg-btn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.subnav-seg .seg-btn.on b{color:var(--accent)}
.subnav-seg .seg-btn.on small{color:var(--text)}
.subnav-seg .here{display:none;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;line-height:1.5}
.subnav-seg .here::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.subnav-seg .seg-btn.on .here{display:inline-flex}
.nav span{text-align:center;line-height:1.25}
@media (max-width:1023px){.view{flex:none}.subnav-seg{width:100%}.subnav-seg .seg-btn{flex-direction:column;align-items:center;gap:2px}.subnav-seg .seg-btn .ic{display:none}}

/* 쓰레드 연결 안내: 단계별 바로가기 */
.th-guide{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--sunken)}
.th-guide summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--text)}
.th-guide summary small{font-weight:400;color:var(--muted);margin-left:4px}
.th-steps{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:thstep}
.th-steps li{position:relative;display:grid;gap:4px;padding-left:30px;counter-increment:thstep}
.th-steps li::before{content:counter(thstep);position:absolute;left:0;top:0;width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:700}
.th-steps b{font-size:13px;color:var(--text)}
.th-steps span{font-size:12.5px;line-height:1.55;color:var(--text-2)}
.th-steps em{font-weight:700;color:var(--text)}
.th-step-actions{display:flex;flex-wrap:wrap;gap:6px}
.th-step-actions .btn-link{background:var(--surface)}
.th-copy-row{display:grid;grid-template-columns:1fr auto;gap:2px 6px;align-items:center}
.th-copy-row small{grid-column:1/-1;font-size:11px;color:var(--muted)}
.th-copy-row .th-code{margin:0;background:var(--surface)}
.th-appbox-body{display:grid;gap:10px;margin-top:10px}
.th-appbox-body input{background:var(--surface)}

/* 쓰레드 계정 칸 */
.th-topbar{justify-content:space-between;gap:10px;flex-wrap:wrap}
.shell:has([data-view-panel="threads"][hidden]) .th-topbar{display:none}
.th-accounts{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.th-account-chip{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);text-align:left;white-space:nowrap;font-weight:400}
.th-account-chip span{display:grid;line-height:1.25}
.th-account-chip b{font-size:13px;font-weight:700;color:var(--text)}
.th-account-chip small{font-size:11px;color:var(--muted)}
.th-account-chip.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.th-account-chip.on b{color:var(--accent)}
.th-status{width:8px;height:8px;border-radius:999px;background:var(--line-strong);flex:0 0 auto}
.th-status.on{background:var(--ok)}
.th-add{border:1px dashed var(--line-strong)}
.th-add .ic{width:15px;height:15px}
.th-account-manage{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.th-account-manage input{padding:7px 10px;font-size:13px}
@media (max-width:1023px){.th-accounts{flex-wrap:nowrap;overflow-x:auto;width:100%}}

/* 쓰레드 글 만들기 진행 막대 */
.th-progress{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:4px}
.th-progress i{display:block;height:100%;width:4%;border-radius:999px;background:var(--accent);transition:width 1s linear;position:relative;overflow:hidden}
.th-progress i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:thshine 1.4s linear infinite}
@keyframes thshine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.th-elapsed{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 구독 */
.plan-badge{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--line);background:var(--sunken);color:var(--text-2)}
.plan-badge.free{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.plan-badge.on{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.view-plan{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.plan-hero{display:grid;gap:4px}
.plan-hero b{font-size:28px;letter-spacing:-.02em}
.plan-hero span{color:var(--text-2);font-weight:600}
.plan-list{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--text-2)}
.plan-status{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:10px}
.plan-status p{margin:0}
.plan-usage{display:grid;gap:10px}
.plan-usage div{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.plan-usage i{grid-column:1 / -1;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--p),var(--sunken) var(--p))}
.plan-form{display:grid;gap:12px}
.plan-bank,.plan-pending{padding:12px 14px;border-radius:var(--r);background:var(--sunken);border:1px solid var(--line)}
.plan-pending p{margin:6px 0 0}
.plan-pending button{margin-top:10px}
.plan-small{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.plan-small p{margin:4px 0 0;white-space:pre-wrap}
.billing-cols{margin-top:14px}
.billing-form{display:grid;gap:12px}
.billing-form fieldset{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 12px;display:grid;gap:8px;margin:0}
.billing-form legend{font-size:12px;font-weight:700;color:var(--text-2);padding:0 4px}
@media (max-width:1023px){.view-plan{grid-template-columns:1fr}}
/* 관리자 화면에 구독 관리 줄이 더해져 세로로 스크롤한다(숨김 메시지가 격자 줄을 밀어내지 않게 flex 로). */
.admin{display:flex;flex-direction:column;overflow-y:auto;padding-right:2px}
.admin>.admin-grid{flex:none}
.admin>.admin-cols:not(.billing-cols){flex:1 0 440px}
.admin>.billing-cols{flex:none;align-items:start}

/* 홈(처음 온 사람도 바로 시작하는 작업 허브) */
.view-home{grid-template-rows:minmax(0,1fr)}
.home-wrap{overflow:auto;padding:30px 18px 42px;display:grid;gap:22px;align-content:start;max-width:1180px;margin:0 auto;width:100%}
.home-kicker{color:var(--accent)!important;font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:7px!important}
.home-head h1{margin:0 0 7px;font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.04em}
.home-head p{margin:0}
.home-status{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.home-status:empty{display:none}
.home-status .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:650;background:var(--sunken);color:var(--text-2);border:1px solid var(--line)}
.home-status .chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.home-alert{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid var(--accent-line);border-radius:var(--r-lg);background:var(--accent-soft);color:var(--text-2);font-size:13px}
.home-alert[hidden]{display:none}
.home-alert b{display:block;color:var(--text);font-size:14px;margin-bottom:2px}
.home-alert button{flex:0 0 auto;padding:9px 13px}
.home-onboarding{padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
.home-onboarding[hidden]{display:none}
.onboarding-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:15px}
.onboarding-head span{color:var(--accent);font-size:11px;font-weight:800}
.onboarding-head h2{font-size:18px;margin:3px 0 0;letter-spacing:-.02em}
.onboarding-head>b{color:var(--muted);font-size:12px}
.onboarding-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.onboarding-steps>button,.onboarding-steps>div{display:flex;align-items:center;gap:10px;min-height:68px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunken);text-align:left;color:var(--text)}
.onboarding-steps>button{cursor:pointer}
.onboarding-steps>button:hover{border-color:var(--accent)}
.onboarding-steps i{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);color:var(--muted);font-size:11px;font-style:normal;font-weight:800}
.onboarding-steps .done i{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.onboarding-steps .current{border-color:var(--accent-line);background:var(--accent-soft)}
.onboarding-steps .current i{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.onboarding-steps span{display:grid;gap:3px;min-width:0}
.onboarding-steps small{color:var(--muted);font-size:11px;font-weight:400}
.onboarding-steps em{margin-left:auto;color:var(--accent);font-size:11px;font-style:normal;font-weight:750;white-space:nowrap}
.home-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .15s,transform .1s,box-shadow .15s}
.home-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow)}
.home-card:active{transform:translateY(1px)}
.home-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);width:100%;min-height:220px;padding:0;overflow:hidden;background:linear-gradient(135deg,var(--surface),var(--sunken));border-color:var(--accent-line)}
.feature-copy{display:flex;flex-direction:column;align-items:flex-start;padding:30px}
.feature-label{display:inline-flex!important;width:auto;padding:5px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)!important;font-size:10px!important;font-weight:800!important;letter-spacing:.06em}
.feature-copy h2{font-size:clamp(25px,2.7vw,36px);letter-spacing:-.04em;margin:16px 0 8px}
.feature-copy p{max-width:570px;color:var(--muted);font-size:14px;line-height:1.7;margin:0}
.feature-copy em{margin-top:auto;padding-top:22px;color:var(--accent);font-size:14px;font-style:normal;font-weight:800}
.feature-visual{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:28px;background:linear-gradient(145deg,#2b1d0d,#17130e);color:#fff}
.feature-visual span{color:#f7c77b!important;font-size:10px!important;font-weight:800!important;letter-spacing:.12em}
.feature-visual b{font-size:20px;line-height:1.45}
.feature-visual div{display:flex;gap:5px;width:100%;margin-top:4px}
.feature-visual i{display:block;height:7px;flex:1;border-radius:999px;background:#4b3a24}
.feature-visual i:first-child{background:var(--accent)}
.feature-visual small{color:#b8ad9c}
.home-tool-section{display:grid;gap:12px}
.home-section-head{display:flex;align-items:end;justify-content:space-between;padding:0 2px}
.home-section-head h2{font-size:17px;margin:0 0 3px}
.home-section-head p{font-size:12px;color:var(--muted);margin:0}
.home-section-head>span{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.15em}
.home-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.home-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.compact-cards .home-card{min-height:170px}
.home-card .ic{width:23px;height:23px;color:var(--accent)}
.home-card b{font-size:16px;font-weight:750;letter-spacing:-.02em}
.home-card span{font-size:12.5px;color:var(--muted);line-height:1.6;font-weight:400}
.home-card em{margin-top:auto;padding-top:5px;font-style:normal;font-size:12.5px;font-weight:750;color:var(--accent)}
.home-foot .message{margin:0}
.linkish{background:none;border:none;padding:0;color:var(--accent);font-weight:700;cursor:pointer;text-decoration:underline}
@media (max-width:1023px){.home-wrap{padding:24px 4px 30px}.home-cards,.home-cards.three{grid-template-columns:1fr 1fr}.home-feature{grid-template-columns:1fr}.feature-visual{display:none}}
@media (max-width:650px){.home-wrap{padding:18px 0 28px}.onboarding-steps{grid-template-columns:1fr}.home-cards,.home-cards.three{grid-template-columns:1fr}.home-alert{align-items:flex-start;flex-direction:column}.home-feature{min-height:0}.feature-copy{padding:24px}.home-section-head>span{display:none}}

/* 쓰레드: 올리는 중 표시. 동작 최소화 설정이면 위의 전역 규칙이 움직임을 끈다. */
.th-post{position:relative;overflow:hidden}
.th-post.sending{border-color:var(--accent-line);background:linear-gradient(180deg,var(--accent-soft),var(--surface) 60%)}
.th-sendbar{position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent-soft);overflow:hidden}
.th-sendbar i{position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:th-send 1.3s cubic-bezier(.45,0,.35,1) infinite}
@keyframes th-send{0%{left:-40%}100%{left:100%}}
.tag.sending{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-accent);border-color:transparent}
.th-dot{width:6px;height:6px;border-radius:99px;background:currentColor;animation:th-pulse 1s ease-in-out infinite}
@keyframes th-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.th-post.sending .th-post-head small{color:var(--accent)}
button.is-sending{opacity:.85;cursor:progress}
.th-sent{position:fixed;left:50%;bottom:28px;z-index:60;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 18px;border-radius:14px;background:var(--text);color:var(--bg);box-shadow:0 14px 40px rgba(0,0,0,.28);font-size:14px;transform:translate(-50%,16px);opacity:0;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s}
.th-sent.show{transform:translate(-50%,0);opacity:1}
.th-sent b{font-weight:700}
.th-sent b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:99px;background:var(--ok);vertical-align:1px}
.th-sent span{opacity:.75}
.th-sent a{margin-left:4px;padding:5px 11px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}

/* 점검 카드 → 본문 위치. 경고 카드와 같은 주황으로 본문 선택을 칠해 둘이 이어져 보이게 한다. */
.checks li.findable{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.checks li.findable:hover{border-color:var(--warn);box-shadow:0 1px 0 var(--warn)}
.checks li.findable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.checks .find-hint{font-style:normal;font-size:11.5px;font-weight:600;color:var(--warn);margin-top:4px}
.checks .find-hint::after{content:" →"}
#postBody::selection{background:rgba(251,146,60,.42);color:inherit}
#postBody.find-flash{animation:find-flash .9s ease-out}
@keyframes find-flash{0%{box-shadow:inset 0 0 0 2px var(--warn)}100%{box-shadow:inset 0 0 0 2px transparent}}

/* 검증 결과: 지적된 문장이 본문에서 이미 바뀌었으면 초록으로 알려 준다 */
.checks .find-hint.gone{color:var(--ok)}
.checks .find-hint.gone::after{content:""}

/* 지적된 문장만 AI로 고치기 — 검증 미통과일 때만 보이는 주 동작 */
.fix-post{display:block;width:100%;margin:8px 0 4px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.fix-post:hover{background:var(--accent);color:var(--on-accent)}
.fix-post:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fix-post:disabled{opacity:.6;cursor:progress}

/* 긴 주소·영문이 줄바꿈 없이 들어오면 grid/flex 칸이 옆으로 밀려 창이 튀어나온다.
   글자 단위로라도 끊어 칸 안에 머물게 한다. */
.style-box,.style-box>*{min-width:0}
.checks li{min-width:0}
.checks li div{min-width:0;overflow-wrap:anywhere;word-break:break-word}
#verificationSources,#verificationSources a{overflow-wrap:anywhere;word-break:break-all}

/* 도구 한계 경고 — 막지 않고 알리기만 하므로 경고 카드보다 한 단계 약하게 */
.checks.notes li{background:transparent;border:1px dashed var(--line-strong);color:var(--text-2);font-size:12px}
.checks.notes li div::before{content:"직접 확인 필요";display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:2px}
/* 발행자 확인 — 주 동작(자동 수정)보다 아래, 차분하게 */
.ack-box{display:grid;gap:8px;margin-top:6px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunken)}
.ack-check{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--text-2);cursor:pointer}
.ack-check input{flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;padding:0}
/* 앱 전체 입력칸 규칙(폭 100%)이 체크박스까지 늘려 글자를 밀어낸다. 크기를 고정한다. */
.ack-check span{flex:1;min-width:0}

/* 좁은 패널에서도 칸을 밀지 않게: 버튼 문구와 제목 줄도 필요하면 줄바꿈한다 */
.fix-post,#ackPost{white-space:normal;line-height:1.4}
.style-box .tail-head{flex-wrap:wrap;gap:6px;min-width:0}
.style-box .tail-head h4{min-width:0}
/* 화면 보기 방식(자동/PC/모바일) */
.view-mode{position:relative}
.view-mode-btn{padding:5px 10px;font-size:12px;gap:5px;color:var(--text-2)}
.view-mode-btn .ic{width:16px;height:16px}
.view-mode-btn b{color:var(--accent)}
.view-mode-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;display:grid;min-width:220px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(20,16,8,.14)}
.view-mode-menu button{display:grid;justify-items:start;gap:1px;border:0;background:none;padding:8px 10px 8px 30px;text-align:left;white-space:normal;position:relative;font-weight:600}
.view-mode-menu button:hover{background:var(--sunken)}
.view-mode-menu button small{font-size:11px;font-weight:400;color:var(--muted)}
.view-mode-menu button[aria-checked="true"]::before{content:"";position:absolute;left:11px;top:14px;width:8px;height:8px;border-radius:999px;background:var(--accent)}
@media (max-width:1023px){.view-mode-btn span{display:none}}
/* 모바일 미리보기 틀(넓은 화면) */
html.phone-host,html.phone-host body{height:100%}
html.phone-host body{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 16px 20px;box-sizing:border-box;background:var(--bg)}
.phone-host-bar{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.phone-host-bar button{padding:6px 12px;font-size:12px}
.phone-frame{flex:1;width:430px;max-width:100%;min-height:0;border:1px solid var(--line-strong);border-radius:28px;background:var(--surface);box-shadow:0 20px 60px rgba(20,16,8,.18)}
/* 쓰레드 원클릭 연결 안내 */
.th-simple-hint{display:grid;gap:4px;padding:12px 14px;margin:2px 0 4px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r)}
.th-simple-hint b{font-size:14px;color:var(--text)}
.th-simple-hint span{font-size:12px;color:var(--text-2)}
/* AI 로그인 만료 안내(전역 배너 + 오류 문구 속 다시 로그인 버튼) */
.ai-login-banner{flex:none;display:grid;gap:6px}
.ai-login-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 14px;border:1px solid transparent;border-radius:var(--r);background:var(--warn-soft);color:var(--warn);font-size:13px}
.ai-login-row span{flex:1;min-width:0;overflow-wrap:anywhere}
.ai-login-row b{font-weight:700}
.ai-relogin{padding:5px 12px;font-size:12px;border-color:var(--warn);color:var(--warn);background:var(--surface)}
.ai-relogin:hover{background:var(--warn-soft)}
.ai-relogin:disabled{opacity:.6;cursor:default}
.message .ai-relogin{margin-left:6px;vertical-align:middle}
.ai-relogin-note{display:block;flex-basis:100%;margin-top:4px;font-size:12px;color:var(--text-2)}
/* 네이버로 보내기 전 검증 안내(버튼 위) */
/* 오른쪽 패널이 좁아 버튼을 옆에 두면 글이 한 단어씩 꺾인다 → 안내문 위, 버튼 아래 */
.naver-gate{display:grid;gap:8px;padding:10px 12px;margin-bottom:8px;border-radius:var(--r);background:var(--warn-soft);color:var(--warn);font-size:13px;line-height:1.5}
.naver-gate span{min-width:0;overflow-wrap:anywhere;word-break:keep-all}
.naver-gate button{justify-self:start;padding:5px 12px;font-size:12px;border-color:var(--warn);color:var(--warn);background:var(--surface);white-space:normal}
/* 공식 사이트 바로가기(네이버 올리기 칸) — 미리보기는 실제 버튼 이미지와 같은 파란 버튼 */
.shortcut-list{display:grid;gap:8px}
.shortcut-item{display:grid;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.shortcut-item .check span{overflow-wrap:anywhere}
.shortcut-edit{display:grid;gap:6px}
.shortcut-edit label{font-size:12px}
/* 카드형 미리보기 — 실제 버튼 이미지(서버 카드 HTML)와 같은 모양 */
.shortcut-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;padding:12px;border-radius:14px;background:#fff;border:1px solid #e3e8f0;box-shadow:0 6px 16px rgba(31,94,255,.10);color:#141a24}
.sc-icon{flex:none;width:34px;height:34px;border-radius:10px;background:#eef3ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5eff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M3 10h18M5 6l7-3 7 3M4 10v11M20 10v11M8 14v3M12 14v3M16 14v3'/%3E%3C/svg%3E") center/18px no-repeat}
.sc-body{flex:1;min-width:0;display:grid;gap:2px}
.sc-badge{justify-self:start;white-space:nowrap;font-size:10px;font-weight:700;color:#1f5eff;background:#eef3ff;padding:1px 7px;border-radius:999px}
.sc-title{font-size:13px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;word-break:keep-all}
.sc-meta{font-size:10px;color:#6b7686;overflow-wrap:anywhere}
.sc-go{grid-column:1/-1;text-align:center;font-size:12px;font-weight:800;color:#fff;background:#1f5eff;padding:8px 10px;border-radius:999px;box-shadow:0 4px 10px rgba(31,94,255,.3);white-space:nowrap}
/* 좁은 오른쪽 칸용 세로 미리보기(실제 이미지는 가로로 긴 카드) */

/* 블로그 색감 미리보기 칩(2026-10-05) */
.palette-swatch{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:-2px 0 12px;font-size:12px;opacity:.85}
.palette-chip{display:inline-flex;align-items:center;gap:5px}
.palette-dot{width:16px;height:16px;border-radius:4px;border:1px solid rgba(127,127,127,.4);display:inline-block}
.palette-note{opacity:.8}

/* 휴대폰 폭 넘침 수정(2026-10-05): 한 칸 격자(1fr)는 가장 넓은 내용(메뉴 줄 등)보다 좁아지지 않아 화면이 477px로 밀렸다.
   칸 최소 폭을 0으로 풀고, 상단 오른쪽 묶음·단계 표시를 좁은 화면에 맞춘다. */
@media (max-width:1023px){.shell{grid-template-columns:minmax(0,1fr)}.shell>*{min-width:0}}
@media (max-width:600px){
  .topbar-end{flex-wrap:wrap;margin-left:0;width:100%;gap:6px;row-gap:6px}
  .topbar .badge,.topbar .plan-badge{font-size:11px;padding:4px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .account{padding-left:6px}
  .flow{gap:2px;min-width:0}
  .flow li+li::before{width:4px}
  .flow span.on:not(:has(~ .on)){font-size:11px;gap:4px;padding:3px 8px 3px 3px}
}

/* 휴대폰 사용 안내(2026-10-05): PC 실행기가 켜져 있어야 AI 작업이 돈다. PC 화면에선 숨긴다. */
.pc-note{display:none;margin:0}
@media (max-width:1023px){
  .pc-note:not([hidden]){display:block;order:5;width:100%;font-size:12px;line-height:1.5;padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:var(--sunken);color:var(--text-2)}
  .pc-note.off{border-color:rgba(224,68,47,.5);background:rgba(224,68,47,.08);color:var(--text)}
}
/* 홈 "첫 블로그 글 만들기" 카드는 <button>이라 전역 nowrap을 물려받아 휴대폰에서 글이 616px 한 줄로 잘렸다(2026-10-05). */
.home-feature{white-space:normal;text-align:left}
@media (max-width:1023px){.home-feature{grid-template-columns:minmax(0,1fr)}.feature-copy{min-width:0}}

/* 휴대폰 원고·글쓰기 화면 이동(2026-10-05): 원고 화면은 탭으로 한 영역만, 글쓰기는 바로가기 칩. PC에선 숨김. */
.m-tabs{display:none}
@media (max-width:1023px){
  .m-tabs{display:flex;gap:4px;position:sticky;top:0;z-index:6;overflow-x:auto;scrollbar-width:none;padding:5px;margin:0 0 2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 6px 16px rgba(0,0,0,.18)}
  .m-tabs::-webkit-scrollbar{display:none}
  .m-tabs button{flex:1 0 auto;padding:8px 10px;font-size:13px;font-weight:650;border-color:transparent;background:transparent;color:var(--muted)}
  .m-tabs button.on{background:var(--sunken);color:var(--text);border-color:var(--accent-line)}
  .m-tabs small{font-size:11px;opacity:.7;margin-left:2px}
  /* 글을 쓰는 동안엔 상단 바·메뉴 줄을 고정하지 않아 화면을 넓게 쓴다(탭 바만 위에 붙는다) */
  .shell:has(.view-draft:not([hidden])) .topbar,.shell:has(.view-draft:not([hidden])) .rail,
  .shell:has(#writerCard:not([hidden])) .topbar,.shell:has(#writerCard:not([hidden])) .rail{position:static}
  .view-draft[data-m="list"]>.panel.editor,.view-draft[data-m="list"]>.panel.side,
  .view-draft[data-m="editor"]>.panel.m-list,.view-draft[data-m="editor"]>.panel.side,
  .view-draft:is([data-m="checks"],[data-m="images"],[data-m="tags"])>.panel.m-list,
  .view-draft:is([data-m="checks"],[data-m="images"],[data-m="tags"])>.panel.editor{display:none}
  .view-draft[data-m] .side-head{display:none}
}

/* 휴대폰 "내 원고" 접기(2026-10-05): 접으면 최근 3개 + 지금 연 원고만. PC에선 버튼도 숨김. */
.m-only{display:none}
@media (max-width:1023px){
  .m-only:not([hidden]){display:inline-flex}
  #postListToggle{margin-left:auto;padding:5px 10px;font-size:12px}
  .post-list.collapsed .post-item:nth-child(n+4):not(.on){display:none}
}