/* 올인원 영어 — 화면 모양(목업). 버튼·카드·표 스타일은 이 파일 하나에 모은다. */
:root{
  --green:#1f6b58; --green-dark:#185646; --green-soft:#e7f1ec; --green-line:#cfe3d9;
  --bg:#f5f7f4; --card:#ffffff; --line:#e3e8e3; --line-strong:#cfd6cf;
  --text:#1e2a26; --muted:#6b7570; --faint:#9aa39e;
  --warn-bg:#fff7db; --warn-line:#f0dc94; --warn-text:#7a5a00;
  --err:#b8372a; --err-bg:#fdecea;
  --radius:12px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* .btn 같은 display 지정보다 숨김이 먼저 */
html,body{margin:0;height:100%}
body{font-family:Pretendard,"Pretendard Variable",-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{color:var(--green)}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

/* ── 전체 틀 ── */
.app{display:flex;min-height:100vh}
.side{width:192px;flex:0 0 192px;background:#fff;border-right:1px solid var(--line);padding:18px 10px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}   /* 메뉴는 화면에 고정 — 로그아웃이 스크롤 없이 늘 맨 아래에 보임 */
.logo{display:flex;align-items:center;gap:10px;padding:4px 8px 24px;font-weight:800;font-size:17px;color:var(--text);text-decoration:none}
.logo .mark{width:32px;height:32px;border-radius:8px;background:var(--green);color:#fff;display:grid;place-items:center;
  font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:700}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:var(--text);text-decoration:none;margin-bottom:4px}
.nav a:hover{background:#f1f5f2}
.nav a.on{background:var(--green-soft);font-weight:700}
.nav svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.6}
.nav hr{border:0;border-top:1px solid var(--line);margin:12px 4px}
.side .spacer{flex:1}
.side .logout{font-size:12.5px;color:var(--muted);padding:10px 12px;border-top:1px solid var(--line);flex:none}
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px;font-size:12.5px;color:var(--muted)}
.content{width:100%;max-width:960px;margin:0 auto;padding:26px 20px 60px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:22px}
.pagehead h1{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:0}
.pagehead .sub{color:var(--muted);margin-top:6px}

/* ── 카드·칸 ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;margin-bottom:16px}
.card h2{font-size:15px;font-weight:800;margin:0 0 14px}
.cardhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cardhead h2{margin:0}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:16px;align-items:start}
.field{display:block;font-weight:700;font-size:13px;margin:0 0 6px}
input[type=text],input[type=password],textarea,select{width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;outline:none}
input[type=text]:focus,input[type=password]:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #1f6b5822}
textarea{resize:vertical;min-height:104px}
.sec{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px;margin:16px 0 10px}
.sec::after{content:"";flex:1;border-top:1px solid var(--line)}
.card > h2 + div > .sec:first-child{margin-top:0}   /* 카드 첫 소제목만 위 여백 없음 */
.radios{display:flex;flex-wrap:wrap;gap:6px 16px}
.radios label,.checks label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
input[type=radio],input[type=checkbox]{accent-color:var(--green);width:15px;height:15px;margin:0}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.note{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.includes{margin:0;padding:0;list-style:none}
.includes li{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:13.5px}
.includes li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 6px}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:9px;border:1px solid var(--green);
  background:var(--green);color:#fff;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--green-dark)}
.btn:disabled{background:#9db7ae;border-color:#9db7ae;cursor:default}
.btn.ghost{background:#fff;color:var(--text);border-color:var(--line-strong);font-weight:700}
.btn.ghost:hover{background:#f3f6f3}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:7px}
.btn.link{background:none;border:0;color:var(--text);padding:4px 6px;font-weight:700}
.btn.link:hover{background:#f1f5f2}
.btn.icon{background:#fff;border:1px solid var(--line-strong);color:var(--muted);padding:3px 8px;font-size:12px;font-weight:600;border-radius:6px}
.btn.icon:disabled{opacity:.4}
.btn.dl{padding:5px 11px;font-size:12px;border-radius:7px}

/* ── 지문 카드 ── */
.pcard{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;background:#fff}
.prow{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.prow .field{margin:0}
.prow input.pid{width:96px}
.prow .tools{margin-left:auto;display:flex;gap:4px}
.wc{font-size:12px;color:var(--muted);margin:5px 0 10px}
.pmsg{font-size:12.5px;margin-top:6px}
.pmsg .bad{color:var(--err)}
.pmsg .okmsg{color:var(--green)}
.addrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── 제작 막대 ── */
.makebar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.makebar .est{color:var(--muted);font-size:13px}
.makebar .msg{font-size:13px;margin-top:4px}
.makebar .msg.err{color:var(--err);white-space:pre-wrap}
.makebar .msg.ok{color:var(--green);font-weight:700}
.modes{margin-top:2px}
.modes label.off{color:var(--faint)}

/* ── 내 주문 ── */
.tblwrap{overflow-x:auto}
table.orders{width:100%;border-collapse:collapse;font-size:13px}
table.orders th{font-size:12px;color:var(--muted);font-weight:700;text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.orders td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.orders td.num{text-align:right;white-space:nowrap}
table.orders td.ttl{min-width:150px}
.check details.fold{color:var(--warn-text)}
table.orders tr:last-child td{border-bottom:0}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.tag.wait{background:#eef1ee;color:#5d6a64}
.tag.run{background:#e3eefb;color:#2557a7}
.tag.done{background:var(--green-soft);color:var(--green)}
.tag.error{background:var(--err-bg);color:var(--err)}
.stage{font-size:12px;color:var(--muted);margin-top:4px}
.errline{font-size:12px;color:var(--err);margin-top:4px}
.check{margin-top:8px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-text);border-radius:8px;padding:7px 9px;font-size:12px}
.check b{display:block;margin-bottom:2px}
details.fold{margin-top:6px;font-size:12px;color:var(--muted)}
details.fold summary{cursor:pointer;font-weight:700}
details.fold .body{margin-top:4px}
details.fold table{border-collapse:collapse;margin-top:4px}
details.fold th,details.fold td{padding:2px 6px;border-bottom:1px solid var(--line);font-size:12px;text-align:left}
details.fold td.n{text-align:right}
.files{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.files .gone{font-size:12px;color:var(--faint)}
.files .exp{width:100%;font-size:11.5px;color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:28px 0}
.muted{color:var(--muted)}

/* ── 로그인 ── */
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.login .logo{padding:0 0 26px}
.login form{width:min(360px,92vw)}
.login .err{color:var(--err);font-size:13px;margin-top:10px}
.login .btn{width:100%;margin-top:12px;padding:12px}
.login .foot{margin-top:40px;font-size:11.5px;letter-spacing:1.5px;color:var(--muted)}

/* ── 좁은 화면(휴대폰): 메뉴는 위로, 카드는 위아래로 ── */
@media (max-width:820px){
  .app{flex-direction:column}
  .side{width:auto;flex:none;flex-direction:row;align-items:center;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line);gap:4px;
    position:static;height:auto;overflow:visible}
  .nav{overflow-x:auto;flex:1;min-width:0}      /* 메뉴만 옆으로 밀리고 로그아웃은 오른쪽 끝에 늘 보임 */
  .logo{padding:0 8px 0 2px;font-size:15px}
  .logo .mark{width:28px;height:28px;font-size:16px}
  .logo .name{display:none}
  .nav{display:flex;gap:2px}
  .nav a{margin:0;padding:8px 10px;white-space:nowrap;font-size:13px}
  .nav svg{display:none}
  .nav hr,.side .spacer{display:none}
  .side .logout{margin-left:6px;white-space:nowrap;border-top:0;padding:6px 4px}
  .top{height:42px;padding:0 16px}
  .content{padding:18px 14px 50px}
  .pagehead h1{font-size:24px}
  .grid2{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr 1fr}
}

/* ── 공개 페이지·회원·관리자 (8단계) ── */
body.pub{display:flex;flex-direction:column;min-height:100vh}
.pubhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 28px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pubhead .logo{padding:0}
.pubhead nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pubhead nav a{color:var(--text);text-decoration:none;font-weight:600}
.pubhead nav a.btn{color:#fff}
.pubmain{width:100%;max-width:960px;margin:0 auto;padding:26px 20px 50px;flex:1}
form.inline{display:inline}
.hero{padding:30px 6px 26px}
.hero h1{font-size:32px;letter-spacing:-.6px;margin:0 0 12px}
.hero .sub{color:var(--muted);font-size:15px;max-width:640px;margin:0 0 18px}
.card.narrow{max-width:440px;margin:30px auto}
.card.form{max-width:640px}
.card.form .field{margin-top:12px}
.card.form .btn{margin-top:14px}
.btn.wide{width:100%;margin-top:14px;padding:12px}
.btn.danger{background:var(--err);border-color:var(--err)}
.err{color:var(--err);font-size:13px;margin-top:10px}
.grid2even{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.docbody h1{font-size:24px;margin:0 0 6px}.docbody h2{font-size:17px;margin:22px 0 8px}.docbody p,.docbody li{line-height:1.7}
.docbody blockquote{margin:0 0 12px;color:var(--muted);font-size:13px}
table.doc{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 12px}
table.doc th,table.doc td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
table.doc th{background:#f6f8f6;font-weight:700;white-space:nowrap}
.consent{border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:14px;background:#fbfcfb}
.docbox{max-height:220px;overflow:auto;font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:8px}
.docbox h1{font-size:15px;margin:4px 0}.docbox table.doc{font-size:12px}
label.chk{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer}
.badge-n{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--err);color:#fff;font-size:11.5px;font-weight:700;text-align:center}
.check.bad{background:var(--err-bg);border-color:#f2c2bd;color:var(--err)}
.check.ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.check{margin-bottom:10px}
code{background:#f1f3f1;padding:1px 6px;border-radius:5px;font-size:14px}
.bizfoot{border-top:1px solid var(--line);background:#fff;padding:14px 28px;font-size:11.5px;color:var(--muted)}
.bizrow{display:flex;flex-wrap:wrap;gap:4px 16px;margin:2px 0}
.bizrow a{color:var(--muted)}
.bizrow b{color:var(--text);font-weight:600;margin-right:3px}
.side .logout + .logout{border-top:0;padding-top:4px}
@media (max-width:820px){ .pubhead{padding:10px 14px} .pubmain{padding:18px 14px 40px} .grid2even{grid-template-columns:1fr} .bizfoot{padding:12px 14px} }
.cardhead form.inline{display:flex;gap:6px;align-items:center}.cardhead form.inline input{width:220px}
.brandprev{margin-top:12px}.brandprev .bp{display:flex;justify-content:space-between;border-top:1px solid #bbb;padding:6px 4px 0;margin-top:4px;font-size:12px;color:#555}.brandprev .bp span:first-child{color:#8A3F00;font-weight:700}
ul.plain{margin:4px 0 10px;padding-left:18px;font-size:13.5px;line-height:1.7}
table.doc th.num,table.doc td.num{text-align:right}