:root{--ac:#5b3fd6;--acd:#4a31b8;--acs:#efebff;--ink:#1f2937;--mut:#5b6472;--line:#d9dee5;--bg:#f5f4fa;--card:#fff;--field:#fff;--fieldline:#b9c0ca;--err:#b42318;--errbg:#fdecea;--warn:#8a5a00;--warnbg:#fff6e0;--ok:#0f7b3e;--code:#151a2d;--codeink:#e6e8f5;--dec:#0f7b3e;--decs:#e8f6ee}
@media (prefers-color-scheme:dark){:root{--ac:#9d8cff;--acd:#b4a7ff;--acs:#262046;--ink:#e6e8ee;--mut:#a3aab6;--line:#323848;--bg:#12141b;--card:#1b1e28;--field:#151821;--fieldline:#3d4456;--err:#ff8a7e;--errbg:#3a1d1b;--warn:#f0c46a;--warnbg:#33290f;--ok:#6ad49a;--code:#0c0e15;--codeink:#e6e8f5;--dec:#6ad49a;--decs:#14281e}}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
.top{padding:14px 16px;max-width:980px;width:100%;margin:0 auto}
.brand{font-weight:800;color:var(--ac);text-decoration:none;font-size:1.05rem}
.wrap{max-width:980px;width:100%;margin:0 auto;padding:8px 16px 40px;flex:1}
.foot{max-width:980px;width:100%;margin:0 auto;padding:16px;font-size:.82rem;color:var(--mut)}
h1{font-size:1.4rem;margin:0}
h2{font-size:1.12rem;margin:0 0 10px}
h3{font-size:.98rem;margin:0 0 6px}
.muted{color:var(--mut)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px}
label{display:block;font-weight:600;font-size:.92rem;margin:12px 0 5px}
input[type=text],input[type=password],textarea,select{width:100%;padding:11px 12px;border:1px solid var(--fieldline);border-radius:10px;font-size:1rem;font-family:inherit;background:var(--field);color:var(--ink)}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--ac) 35%,transparent);outline-offset:1px;border-color:var(--ac)}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline input{flex:1;min-width:0}
button,.btnlink{padding:10px 14px;border:1px solid var(--fieldline);background:var(--field);border-radius:10px;font-size:.95rem;cursor:pointer;font-family:inherit;color:var(--ink);white-space:nowrap;text-decoration:none;display:inline-block}
button:hover,.btnlink:hover{background:var(--acs)}
button.primary{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:700;padding:10px 22px}
button.primary:hover{background:var(--acd)}
button.block{width:100%;margin-top:16px}
button:disabled{opacity:.5;cursor:not-allowed}
button.danger{color:var(--err)}
button.small,.btnlink.small{padding:6px 10px;font-size:.85rem}
button.ghost{border-color:transparent;background:none;color:var(--mut)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.note{font-size:.86rem;color:var(--mut);margin:8px 0 0}
.note.warn{color:var(--warn)}
.msg{margin-top:8px;font-size:.93rem;min-height:1.2em}
.msg.err{color:var(--err)}
.msg.ok{color:var(--ok)}
.banner{background:var(--warnbg);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn);padding:10px 12px;border-radius:10px;font-size:.9rem;margin:12px 0 0}
.banner.red{background:var(--errbg);border-color:color-mix(in srgb,var(--err) 35%,transparent);color:var(--err)}
.banner.ok{background:color-mix(in srgb,var(--ok) 10%,var(--card));border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)}
.hidden{display:none!important}
.offscreen{position:fixed;top:-1000px;left:0;opacity:0}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.linkish{border:0;background:none;padding:0;color:var(--ac);text-decoration:underline;font-size:inherit;cursor:pointer}
.linkish:hover{background:none}

