:root{--navy:#1E3A5F;--gold:#C9A24A;--ink:#1B1F24;--soft:#5B6470;--line:#D9DEE5;--tint:#EEF3F9;--warn:#B3261E;--warnbg:#FDF1F0;--bg:#F6F8FB}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:17px;line-height:1.65;word-break:keep-all;padding-bottom:env(safe-area-inset-bottom)}
header{background:var(--navy);color:#fff;padding:16px 0;padding-top:calc(16px + env(safe-area-inset-top))}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
header h1{margin:0;font-size:21px} header p{margin:4px 0 0;color:#DDE6F2;font-size:13.5px}
section{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin:14px 0}
h2{font-size:18px;color:var(--navy);margin:0 0 8px}
label.f{display:block;font-weight:700;margin:12px 0 4px;color:var(--navy);font-size:15.5px} label.f span{font-weight:400;color:var(--soft);font-size:13.5px}
input[type=text],input[type=password],textarea,select{width:100%;font:inherit;font-size:17px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
textarea{min-height:150px;resize:vertical} textarea.short{min-height:76px}
.grid3{display:grid;grid-template-columns:1fr;gap:6px} @media(min-width:560px){.grid3{grid-template-columns:2fr 1fr 1fr;gap:12px}}
button{font:inherit;font-size:17px;font-weight:700;padding:13px 18px;border-radius:10px;border:0;background:var(--navy);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.line{background:#fff;color:var(--navy);border:1.5px solid var(--navy)} button.sm{padding:7px 12px;font-size:14px;border-radius:8px}
button:disabled{opacity:.5}
.btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap} .btns button{flex:1 1 auto}
.msg{margin-top:10px;font-size:15px;min-height:1em} .err{color:var(--warn)} .ok{color:#1F6B3A}
.hint{font-size:13.5px;color:var(--soft)} .center{text-align:center}
.prog{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--soft);font-size:15px}
.spin{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--navy);border-radius:50%;animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.ver{margin-top:16px} .ver h3{margin:0 0 8px;font-size:17px;color:var(--navy);border-bottom:2px solid var(--navy);padding-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.post{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:#fff}
.post pre{margin:0;white-space:pre-wrap;font:inherit;line-height:1.6}
.post .bar{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13.5px;color:var(--soft)}
.post.over{border-color:var(--warn);background:var(--warnbg)} .post.over .cnt{color:var(--warn);font-weight:700}
ul.list{padding-left:20px;margin:6px 0} ul.list li{margin:6px 0}
.note{background:var(--tint);border-left:4px solid var(--navy);padding:8px 12px;border-radius:0 8px 8px 0;font-size:14px;margin:8px 0}
.made a{display:block;padding:8px 0;color:var(--navy);border-bottom:1px dotted var(--line);text-decoration:none}
footer{color:var(--soft);font-size:13px;text-align:center;padding:18px 16px 28px}
a{color:var(--navy)}

.prov{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px} .prov label{display:flex;align-items:center;gap:8px;font-size:16px;padding:8px 10px;border:1px solid var(--line);border-radius:10px} .prov input{width:20px;height:20px;margin:0}
@media(min-width:560px){.prov{flex-direction:row} .prov label{flex:1}}

/* 앱 다운로드 버튼 · 설치 안내 (2026-10-02 쓰레드 딸깍) */
.instbar{background:var(--navy);padding:0 0 14px}
.install{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;background:var(--gold);color:#1B1F24;font-size:18px;font-weight:800;border-radius:14px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.install svg{width:24px;height:24px;flex:none}
.install[hidden],.instbar[hidden],.ig[hidden]{display:none}
.ig{position:fixed;inset:0;z-index:2147483001;background:rgba(15,25,40,.62);display:flex;align-items:flex-end;justify-content:center}
@media(min-width:560px){.ig{align-items:center}}
.ig .card{background:#fff;width:100%;max-width:480px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));position:relative}
@media(min-width:560px){.ig .card{border-radius:18px}}
.ig h2{margin:0 30px 6px 0;font-size:19px}
.ig .x{position:absolute;top:8px;right:8px;width:44px;height:44px;padding:0;background:none;color:var(--soft);font-size:22px;border-radius:50%}
.ig ol{list-style:none;margin:12px 0 0;padding:0}
.ig li{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:9px 0;font-size:16px}
.ig li .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.ig li svg{flex:none;width:46px;height:46px}
.ig li b{color:var(--navy)}
.ig .go{width:100%;margin-top:6px}

/* 2026-10-04 · 공개 홈페이지: 탭 · 사용법 · 마케팅 가이드 · 홍보 배너 */
nav.tabs{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
nav.tabs .wrap{display:flex;gap:4px;overflow-x:auto}
nav.tabs a{flex:1 0 auto;text-align:center;padding:12px 10px;font-weight:700;font-size:15px;color:var(--navy);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
nav.tabs a:hover{border-bottom-color:var(--gold)}
.lead{background:#FFF8E6;border:1px solid #F0D79A;border-radius:12px;padding:12px 14px;margin:14px 0 0;font-size:15px}
section,.lead,h2,h3{scroll-margin-top:60px}
.doc h2.big{font-size:22px;margin:0 0 10px}
.doc h3{font-size:18px;color:var(--navy);margin:22px 0 8px;display:flex;align-items:center;gap:8px}
.doc h3 .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.doc p,.doc li{font-size:16px}
.doc ul,.doc ol{padding-left:22px;margin:6px 0}
.doc li{margin:6px 0}
.tipbox{background:var(--tint);border-left:4px solid var(--gold);border-radius:0 10px 10px 0;padding:10px 14px;margin:10px 0;font-size:15px}
.tbl{width:100%;border-collapse:collapse;margin:8px 0;font-size:14.5px}
.tbl th,.tbl td{border:1px solid var(--line);padding:8px 9px;vertical-align:top;text-align:left}
.tbl th{background:var(--tint);color:var(--navy)}
@media(max-width:560px){.tbl{font-size:13.5px}.tbl th,.tbl td{padding:6px}}
details{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
details summary{font-weight:700;cursor:pointer;color:var(--navy)}
details p{margin:8px 0 0}
.bd{display:inline-block;font-size:12px;font-weight:800;border-radius:6px;padding:1px 7px;margin-right:4px;vertical-align:1px}
.bd.o{background:#1E3A5F;color:#fff}.bd.d{background:#2F7D4F;color:#fff}.bd.e{background:#E9E2D0;color:#5A4A20}
.legend{font-size:13.5px;color:var(--soft)}
.cards6{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0}
@media(min-width:560px){.cards6{grid-template-columns:1fr 1fr}}
.cards6 div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#FCFDFE}
.cards6 b{display:block;color:var(--navy)}.cards6 span{font-size:14px;color:var(--soft)}
.myth li{color:#5B6470}
.src{font-size:12.5px;color:var(--soft);border-top:1px dashed var(--line);padding-top:10px;margin-top:18px}

/* 만든 사람 배너 (왼쪽 · 2개) */
.ib{display:block;text-decoration:none;color:#fff;background:var(--c);border-radius:14px;overflow:hidden;margin:0 0 12px;box-shadow:0 6px 16px rgba(20,30,50,.18);transition:transform .15s}
.ib:hover{transform:translateY(-2px)}
.ib img{display:block;width:100%;aspect-ratio:390/330;object-fit:cover;object-position:top}
.ib .ic{display:block;padding:10px 12px 12px}
.ib b{display:block;font-size:15.5px;line-height:1.3}
.ib small{display:block;font-size:12.5px;opacity:.88;line-height:1.45;margin-top:3px}
.ib i{display:inline-block;font-style:normal;font-size:12px;font-weight:800;margin-top:8px;background:#C9A24A;color:#1B1F24;border-radius:20px;padding:3px 10px}
.rh{font-size:13px;font-weight:800;color:var(--navy);margin:0 2px 8px}
.rail{display:none}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pgrid .ib{margin:0}
@media(max-width:420px){.pgrid{grid-template-columns:1fr}}
/* 넓은 화면: 본문 왼쪽 칸에 배너(스크롤해도 따라옴) · 오른쪽 칸은 비워 본문을 가운데에 둠 · 아래 칸은 숨김 */
@media(min-width:1200px){
  .shell{display:grid;grid-template-columns:200px minmax(0,760px) 200px;justify-content:center;gap:22px;align-items:start}
  .shell main.wrap{margin:0;max-width:none;width:100%;grid-column:2}
  .rail{display:block;grid-column:1;grid-row:1;position:sticky;top:58px;max-height:calc(100vh - 66px);overflow-y:auto;padding:14px 4px 12px;scrollbar-width:thin}
  #more{display:none}
}