/* chammo. — 문서 페이지(개인정보처리방침·이용약관) 공용 스타일.
   랜딩 index.html의 디자인 토큰을 그대로 씁니다. */

:root{
  --paper:#F4F3E9;
  --parchment:#EBE9DB;
  --mist:#DAD7C6;
  --ink:#0A0A0A;
  --ash:rgba(10,10,10,0.55);
  --cta:#C2D044;
  --font-ko:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --wrap:720px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ko);
  font-weight:400;
  font-size:15px;
  line-height:1.75;
  letter-spacing:-0.008em;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--mist)}
a:hover{border-bottom-color:var(--ink)}

/* ── 상단 바 ── */
.doc-nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--wrap);margin:0 auto;padding:26px 24px 0;
}
.wm,.wm-sm{
  font-family:'Google Sans Flex','Pretendard Variable',Pretendard,sans-serif;
  font-weight:600;letter-spacing:-0.03em;text-transform:lowercase;
  color:var(--ink);border-bottom:none;
}
.wm{font-size:21px}
.wm-sm{font-size:16px}
.wm:hover,.wm-sm:hover{border-bottom:none;opacity:.7}
.doc-nav nav{display:flex;gap:16px;font-size:13px}
.doc-nav nav a{color:var(--ash);border-bottom:none}
.doc-nav nav a:hover{color:var(--ink)}
.doc-nav nav a[aria-current="page"]{color:var(--ink);font-weight:600}

/* ── 본문 ── */
.doc{max-width:var(--wrap);margin:0 auto;padding:44px 24px 88px}

.eyebrow{
  margin:0 0 10px;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ash);
}

h1{
  margin:0 0 10px;font-weight:600;font-size:30px;line-height:1.3;
  letter-spacing:-0.028em;
}

.meta{
  margin:0 0 30px;padding-bottom:26px;border-bottom:1px solid var(--mist);
  font-size:13px;color:var(--ash);
}

.lede{font-size:16px;line-height:1.8;margin:0 0 26px}

.callout{
  background:var(--parchment);border:1px solid var(--mist);border-radius:6px;
  padding:17px 19px;margin:0 0 38px;font-size:14px;line-height:1.7;color:var(--ash);
}
.callout b{color:var(--ink);font-weight:600}

h2{
  margin:44px 0 12px;font-weight:600;font-size:17px;line-height:1.45;
  letter-spacing:-0.018em;
}
h2::before{
  content:'';display:block;width:22px;height:1px;
  background:var(--ink);margin-bottom:13px;
}

p{margin:0 0 14px}
b,strong{font-weight:600}

ul{margin:0 0 14px;padding-left:0;list-style:none}
ul li{position:relative;padding-left:15px;margin-bottom:7px}
ul li::before{
  content:'';position:absolute;left:2px;top:.72em;
  width:3px;height:3px;border-radius:50%;background:var(--ink);opacity:.45;
}

table{
  width:100%;border-collapse:collapse;margin:0 0 16px;
  font-size:14px;
}
table th,table td{
  border:1px solid var(--mist);padding:10px 13px;text-align:left;vertical-align:top;
}
table thead th{background:var(--parchment);font-weight:600}
table tbody th{background:var(--parchment);font-weight:500;white-space:nowrap;width:34%}

/* ── 짧은 안내 페이지 (접수 완료 / 접수 실패) ── */
.note{
  max-width:560px;margin:0 auto;
  min-height:70vh;padding:96px 24px 48px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
}
.note .wm{font-size:21px;margin-bottom:44px}
.note h1{font-size:32px;margin-bottom:16px}
.note h1::after{
  content:'';display:block;width:26px;height:2px;background:var(--cta);margin-top:16px;
}
.note .lede{font-size:17px;line-height:1.75;margin:0 0 20px}
.note .sub{font-size:14.5px;line-height:1.85;color:var(--ash);margin:0 0 16px}
.note .sub b{color:var(--ink)}
.note .back{margin:26px 0 0;font-size:14px}
.note .back a{color:var(--ash);border-bottom:none}
.note .back a:hover{color:var(--ink)}

@media (max-width:640px){
  .note{padding:64px 20px 40px;min-height:60vh}
  .note h1{font-size:26px}
}

/* ── 하단 ── */
.doc-foot{
  border-top:1px solid var(--mist);
  max-width:var(--wrap);margin:0 auto;padding:26px 24px 48px;
  display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ash);
}
.doc-foot div{display:flex;flex-direction:column;gap:5px}
.doc-foot div:last-child{text-align:right;align-items:flex-end}
.doc-foot a{color:var(--ash)}
.doc-foot a:hover{color:var(--ink)}

@media (max-width:640px){
  h1{font-size:25px}
  .doc{padding:34px 20px 66px}
  .doc-nav{padding:20px 20px 0;flex-direction:column;align-items:flex-start;gap:12px}
  table{display:block;overflow-x:auto}
  .doc-foot{padding:22px 20px 40px}
  .doc-foot div:last-child{text-align:left;align-items:flex-start}
}