/* 오더판 — 소개 사이트
 *
 * 누가 보나
 *   30~50대 사장. 대부분 폰으로, 현장에서 아니면 저녁에.
 *   40대 넘으면 노안이 오기 시작한다. 그렇다고 큰 글씨가 필요한 건 아니다.
 *   촌스러우면 오히려 안 믿는다. 그게 이 독자다.
 *
 * 그래서 어떻게 했나
 *   기본을 17px 로 올렸다 (흔한 16px 는 폰에서 작다).
 *   더 필요한 사람은 두 단계 키울 수 있게 했다 — 눈에 안 띄는 자리에 조용히 둔다.
 *
 *   짜임은 견적서·거래명세서에서 빌렸다. 이 분들이 매일 보는 종이다.
 *   굵은 라벨, 선으로 나눈 칸, 큰 숫자. 장식이 아니라 정보 조직 자체가 디자인이다.
 *   이 분들에게 익숙한 짜임이고, 요즘 랜딩이 다 둥근 카드라 오히려 새롭다.
 *
 * 지킨 것
 *   본문 대비 7:1 이상 (WCAG AAA). 옅은 회색 본문은 쓰지 않는다.
 *   누르는 것은 최소 48px. 장갑 낀 손으로도 눌린다.
 *   글꼴 굵기 400 밑으로 안 내려간다. 얇은 글씨는 화면에서 사라진다.
 */
:root{
  --paper:#EFEFEA; --card:#fff; --ink:#131519;
  /* 종이 위 7.6:1 — 본문 보조로 써도 되는 진하기 */
  --ink2:#454B52;
  /* 5.2:1 — 라벨과 주석까지만. 본문에는 안 쓴다 */
  --dim:#666C73;
  --line:#D6D8D0; --line2:#C4C7BE;
  --hi:#E8F337; --hi-deep:#A9B300;
  --navy:#17395E; --orange:#C2410C; --green:#1B6B45;
  /* doc.css 의 경고 줄이 이걸 쓴다. 없으면 border-color 가 글자색이 되어
     빨간 띠가 그냥 까만 줄로 나온다. 약관·개인정보 페이지의 주의 문단이다. */
  --red:#B23B2E;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --max:1060px;
  --scale:1;
}
/* 글자 크기 — 독자가 고른다. 세 단계면 충분하다. */
html[data-size="l"]{--scale:1.12}
html[data-size="xl"]{--scale:1.26}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}}

body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:calc(17px * var(--scale));line-height:1.68;
  -webkit-font-smoothing:antialiased;text-size-adjust:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
/* -.04em 은 폰에서 글자가 붙어 보인다. 제목도 숨 쉬게 둔다. */
h1,h2,h3{letter-spacing:-.02em;line-height:1.28;margin:0;font-weight:800}
b,strong{font-weight:700}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:720px}
/* 한글은 한 줄 34자 안쪽이 읽기 좋다 */
.reading{max-width:34em}

