/* ==========================================================================
   더한메이드 — 약관 페이지 공용 스타일
   메인 사이트(index.html)의 디자인 토큰·헤더·푸터를 그대로 재사용합니다.
   ========================================================================== */

:root{
  --sage:#1F9D63;
  --sage-dark:#178050;
  --sage-tint:#EAF7F0;
  --ink:#151515;
  --muted:#6B6E64;
  --muted2:#9A9D95;
  --line:#E7E9E3;
  --bg:#FAFAF9;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}
a{color:inherit;}
.wrap{max-width:960px;margin:0 auto;padding:0 24px;width:100%;}

/* Header (index.html과 동일) */
header{
  position:sticky;top:0;z-index:20;
  overflow:hidden;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.1) 35%, rgba(255,255,255,0.2) 55%, rgba(250,250,249,0.12) 100%);
  backdrop-filter:saturate(220%) blur(9px);
  -webkit-backdrop-filter:saturate(220%) blur(9px);
  border-bottom:1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.75) inset,
    0 -1px 0 rgba(255,255,255,0.12) inset,
    0 10px 30px rgba(0,0,0,0.06);
}
header::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 22%);
  pointer-events:none;
}
header .wrap{position:relative;z-index:1;height:64px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;}
.brand .logo{width:28px;height:28px;display:block;object-fit:contain;}
.brand span{font-weight:700;font-size:15px;letter-spacing:-0.02em;}
nav{display:flex;align-items:center;gap:4px;}
nav a{
  position:relative;
  padding:8px 14px;border-radius:999px;
  font-size:14px;font-weight:500;
  color:#8A8D85;text-decoration:none;
  transition:color .2s, background-color .2s, font-weight .2s;
}
nav a.active{
  color:var(--sage-dark);
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(31,157,99,0.14));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 6px rgba(0,0,0,0.04);
  font-weight:700;
}

/* Legal sub-nav (탭) */
.legal-subnav{
  position:sticky;top:64px;z-index:15;
  background:rgba(250,250,249,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.legal-subnav .wrap{display:flex;gap:4px;padding-top:6px;padding-bottom:6px;}
.legal-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  font-size:13.5px;font-weight:500;
  color:#8A8D85;text-decoration:none;
  transition:color .2s, background-color .2s, font-weight .2s;
}
.legal-tab svg{width:15px;height:15px;flex-shrink:0;}
.legal-tab.active{
  color:var(--sage-dark);
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(31,157,99,0.14));
  font-weight:700;
}
.legal-tab:hover:not(.active){color:var(--ink);}

/* Page header */
.legal-hero{padding-top:48px;padding-bottom:8px;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--sage-dark);margin:0 0 12px;text-transform:uppercase;}
.legal-hero h1{font-size:26px;line-height:1.4;font-weight:800;letter-spacing:-0.02em;margin:0 0 8px;}
.legal-hero .legal-date{font-size:13px;color:var(--muted2);margin:0;}

/* Content */
.legal-content{padding-top:32px;padding-bottom:88px;}
.legal-intro{
  font-size:14px;line-height:1.75;color:var(--muted);
  border:1px solid var(--line);border-radius:16px;background:#fff;
  padding:20px 24px;margin-bottom:8px;
}
.legal-article{display:flex;flex-direction:column;gap:0;}
.legal-article section{
  padding:28px 0;
  border-top:1px solid rgba(0,0,0,0.04);
}
.legal-article section:first-child{border-top:none;}
.legal-article h2{
  font-size:16px;font-weight:800;letter-spacing:-0.02em;
  margin:0 0 12px;scroll-margin-top:140px;
  display:flex;align-items:baseline;gap:8px;
}
.legal-article h2 .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:999px;
  background:var(--sage);color:#fff;font-size:11px;font-weight:800;
  flex-shrink:0;
}
.legal-article h2 .label{color:var(--ink);}
.legal-article p,
.legal-article li{font-size:14px;line-height:1.75;color:var(--muted);}
.legal-article p + p{margin-top:8px;}
.legal-article strong{color:var(--ink);font-weight:700;}
.legal-article ul,.legal-article ol{margin:8px 0;padding-left:20px;}
.legal-article li{margin-bottom:4px;}
.legal-article ul ul,.legal-article ol ul{margin-top:4px;}
.legal-article table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px;}
.legal-article th,.legal-article td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
.legal-article th{background:var(--sage-tint);font-weight:700;color:var(--sage-dark);}
.legal-article td{color:var(--muted);}
.legal-article code{
  display:inline-block;margin-top:6px;background:var(--sage-tint);color:var(--sage-dark);
  padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.6;word-break:break-all;
}
.legal-article a.legal-link{color:var(--sage-dark);text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.legal-addendum{font-size:13px;color:var(--muted2);}
.legal-note{font-size:13px;line-height:1.6;color:var(--muted2);margin-top:6px;}

footer{border-top:1px solid var(--line);margin-top:0;}
footer .wrap{padding:40px 24px;font-size:12px;color:var(--muted2);display:flex;flex-direction:column;gap:12px;}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}
.footer-links a{font-weight:500;color:var(--muted);text-decoration:none;}
.footer-links a:hover{color:var(--sage-dark);}

@media (max-width:640px){
  .legal-hero h1{font-size:22px;}
  .legal-subnav .wrap{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;}
  .legal-subnav .wrap::-webkit-scrollbar{display:none;}
}