/* 번역기 */
.outhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.roomname{color:var(--mut);font-size:.88rem}
.intro{margin:10px 0 0;color:var(--ink);font-size:.95rem;font-weight:700}
.langbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:40px 0 8px}
.lang{font-weight:700;font-size:1rem;padding:9px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);text-align:center}
.langbar .lang:first-child{border-color:var(--ac);color:var(--ac);background:var(--acs)}
.tr.is-dec .langbar .lang:first-child{border-color:var(--line);color:var(--ink);background:var(--bg)}
.tr.is-dec .langbar .lang:last-child{border-color:var(--dec);color:var(--dec);background:var(--decs)}
.swap{width:44px;height:44px;border-radius:50%;padding:0;font-size:1.25rem;font-weight:700;color:var(--ac)}
.swapwrap{position:relative;display:inline-flex}
.kbdtip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.75rem;font-weight:600;line-height:1;padding:5px 9px;border-radius:8px;background:var(--ink);color:var(--card,#fff);pointer-events:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.kbdtip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink)}
@media (hover:none) and (pointer:coarse){.kbdtip{display:none}.langbar{margin-top:16px}}
.panes{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.pane-src,.pane-dst{display:flex;flex-direction:column;min-width:0}
textarea.src{flex:1;min-height:calc(1.55em * 6 + 24px);resize:vertical;font-size:1.05rem}
textarea.src.code{font-size:.95rem;word-break:break-all}
.dst{flex:1;white-space:pre-wrap;word-break:break-word;background:var(--code);color:var(--codeink);padding:12px 14px;border-radius:10px;font-size:1.05rem;min-height:calc(1.55em * 6 + 24px);max-height:24em;overflow-y:auto}
.dst.empty::before{content:attr(data-empty);color:#8b93a7}
.dst.code{letter-spacing:.02em}
.tr.is-dec .dst{background:var(--decs);color:var(--ink);border-left:4px solid var(--dec)}
.share .dst{margin-top:10px;min-height:4em}
.share .dst.code{background:var(--code);color:var(--codeink)}
.hint{font-size:.85rem;color:var(--mut);margin-top:6px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.detected{font-size:.82rem;font-weight:700;color:var(--dec);background:var(--decs);border-radius:999px;padding:3px 9px}
button.paste{border-color:var(--dec);color:var(--dec)}
@media (max-width:760px){.panes{grid-template-columns:1fr}textarea.src,.dst{min-height:calc(1.55em * 4 + 24px)}}
@media (max-width:420px){h1{font-size:1.25rem}.lang{font-size:.92rem;padding:8px 6px}}

/* 설정 */
details.opts{border:1px solid var(--line);border-radius:14px;padding:4px 16px;background:var(--card)}
details.opts[open]{padding-bottom:16px}
details.opts summary{cursor:pointer;font-weight:600;padding:10px 0;font-size:.95rem}
.sumnote{font-weight:500;color:var(--mut);font-size:.88rem}
.setsec{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.setsec .btns{margin-top:10px}
.chk{display:flex;align-items:center;gap:8px;font-weight:500;margin:10px 0 4px}
.chk input{width:18px;height:18px;accent-color:var(--ac);flex:none}
.chk input.num{width:84px;height:auto;padding:6px 8px;border:1px solid var(--fieldline);border-radius:8px;font-size:.95rem;background:var(--field);color:var(--ink);accent-color:auto}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--fieldline);border-radius:10px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:7px 12px;font-size:.86rem}
.seg button[aria-pressed=true]{background:var(--ac);color:#fff}
.quickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.quick{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg)}
.steps{margin:8px 0 0;padding-left:20px;color:var(--mut);font-size:.85rem}
.steps li{margin:2px 0}
@media (max-width:760px){.quickgrid{grid-template-columns:1fr}}

/* 공유로 받은 글 */
.share h1{margin-bottom:8px}
.quote{white-space:pre-wrap;word-break:break-word;border-left:3px solid var(--line);padding:6px 10px;color:var(--mut);max-height:10em;overflow:auto;margin:8px 0}
.pwform{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;background:var(--bg)}
.pwform h3{margin:0 0 8px}
/* 설명 글(템플릿에 직접 — JS 없이도 보임) */
.about{flex:0;padding-top:0}
.about h3{margin:18px 0 6px}
.about p,.about li,.about dd{font-size:.94rem}
.about ol,.about ul{margin:0;padding-left:1.3em}
.about li{margin:3px 0}
.about dt{font-weight:700;font-size:.94rem;margin-top:10px}
.about dd{margin:2px 0 0;color:var(--mut)}
.about code,.about kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
/* 공통 푸터·문서(개인정보처리방침·소개) */
.site-foot{text-align:center;border-top:1px solid var(--line);margin-top:8px}
.site-foot p{margin:4px 0}
.site-foot nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:4px}
.site-foot a{color:var(--mut)}
.site-foot a:hover{color:var(--ac)}
.doc{flex:1;max-width:760px}
.doc h1{margin-bottom:6px}
.doc h2{margin:22px 0 6px;font-size:1.02rem}
.doc a{color:var(--ac)}
.doc .btnlink{color:var(--ink)}