/* 눈에 안 보이지만 화면낭독기는 읽는다 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--hi);color:var(--ink);
  padding:14px 20px;font-weight:800;z-index:100;border-radius:0 0 6px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* ─────────────────────────────────────────────────── 누르는 것
   최소 높이 50px. 장갑 낀 손으로도 눌려야 한다. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 22px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);
  border-radius:5px;font-weight:700;font-size:calc(16px * var(--scale));
  font-family:inherit;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 3px 0 var(--ink)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.hi{background:var(--hi);border-color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.onDark{background:transparent;color:#fff;border-color:#fff}
.btn.onDark:hover{box-shadow:0 4px 0 #fff}
.btn.big{min-height:56px;padding:0 28px;font-size:calc(17px * var(--scale));font-weight:800}
.btn.full{width:100%}

/* ─────────────────────────────────────────────────── 상단바 */
.nav{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;
  border-bottom:2px solid #000}
.navin{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap;padding:8px 0}
.brand{font-size:calc(23px * var(--scale));font-weight:800;letter-spacing:-.03em;color:#fff}
.brand span{color:var(--hi)}
.navlinks{display:flex;gap:20px;font-size:calc(16px * var(--scale));font-weight:700;color:#D8DBD4}
.navlinks a{padding:8px 0;border-bottom:2px solid transparent}
.navlinks a:hover{color:#fff;border-bottom-color:var(--hi)}
.navright{margin-left:auto;display:flex;gap:10px;align-items:center}
@media (max-width:760px){.navlinks{display:none}}

/* 글자 크기 고르기 */
.sizepick{display:flex;align-items:center;gap:0;border:1px solid #3E444B;border-radius:5px;overflow:hidden}
.sizepick b{font-size:11px;font-weight:700;color:#868C86;padding:0 7px;letter-spacing:.06em}
.sizepick button{min-width:38px;min-height:36px;border:0;border-left:1px solid #3E444B;
  background:transparent;color:#D8DBD4;font-family:inherit;font-weight:800;cursor:pointer;line-height:1}
.sizepick button:first-of-type{border-left:0}
.sizepick button[aria-pressed="true"]{background:var(--hi);color:var(--ink)}
.sizepick .s1{font-size:13px}.sizepick .s2{font-size:16px}.sizepick .s3{font-size:19px}

/* ─────────────────────────────────────────────────── 히어로 */
.hero{background:var(--ink);color:#fff;padding:56px 0 64px}
.herogrid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
@media (max-width:900px){.herogrid{grid-template-columns:1fr;gap:36px}}

.eyebrow{display:inline-block;font-size:calc(14px * var(--scale));font-weight:800;
  letter-spacing:.1em;color:var(--ink);background:var(--hi);padding:6px 12px;border-radius:4px;
  margin-bottom:20px}
.hero h1{font-size:calc(46px * var(--scale));line-height:1.16;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--hi)}
@media (max-width:600px){.hero h1{font-size:calc(35px * var(--scale))}}
.lead{font-size:calc(20px * var(--scale));color:#DDE0DA;line-height:1.65;margin-bottom:30px}
.herobtns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.herobtns.center{justify-content:center}
.micro{font-size:calc(16px * var(--scale));color:#B4BAB3}
.micro b{color:var(--hi)}

/* 폰 미리보기 — 실제 화면을 그대로 축소한 것 */
.phone{background:var(--paper);border-radius:18px;border:2px solid #000;overflow:hidden;
  box-shadow:0 18px 0 -6px rgba(0,0,0,.35)}
.ph-top{background:var(--ink);padding:14px 15px 0}
.ph-brand{font-size:17px;font-weight:800;color:#fff}
.ph-brand span{color:var(--hi)}
.ph-board{margin:10px -15px 0;padding:9px 15px;background:var(--hi);color:var(--ink);
  display:flex;gap:14px;font-size:13px;font-weight:700}
.ph-board b{font-family:var(--mono);font-size:16px}
.ph-body{padding:12px;display:flex;flex-direction:column;gap:10px}
.ph-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px}
.ph-card.urgent{border-left:5px solid var(--orange)}
.ph-card.low{opacity:.55}
.ph-tags{display:flex;gap:6px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.ph-tags .t{font-size:11px;font-weight:700;background:#E7E9E2;padding:3px 7px;border-radius:3px}
.ph-tags .t.hi{background:var(--orange);color:#fff}
.ph-tags .left{margin-left:auto;font-size:11px;font-weight:700;color:var(--orange)}
.ph-tags .left.calm{color:var(--dim)}
.ph-title{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:7px}
.ph-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--ink2)}
.ph-price b{font-family:var(--mono);font-size:19px;color:var(--ink)}
.ph-price .vs{margin-left:auto;font-size:11px;font-weight:700;padding:2px 6px;border-radius:3px}
.ph-price .vs.up{background:#DCEFE4;color:var(--green)}
.ph-price .vs.mid{background:#E7E9E2;color:var(--ink2)}
.ph-price .vs.dn{background:#F7DED2;color:var(--orange)}
.ph-meta{font-size:12px;color:var(--ink2);margin-top:7px}
.ph-fill{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;color:var(--ink2)}
.ph-fill i{width:16px;height:7px;background:var(--ink);border-radius:2px;display:block}
.ph-fill i.e{background:var(--line2)}
.ph-fill em{font-style:normal;color:var(--orange);font-weight:700}
.ph-hidden{margin-top:7px;font-size:12px;color:var(--dim);border-top:1px dashed var(--line2);padding-top:7px}

/* ─────────────────────────────────────────────────── 섹션 */
.sec{padding:66px 0;border-top:1.5px solid var(--ink)}
.sec.dark{background:var(--ink);color:#fff;border-color:#000}
.sec.alt{background:#E6E7E1}
.sechead{margin-bottom:44px}
.sechead h2{font-size:calc(33px * var(--scale));margin-bottom:14px}
@media (max-width:600px){.sechead h2{font-size:calc(27px * var(--scale))}}
.sechead p{font-size:calc(18px * var(--scale));color:var(--ink2);max-width:34em}
.sec.dark .sechead p{color:#C8CCC5}
.sec.dark .eyebrow{background:var(--hi);color:var(--ink)}

/* ─────────────────────────────────────────────────── 인용
   실제로 올라온 글이다. 지어낸 게 아니라는 걸 보여야 한다. */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:44px}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}
blockquote{margin:0;background:#1E2126;border-left:5px solid var(--hi);
  border-radius:0 6px 6px 0;padding:22px 24px}
blockquote p{font-size:calc(18px * var(--scale));line-height:1.6;color:#F0F2EC}
blockquote cite{display:block;margin-top:12px;font-style:normal;
  font-size:calc(15px * var(--scale));color:#9CA29E;font-weight:600}

/* ─────────────────────────────────────────────────── 표 짜임
   견적서처럼. 번호와 제목이 한 줄, 설명이 그 밑. */
.rows{border-top:2px solid currentColor}
.row{display:grid;grid-template-columns:56px 1fr;gap:0 18px;
  padding:24px 0;border-bottom:1px solid var(--line)}
.sec.dark .row{border-bottom-color:#33383E}
.row .n{font-family:var(--mono);font-size:calc(22px * var(--scale));font-weight:700;
  color:var(--dim);line-height:1.3}
.sec.dark .row .n{color:var(--hi)}
.row h3{font-size:calc(21px * var(--scale));margin-bottom:8px}
.row p{font-size:calc(17px * var(--scale));color:var(--ink2);max-width:36em}
.sec.dark .row p{color:#C4C8C1}
@media (max-width:520px){.row{grid-template-columns:1fr;gap:6px}
  .row .n{font-size:calc(15px * var(--scale))}}

/* ─────────────────────────────────────────────────── 카드 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.cardx{background:var(--card);border:1.5px solid var(--ink);border-radius:7px;padding:26px 24px}
.cardx h3{font-size:calc(21px * var(--scale));margin-bottom:12px;line-height:1.35}
.cardx p{font-size:calc(17px * var(--scale));color:var(--ink2)}
.cardx .cnum{font-family:var(--mono);font-size:calc(13px * var(--scale));font-weight:700;
  color:var(--ink);background:var(--hi);padding:4px 9px;border-radius:4px;
  display:inline-block;margin-bottom:14px;letter-spacing:.05em}

/* 종목별 단위 표 — 실제 표처럼 줄을 긋는다 */
.units{margin-top:18px;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.units div{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 14px;font-size:calc(16px * var(--scale));border-bottom:1px solid var(--line)}
.units div:last-child{border-bottom:0}
.units div:nth-child(odd){background:#F7F7F3}
.units b{font-family:var(--mono);font-weight:700;font-size:calc(16px * var(--scale))}
.units b.ex{font-family:inherit;font-size:calc(14px * var(--scale));color:var(--dim)}

.checks{list-style:none;margin:16px 0 0;padding:0}
.checks li{position:relative;padding:9px 0 9px 30px;font-size:calc(17px * var(--scale));
  color:var(--ink2);border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.checks li::before{content:'✓';position:absolute;left:0;top:9px;
  color:var(--green);font-weight:800;font-size:calc(18px * var(--scale))}

.fnote{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2);
  font-size:calc(16px * var(--scale));color:var(--ink2)}

/* 절차 — 화살표로 잇는다 */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.flow span{background:#F2F2ED;border:1px solid var(--line2);border-radius:5px;
  padding:9px 12px;font-size:calc(15px * var(--scale));font-weight:700;line-height:1.35}
.flow span small{display:block;font-size:calc(13px * var(--scale));font-weight:500;color:var(--dim)}
.flow span.last{background:var(--hi);border-color:var(--hi-deep)}
.flow i{font-style:normal;color:var(--dim);font-weight:700}

/* ─────────────────────────────────────────────────── 단계 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1.5px solid var(--ink);border-radius:7px;padding:26px 24px}
.sn{width:46px;height:46px;border-radius:8px;background:var(--ink);color:var(--hi);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:calc(22px * var(--scale));font-weight:700;margin-bottom:16px}
.step h3{font-size:calc(21px * var(--scale));margin-bottom:10px}
.step p{font-size:calc(17px * var(--scale));color:var(--ink2);margin-bottom:18px}

.mock{background:#F7F7F3;border:1px solid var(--line2);border-radius:6px;padding:14px}
.mock .lb{font-size:calc(13px * var(--scale));font-weight:700;color:var(--dim);
  letter-spacing:.04em;margin-bottom:5px}
.mock .in{background:#fff;border:1px solid var(--line2);border-radius:4px;
  padding:11px 12px;font-size:calc(16px * var(--scale));font-weight:600;margin-bottom:12px}
.mock .go{background:var(--hi);border:2px solid var(--ink);border-radius:5px;
  padding:12px;text-align:center;font-weight:800;font-size:calc(16px * var(--scale))}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chips span{border:1px solid var(--line2);border-radius:100px;padding:6px 12px;
  font-size:calc(14px * var(--scale));font-weight:600;background:#fff}
.chips span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.mock .note{font-size:calc(14px * var(--scale));color:var(--dim)}
.arow{display:flex;align-items:center;gap:9px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:calc(16px * var(--scale))}
.arow:last-child{border-bottom:0}
.arow b{color:var(--green);font-size:calc(17px * var(--scale))}
.arow span{margin-left:auto;font-family:var(--mono);font-size:calc(14px * var(--scale));color:var(--dim)}

/* ─────────────────────────────────────────────────── 요금 */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:40px}
@media (max-width:820px){.plans{grid-template-columns:1fr}}
.plan{border:1.5px solid var(--ink);border-radius:7px;padding:30px 26px;background:var(--card)}
.plan.on{background:var(--hi);border-width:2.5px}
.plan.later{background:#F2F2ED;border-style:dashed;border-color:var(--line2)}
.pname{font-size:calc(16px * var(--scale));font-weight:800;letter-spacing:.06em;margin-bottom:10px}
.pprice{font-family:var(--mono);font-size:calc(56px * var(--scale));font-weight:700;
  line-height:1;margin-bottom:20px}
.pprice span{font-family:var(--sans);font-size:calc(22px * var(--scale));margin-left:4px}
.pprice.sm{font-family:var(--sans);font-size:calc(24px * var(--scale));font-weight:800}
.plan ul{list-style:none;margin:0 0 18px;padding:0}
.plan li{padding:10px 0;border-bottom:1px solid rgba(0,0,0,.12);font-size:calc(17px * var(--scale))}
.plan li:last-child{border-bottom:0}
.plan.later li{border-bottom-color:var(--line)}
.pnote{font-size:calc(16px * var(--scale));color:var(--ink2)}

.nope{border:1.5px solid var(--ink);border-radius:7px;overflow:hidden}
.nope h3{background:var(--ink);color:#fff;padding:16px 22px;font-size:calc(19px * var(--scale))}
.nopelist div{display:grid;grid-template-columns:1fr 1.6fr;gap:16px;padding:18px 22px;
  border-bottom:1px solid var(--line);background:var(--card)}
.nopelist div:last-child{border-bottom:0}
.nopelist b{font-size:calc(17px * var(--scale))}
.nopelist span{font-size:calc(16px * var(--scale));color:var(--ink2)}
@media (max-width:640px){.nopelist div{grid-template-columns:1fr;gap:5px}}

/* ─────────────────────────────────────────────────── 지키는 선 */
.legal{border-top:2px solid var(--ink)}
.legal div{display:grid;grid-template-columns:.9fr 1.6fr;gap:18px;padding:20px 0;
  border-bottom:1px solid var(--line)}
.legal b{font-size:calc(18px * var(--scale))}
.legal span{font-size:calc(16.5px * var(--scale));color:var(--ink2)}
@media (max-width:700px){.legal div{grid-template-columns:1fr;gap:6px}}

/* ─────────────────────────────────────────────────── 묻는 것 */
details{border:1.5px solid var(--ink);border-radius:7px;margin-bottom:10px;background:var(--card)}
details[open]{background:#FBFBF8}
summary{cursor:pointer;list-style:none;padding:20px 22px;font-weight:800;
  font-size:calc(19px * var(--scale));line-height:1.4;display:flex;gap:14px;align-items:flex-start;
  min-height:60px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';margin-left:auto;font-family:var(--mono);font-size:calc(26px * var(--scale));
  line-height:1;color:var(--ink);flex-shrink:0}
details[open] summary::after{content:'−'}
details p{padding:0 22px 22px;font-size:calc(17.5px * var(--scale));color:var(--ink2);max-width:38em}

/* ─────────────────────────────────────────────────── 마무리 */
.cta{background:var(--hi);color:var(--ink);padding:76px 0;text-align:center;
  border-top:2px solid var(--ink)}
.cta h2{font-size:calc(36px * var(--scale));margin-bottom:14px}
@media (max-width:600px){.cta h2{font-size:calc(28px * var(--scale))}}
.cta p{font-size:calc(19px * var(--scale));margin-bottom:28px}
.cta .micro{color:var(--ink2);margin-top:20px}
.cta .micro b{color:var(--ink);font-family:var(--mono)}

.foot{background:var(--ink);color:#C4C8C1;padding:52px 0 40px;font-size:calc(16px * var(--scale))}
.footin{display:grid;grid-template-columns:1.2fr .8fr 1.4fr;gap:36px}
@media (max-width:820px){.footin{grid-template-columns:1fr;gap:28px}}
.fdesc{margin-top:12px;line-height:1.7}
.flinks{display:flex;flex-direction:column;gap:4px}
.flinks a{padding:9px 0;font-weight:700;color:#E4E7E0;border-bottom:1px solid #2C3036}
.flinks a:hover{color:var(--hi)}
.fbiz p{line-height:1.7}
.fsmall{margin-top:14px;font-size:calc(14.5px * var(--scale));color:#8E948F}

/* ─────────────────────────────────────────────────── 폰
   360px 짜리 폰에서 한 줄이 36자가 된다. 한글은 25~35자가 읽기 좋다.
   여백을 조금 더 주고 제목을 줄인다. */
@media (max-width:420px){
  .wrap{padding:0 18px}
  body{font-size:calc(16.5px * var(--scale))}
  .sec{padding:52px 0}
  .sechead{margin-bottom:32px}
  .hero{padding:40px 0 48px}
  .lead{font-size:calc(18px * var(--scale))}

  /* 상단바 — 좁으면 두 줄로 내린다. 겹치는 것보다 낫다. */
  .navin{gap:10px}
  .brand{font-size:calc(20px * var(--scale))}
  .navright{gap:8px}
  .sizepick b{display:none}
  .btn{padding:0 16px;font-size:calc(15px * var(--scale))}
  .btn.big{min-height:54px;padding:0 20px;width:100%}
  .herobtns{flex-direction:column}
  .herobtns.center .btn{width:100%}

  .cardx,.step,.plan{padding:22px 18px}
  summary{padding:17px 18px;font-size:calc(17.5px * var(--scale))}
  details p{padding:0 18px 18px}
  .nopelist div,.legal div{padding:16px 0}
  .nope h3{padding:14px 18px}
  .nopelist div{padding:16px 18px}
}

/* 아주 좁은 폰 (320px) — 여기서도 안 깨져야 한다 */
@media (max-width:340px){
  .wrap{padding:0 14px}
  .hero h1{font-size:calc(30px * var(--scale))}
  .navlinks{display:none}
}