/* 서류철 옷 — style.css 위에 덧입힘 */
:root{
  --paper:#EFEBE3; --paper-2:#F6F3EC; --card:#FFFEFB;
  --ink:#22201D; --ink-2:#55504A; --ink-3:#8A847B;
  --navy:#22201D; --navy-2:#3A3632; --navy-deep:#22201D;
  --gold:#B3261E; --gold-2:#B3261E; --gold-soft:#F6F3EC;
  --red:#B3261E; --red-deep:#8A1C16; --red-soft:#FBEDEB;
  --line:#E2DBCD; --line-2:#D9D2C5;
  --shadow:0 1px 0 rgba(0,0,0,.02);
  --r:4px;
}
body{background:var(--paper);font-family:var(--serif)}

/* 머리 — 꾸밈 없이 */
.top{position:static;background:transparent;backdrop-filter:none;color:var(--ink);border-bottom:0}
.top .bar{height:auto;padding-top:22px;padding-bottom:6px;max-width:1040px}
.brand b{font-size:18px;font-weight:700;color:var(--ink)}
.brand b span{color:var(--ink)}
.nav a{color:var(--ink-2);font-family:var(--sans);font-size:15px;padding:2px 0;margin-left:18px;border-radius:0;border-bottom:1px solid transparent}
.nav a:hover{background:transparent;color:var(--ink);border-bottom-color:var(--ink-2)}
.nav a.on{background:transparent;box-shadow:none;color:var(--ink);font-weight:700;border-bottom:2px solid var(--red)}

