/* sidoyu DS — 흰 바탕·검정 잉크·네온그린 포인트·직각·무박스 */
:root{
  --surface:#ffffff;
  --ink:#111111;
  --ink-muted:rgba(17,17,17,.55);
  --brand:#28ff35;
  --line:rgba(17,17,17,.15);
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:860px;margin:0 auto;padding:40px 20px 96px}
h1{font-size:28px;line-height:1.2;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:15px;font-weight:700;margin:0 0 14px;letter-spacing:.02em}
p{margin:0 0 10px}
p.nomargin{margin:0}
.muted{color:var(--ink-muted)}
.small{font-size:13px}
.tag{font-size:12px;color:var(--ink-muted);border-left:3px solid var(--brand);padding-left:8px}
/* 무박스: 구획은 상단 룰 + 여백 */
section{border-top:1px solid var(--line);padding-top:22px;margin-top:30px}
section.first{border-top:none;margin-top:24px}
label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.field{margin-top:16px}
/* 직각·기능 테두리만: 입력=2px ink */
input[type=text],input[type=password],textarea,select{
  width:100%;border:2px solid var(--ink);background:var(--surface);color:var(--ink);
  font:inherit;padding:10px 12px;border-radius:0;appearance:none}
textarea{min-height:88px;resize:vertical}
select{background-image:none}
input:focus,textarea:focus,select:focus,button:focus-visible{
  outline:2px solid var(--ink);outline-offset:0;box-shadow:0 0 0 4px rgba(40,255,53,.45)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;margin-top:8px}
.row>div{flex:1;min-width:180px}
.row>div.narrow{flex:0 1 140px;min-width:120px}
.check{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:500;margin-top:10px}
.check input{width:16px;height:16px;accent-color:var(--ink)}
/* 버튼: 직각, 무그림자 */
button{font:inherit;font-weight:600;border-radius:0;cursor:pointer;padding:11px 18px;
  border:2px solid var(--ink);background:var(--ink);color:var(--surface)}
button:hover{background:#000}
button.ghost{background:var(--surface);color:var(--ink)}
button.ghost:hover{background:rgba(17,17,17,.05)}
button:disabled{opacity:.4;cursor:not-allowed}
button.link{border:none;background:none;color:var(--ink);padding:0;text-decoration:underline;
  text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px;font-size:13px}
button.link:hover{background:none}
.keystate{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.keystate code{font-size:13px}
.dot{width:8px;height:8px;background:var(--brand);display:inline-block}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.hint{font-size:12px;color:var(--ink-muted);margin-top:6px}
.notice{font-size:13px;color:var(--ink-muted);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:12px 0;margin:16px 0}
.notice b{color:var(--ink)}
.msg{font-size:14px;padding:10px 0;border-top:2px solid var(--ink);margin-top:14px;display:none}
.msg.show{display:block}
.msg b{display:block;margin-bottom:2px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(17,17,17,.25);
  border-top-color:var(--ink);border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px}
button .spin{border-color:rgba(255,255,255,.35);border-top-color:var(--surface)}
button.ghost .spin{border-color:rgba(17,17,17,.25);border-top-color:var(--ink)}
@keyframes s{to{transform:rotate(360deg)}}
footer{margin-top:56px;border-top:1px solid var(--line);padding-top:16px;font-size:12px;color:var(--ink-muted)}
a{color:var(--ink);text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px}

/* 진행 스텝 */
.steps{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px}
.step{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--ink-muted);text-decoration:none}
.step .sdot{width:9px;height:9px;background:var(--line);display:inline-block}
.step.done{color:var(--ink)}
.step.done .sdot{background:var(--brand)}

/* 단계 잠금 안내 */
.lock{font-size:14px;color:var(--ink-muted);margin:4px 0 2px}
.lock b{color:var(--ink)}

/* 키 허브 */
.cred{margin-top:18px}
.cred-title{font-size:14px;font-weight:700;margin-bottom:8px}
.cred-title .muted{font-weight:500;font-size:13px}
.cred .keystate button.link{margin-left:4px}
.cred-row{display:flex;gap:10px}
.cred-row input{flex:1;min-width:0}
.cred-row button{flex:0 0 auto}
.cred-opts{display:flex;gap:16px;align-items:center;margin-top:8px}
.cred-opts .check{margin-top:0}

/* 장면 카드: 무박스 — 상단 2px 잉크 룰로 구획, 선택=네온그린 룰 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px 18px;margin-top:20px}
.scene{border-top:2px solid var(--ink);padding-top:10px}
.scene.picked{border-top:3px solid var(--brand)}
.scene .sc-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;margin-bottom:8px}
.scene .sc-head .st{font-weight:500;color:var(--ink-muted);font-size:12px}
.scene textarea{min-height:76px;font-size:13px;padding:8px 10px}
.scene img{width:100%;height:auto;display:block;border:1px solid var(--line);margin-top:2px}
.scene .actions{margin-top:10px}
.pedit{margin-top:10px}
.pedit summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-muted);list-style:none;width:fit-content;
  text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px}
.pedit summary::-webkit-details-marker{display:none}
.pedit textarea{margin-top:8px}
.scene .sc-msg{font-size:12px;color:var(--ink-muted);margin-top:6px}
.scene .sc-msg.err{color:var(--ink);border-left:3px solid var(--ink);padding-left:6px}

/* 허브 (도구 선택) — 무박스: 상단 룰 카드, 선택 시 네온그린 룰 */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px 22px;margin-top:6px}
.hub-card{display:block;border-top:2px solid var(--ink);padding-top:12px;text-decoration:none;color:var(--ink)}
.hub-card:hover{border-top-color:var(--brand)}
.hub-title{display:block;font-size:17px;font-weight:700;text-decoration:underline;
  text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:4px}
.hub-desc{display:block;font-size:14px;color:var(--ink-muted);margin-top:8px}
.hub-keys{display:block;font-size:12px;color:var(--ink-muted);margin-top:6px}

/* 보이스 페이지 (voice/) — 문장 카드는 .scene 재사용 */
.h1sub{color:var(--ink-muted);font-weight:500;font-size:20px}
.scene audio{width:100%;margin-top:10px}
.emo-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.emo-row select{width:auto;padding:6px 10px;font-size:13px}
.rc{margin-top:8px}
.rc-row{font-size:12px;color:var(--ink-muted);border-left:3px solid var(--line);padding-left:8px;margin-top:4px}
.rc-row.warn{border-left-color:var(--brand)}
.rc-row.block{border-left-color:var(--ink);color:var(--ink);font-weight:600}
#voiceSearch{margin-bottom:8px}
.scene .st{font-weight:500;color:var(--ink-muted);font-size:12px}

/* 영상 */
.picked{margin-bottom:4px}
.picked img{max-width:220px;height:auto;display:block;border:1px solid var(--line);margin-bottom:6px}
.job{border-top:1px solid var(--line);padding:12px 0;font-size:14px}
.job:first-child{border-top:2px solid var(--ink)}
.job .j-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.job .j-title{font-weight:700}
.job .j-meta{font-size:12px;color:var(--ink-muted)}
.job .j-err{font-size:13px;border-left:3px solid var(--ink);padding-left:8px;margin-top:6px}
.job video{max-width:100%;display:block;border:1px solid var(--line);margin-top:10px}
.job .actions{margin-top:10px}