/* 종이 한 장 안에 담기 */
main.wrap,.manual{max-width:1040px;background:var(--card);border:1px solid #E2DBCD;box-shadow:0 18px 40px rgba(60,45,20,.10);margin:14px auto 0;padding:48px 64px 60px}
.manual{grid-template-columns:200px 1fr}

/* 쪽 머리 — 남색 띠 대신 공문 머리 */
.page-hero{background:transparent;color:var(--ink);max-width:1040px;margin:0 auto}
.page-hero .wrap{padding:0 28px;max-width:1040px}
.page-hero + main.wrap{margin-top:0;border-top:0}
.page-hero .eyebrow{display:none}
.page-hero h1{font-size:30px;margin-top:18px;color:var(--ink)}
.page-hero p{color:var(--ink-2);font-family:var(--sans);font-size:15px}
.page-hero .wrap > div[style]{display:none}

/* 제목 */
.head h2,.pane-head h2,.fhead h2,.dl h3,.door h3,.skill h3{color:var(--ink)}
.head h2 .k,.pane-head .k{color:var(--red);font-family:var(--sans)}
.head{border-bottom:2px solid var(--ink);padding-bottom:10px}

/* 카드 — 그림자 걷고 가는 선 */
.card,.dl,.doc,.fsec,.pagebox,.skill,.c{box-shadow:none;border-radius:4px;border:1px solid var(--line-2);background:var(--card)}
.dl.pro{box-shadow:none;border:1.5px solid var(--ink)}
.dl-grid,.fwrap{margin-top:8px}
.card:hover,.doc:hover,.skill:hover,.door:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.pill{border-radius:2px}
.pill.navy{background:var(--ink)}

/* 단추 — 먹색 */
.btn{border-radius:0;box-shadow:none;font-family:var(--sans)}
.btn.navy,.btn.gold{background:var(--ink);color:#fff;box-shadow:none}
.btn.navy:hover,.btn.gold:hover{background:#000;transform:none}
.btn.line{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.copy{border-radius:0}

/* 설명서 탭 — 인주 붉은색 그대로 */
.tabs{top:14px}
.tab{border-radius:2px;background:#F6F3EC;border-color:var(--line-2);font-family:var(--sans)}
.tab.on{box-shadow:none}
.tab.side.on{background:var(--ink);border-color:var(--ink)}
.mtext h4.feat{box-shadow:none;border-radius:2px;background:#FBFAF6}
.mtext .star{background:#F6F3EC;border-left-color:var(--red)}
.mtext .note{background:#F4F2EC}
.mtext code{background:#F1EEE6;color:var(--ink)}
.tabshot a{box-shadow:none;border-radius:2px}
.drag{border-radius:2px}
.drag.no{background:#8A847B}

/* 유료판 */
.story{box-shadow:none;border:0;padding:0 0 10px;font-size:18px}
.promise-box{background:transparent;border-left-color:var(--red)}
.month{background:transparent;color:var(--red);padding:0;font-size:13px}
.closing{color:var(--ink)}
.price{box-shadow:none}
.price .top-p{background:var(--card);color:var(--ink);border-bottom:2px solid var(--ink)}
.price .top-p .l{color:var(--red)}
.price .s{color:var(--ink-2)}
.badge{background:transparent;color:var(--red);border:1px solid var(--red);border-radius:0}
.pay{background:#F6F3EC;border-color:var(--line-2);border-radius:2px}
.side-col{top:20px}
.alert{border-radius:2px}

/* 기능 한눈에 */
.fsec{border-top:3px solid var(--c)}
.chip{box-shadow:none;border-radius:2px}

/* 발 */
footer{background:transparent;color:var(--ink-3);margin-top:0}
footer b{color:var(--ink)}
footer a{color:var(--ink-2)}
footer .wrap{max-width:1040px;padding-left:28px;padding-right:28px}

@media (max-width:820px){
  main.wrap,.manual{padding:26px 20px 40px;margin-top:10px}
  .manual{grid-template-columns:1fr}
  .tabs{top:0;margin:0}
  .page-hero h1{font-size:25px}
  .nav a{margin-left:12px}
}
.page-hero .wrap{padding:0 48px}
.head h2 .k{display:none}
@media (max-width:820px){.page-hero .wrap{padding:0 20px}}

/* ── 먹 한 가지 — 화려함 걷기 ── */
:root{
  --red:#22201D; --red-deep:#000; --red-soft:#F4F2EC;
  --gold:#22201D; --gold-2:#22201D;
  --t-design:#22201D; --t-chak:#22201D; --t-change:#22201D; --t-gi:#22201D; --t-jan:#22201D;
  --t-jun:#22201D; --t-search:#22201D; --t-mak:#22201D; --t-tool:#22201D;
}
.nav a.on{border-bottom-color:var(--ink)}
.tab .dot{display:none}
.tab{color:var(--ink-2);font-weight:500}
.tab.on,.tab.side.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tab:hover{border-color:var(--ink)}
.pane-head{border-bottom:2px solid var(--ink)}
.pane-head .k{color:var(--ink-3)}
.mtext h4.feat{border-left:3px solid var(--ink);background:transparent;border-top:0;border-right:0;border-bottom:1px solid var(--line-2);padding:8px 0 8px 14px;font-size:18px}
.mtext h3.sec{border-left-color:var(--ink)}
.mtext li::marker{color:var(--ink)}
.mtext .star{background:transparent;border-left:2px solid var(--ink-3)}
.mtext .note{background:transparent;padding-left:0}
.drag{background:transparent;color:var(--ink);border:1px solid var(--ink);font-weight:500}
.drag.no{background:transparent;color:var(--ink-3);border-color:var(--ink-3)}
.fsec{border-top:2px solid var(--ink)}
.fhead h2 a,.fmore{color:var(--ink)}
.flist .ft b{color:var(--ink)}
.dl li::before,.checks li::before{border-color:var(--ink)}
.pill{background:transparent;border:1px solid var(--ink-3);color:var(--ink-2)}
.pill.navy{background:transparent;border-color:var(--ink);color:var(--ink)}
.alert{background:#F4F2EC;border:1px solid var(--line-2);color:var(--ink)}
.alert svg{color:var(--ink)}
.alert a{color:var(--ink)}
.month{color:var(--ink);font-weight:900}
.badge{color:var(--ink);border-color:var(--ink)}
.price .top-p .l{color:var(--ink-3)}
.promise-box{border-left-color:var(--ink)}
.doc .pdf{background:var(--ink)}
.step .n{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.lead-word{color:var(--ink)}
.story h3{color:var(--ink-3)}
.tiny-warn{background:#F4F2EC;color:var(--ink)}

@media (max-width:720px){
  .dl .foot{flex-direction:column;align-items:stretch}
  .dl .foot .btn{justify-content:center}
  .docs{grid-template-columns:1fr}
  .pager button{font-size:14px;padding:9px 12px}
  .flist{grid-template-columns:1fr}
  .price-body .btn{width:100%;justify-content:center}
  .top .bar{padding-left:20px;padding-right:20px}
  .nav{justify-content:space-between;width:100%}
  .nav a{margin-left:0}
}