/* ============================================================
   산로그 (Sanlog) — 웹사이트 공용 스타일
   목업 SDS 기반. 따뜻한 종이 팔레트, 색은 의미가 있을 때만.
   ============================================================ */

:root{
  /* Surfaces */
  --page:#F2F1EC;
  --card:#FFFFFF;
  --sheet:#F4F3EF;
  --line:#ECE9E2;
  --line-2:#E1DDD3;

  /* Text (warm taupe) */
  --t-strong:#4D463F;
  --t-title:#574F49;
  --t-body:#88827C;
  --t-muted:#ADA89F;
  --t-faint:#C7C2B9;

  /* Buttons / action */
  --taupe:#6F6863;
  --taupe-press:#5F5854;
  --pill:#F1EFEA;
  --pill-press:#E8E5DD;

  /* Gold — 정상 축하 전용 */
  --gold:#F2A21C;
  --gold-lt:#FED04F;
  --gold-txt:#8C6E38;
  --gold-soft:#FBF1D9;

  /* Mood / accents */
  --leaf:#AED36A;
  --leaf-deep:#9DC94F;
  --leaf-soft:#EDF6D8;
  --pink:#F6AEB6;
  --pink-deep:#EF93A0;
  --pink-soft:#FCE7E9;
  --sage:#C3C9C0;
  --sage-soft:#E7EAE5;
  --brown:#8E7A6B;
  --focus:#7B92E2;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  --e1:0 1px 2px rgba(76,68,60,.05), 0 6px 18px rgba(76,68,60,.06);
  --e2:0 4px 16px rgba(76,68,60,.10);
  --e3:0 20px 50px rgba(76,68,60,.16);

  --font:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --display:'Fredoka','Pretendard',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --wrap:1080px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font);
  background:var(--page);
  color:var(--t-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  min-height:100vh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
svg{ shape-rendering:auto; }

/* ---- 공통 래퍼 ---- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(242,241,236,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; gap:16px;
  height:62px;
}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--t-strong);
}
.brand-flag{ width:22px; height:22px; flex-shrink:0; }
.brand-name{
  font-family:var(--display); font-weight:600; font-size:21px;
  letter-spacing:-.01em; color:var(--t-strong);
}
.head-nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.head-nav a{
  text-decoration:none; color:var(--t-body); font-weight:600; font-size:14.5px;
  padding:8px 12px; border-radius:var(--r-sm);
  transition:background .15s, color .15s;
}
.head-nav a:hover{ background:var(--pill); color:var(--t-strong); }
.head-nav a.head-cta{
  background:var(--taupe); color:#fff; padding:8px 16px;
}
.head-nav a.head-cta:hover{ background:var(--taupe-press); color:#fff; }
@media (max-width:640px){
  .head-nav a.nav-doc{ display:none; }
  .brand-name{ font-size:19px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font); font-weight:700; font-size:16px;
  padding:14px 26px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .12s, background .15s, box-shadow .15s, color .15s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--taupe); color:#fff; box-shadow:var(--e1); }
.btn-primary:hover{ background:var(--taupe-press); }
.btn-ghost{ background:var(--card); color:var(--t-strong); border-color:var(--line-2); box-shadow:var(--e1); }
.btn-ghost:hover{ background:var(--sheet); }
.btn .ic{ width:20px; height:20px; }
.btn[aria-disabled="true"]{ opacity:.55; pointer-events:none; }

/* focus ring — 접근성 */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:6px;
}

/* ============================================================
   HERO (랜딩)
   ============================================================ */
.hero{ padding:52px 0 30px; }
.hero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-txt);
  background:var(--gold-soft); padding:6px 14px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; gap:7px; margin-bottom:22px;
}
.eyebrow .dot{ width:7px; height:7px; background:var(--gold); border-radius:50%; }
.hero h1{
  font-weight:800; color:var(--t-strong);
  font-size:clamp(30px, 6.2vw, 52px); line-height:1.18; letter-spacing:-.02em;
  max-width:18ch; word-break:keep-all; text-wrap:balance;
}
.hero h1 .em{ color:var(--leaf-deep); }
.hero .lede{
  margin-top:18px; font-size:clamp(16px,2.4vw,19px); color:var(--t-body);
  max-width:36ch; line-height:1.7; word-break:keep-all; text-wrap:pretty;
}
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:30px; }
.hero-note{ margin-top:14px; font-size:13px; color:var(--t-muted); }

/* 픽셀 히어로 아트 */
.hero-art{
  width:100%; max-width:760px; margin:40px auto 0;
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--e3); border:1px solid var(--line-2);
  background:#C6E6F4;
}
.hero-art svg{ width:100%; height:auto; display:block; image-rendering:pixelated; }
.pxbubble{ animation:pxfloat 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes pxfloat{ 0%,100%{ transform:translateY(0); opacity:.95; } 50%{ transform:translateY(-4px); opacity:1; } }
.pxdot{ animation:pxblink 1.4s steps(1) infinite; }
@keyframes pxblink{ 0%,60%{ opacity:1; } 61%,100%{ opacity:.25; } }
@media (prefers-reduced-motion:reduce){
  .pxbubble, .pxdot{ animation:none !important; }
}

/* ============================================================
   STAT STRIP
   ============================================================ */
.stat-strip{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  margin-top:44px;
}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 26px; min-width:150px; box-shadow:var(--e1); text-align:center;
}
.stat .num{ font-family:var(--display); font-weight:700; font-size:30px; color:var(--leaf-deep); line-height:1; }
.stat .num.gold{ color:var(--gold); }
.stat .num.pink{ color:var(--pink-deep); }
.stat .lab{ margin-top:7px; font-size:13px; color:var(--t-muted); font-weight:600; }

/* ============================================================
   SECTION
   ============================================================ */
.section{ padding:70px 0; }
.section-head{ text-align:center; max-width:44ch; margin:0 auto 44px; }
.section-kicker{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--t-muted);
}
.section-title{
  margin-top:10px; font-weight:800; color:var(--t-title);
  font-size:clamp(24px,4vw,34px); letter-spacing:-.02em; line-height:1.25;
  word-break:keep-all; text-wrap:balance;
}
.section-sub{ margin-top:14px; font-size:16px; color:var(--t-body); word-break:keep-all; text-wrap:pretty; }

/* 기능 카드 */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:820px){ .features{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }
.feature{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:30px 26px 28px; box-shadow:var(--e1);
  transition:transform .18s, box-shadow .18s;
}
.feature:hover{ transform:translateY(-3px); box-shadow:var(--e2); }
.feature .glyph{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  margin-bottom:18px;
}
.feature .glyph svg{ width:44px; height:44px; image-rendering:pixelated; }
.g-summit{ background:var(--gold-soft); }
.g-chat{ background:var(--sage-soft); }
.g-echo{ background:var(--pink-soft); }
.feature h3{ font-size:19px; font-weight:800; color:var(--t-title); letter-spacing:-.01em; }
.feature p{ margin-top:10px; font-size:15px; color:var(--t-body); line-height:1.65; }

/* 정상존 미리보기 카드 */
.echo-preview{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
@media (max-width:820px){ .echo-preview{ grid-template-columns:1fr; max-width:460px; margin:8px auto 0; } }
.echo-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--e1);
}
.echo-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.echo-av{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:14px; color:#fff; flex-shrink:0;
}
.echo-name{ font-weight:700; font-size:14px; color:var(--t-strong); }
.echo-meta{ font-size:12px; color:var(--t-muted); }
.echo-body{ font-size:15px; color:var(--t-body); line-height:1.6; }
.echo-tag{
  display:inline-flex; align-items:center; gap:5px; margin-top:14px;
  font-size:12px; font-weight:700; color:var(--pink-deep);
  background:var(--pink-soft); padding:4px 11px; border-radius:var(--r-pill);
}

/* ============================================================
   APP SHOWCASE (실제 앱 스크린샷)
   ============================================================ */
.showcase{ padding:70px 0 60px; overflow:hidden; }
.phone-strip{
  display:flex; gap:26px; padding:8px 22px 26px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.phone-strip::-webkit-scrollbar{ display:none; }
.phone-item{ scroll-snap-align:center; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; width:236px; }
.phone{
  width:236px; border-radius:38px; background:#2E2A26; padding:9px;
  box-shadow:var(--e3); border:1px solid rgba(0,0,0,.06);
}
.phone img{ width:100%; height:auto; aspect-ratio:720/1561; border-radius:30px; display:block; background:var(--page); }
.phone-cap{ margin-top:18px; text-align:center; }
.phone-cap .k{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--leaf-deep);
}
.phone-cap .t{ margin-top:6px; font-size:15px; font-weight:700; color:var(--t-title); word-break:keep-all; }
.phone-cap .d{ margin-top:4px; font-size:13px; color:var(--t-muted); word-break:keep-all; max-width:22ch; }
.strip-hint{ text-align:center; font-size:12.5px; color:var(--t-faint); margin-top:2px; }
@media (min-width:1100px){
  .phone-strip{ justify-content:center; flex-wrap:nowrap; }
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{ padding:20px 0 80px; }
.cta-box{
  background:linear-gradient(160deg,#5A544E,#6F6863);
  color:#fff; border-radius:var(--r-xl); padding:56px 40px; text-align:center;
  box-shadow:var(--e2); position:relative; overflow:hidden;
}
.cta-box h2{ font-weight:800; font-size:clamp(24px,4vw,34px); letter-spacing:-.02em; line-height:1.28; word-break:keep-all; text-wrap:balance; }
.cta-box p{ margin-top:14px; color:rgba(255,255,255,.78); font-size:16px; }
.cta-box .hero-cta{ margin-top:28px; }
.cta-box .btn-primary{ background:var(--gold); color:#4D3A12; }
.cta-box .btn-primary:hover{ background:var(--gold-lt); }
.cta-box .btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.2); box-shadow:none; }
.cta-box .btn-ghost:hover{ background:rgba(255,255,255,.2); }
.cta-box .hero-note{ color:rgba(255,255,255,.6); }
.cta-flag{
  position:absolute; right:-6px; bottom:-8px; width:120px; opacity:.16;
  image-rendering:pixelated; pointer-events:none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{ background:var(--sheet); border-top:1px solid var(--line); padding:44px 0 40px; }
.foot-grid{ display:flex; flex-wrap:wrap; gap:30px 60px; align-items:flex-start; }
.foot-brand{ max-width:280px; }
.foot-brand .brand{ margin-bottom:12px; }
.foot-brand p{ font-size:13.5px; color:var(--t-muted); line-height:1.65; }
.foot-col h4{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t-muted); margin-bottom:14px;
}
.foot-col a{
  display:block; text-decoration:none; color:var(--t-body); font-size:14px; font-weight:600;
  padding:5px 0; transition:color .15s;
}
.foot-col a:hover{ color:var(--t-strong); }
.foot-bottom{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  font-size:12.5px; color:var(--t-faint);
}
.foot-bottom .sep{ color:var(--line-2); }

/* ============================================================
   DOC PAGE (개인정보 / 약관)
   ============================================================ */
.doc{ padding:48px 0 80px; }
.doc-wrap{ max-width:760px; margin:0 auto; }
.doc-head{ margin-bottom:34px; padding-bottom:26px; border-bottom:1px solid var(--line-2); }
.doc-head .eyebrow{ margin-bottom:16px; background:var(--sage-soft); color:var(--t-body); }
.doc-head .eyebrow .dot{ background:var(--sage); }
.doc-head h1{ font-weight:800; color:var(--t-strong); font-size:clamp(26px,4.5vw,38px); letter-spacing:-.02em; word-break:keep-all; }
.feature h3, .faq-item summary, .cta-box p, .contact-band h3{ word-break:keep-all; }
.doc-head .meta{ margin-top:12px; font-size:13.5px; color:var(--t-muted); }
.doc-note{
  background:var(--gold-soft); border:1px solid #EDD9A8; border-radius:var(--r-md);
  padding:14px 18px; font-size:13.5px; color:var(--gold-txt); line-height:1.6; margin-bottom:32px;
}
.doc-body h2{
  font-weight:800; color:var(--t-title); font-size:20px; letter-spacing:-.01em;
  margin:38px 0 14px; scroll-margin-top:80px;
}
.doc-body h3{ font-weight:700; color:var(--t-strong); font-size:16px; margin:22px 0 10px; }
.doc-body p{ font-size:15px; color:var(--t-body); line-height:1.75; margin:10px 0; }
.doc-body ul, .doc-body ol{ margin:10px 0 10px 22px; }
.doc-body li{ font-size:15px; color:var(--t-body); line-height:1.75; margin:6px 0; }
.doc-body strong{ color:var(--t-strong); }
.doc-body a{ color:var(--leaf-deep); font-weight:600; }
.doc-table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
.doc-table th, .doc-table td{ border:1px solid var(--line-2); padding:11px 14px; text-align:left; vertical-align:top; }
.doc-table th{ background:var(--sheet); color:var(--t-strong); font-weight:700; }
.doc-table td{ color:var(--t-body); }
.toc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 24px; margin-bottom:30px; box-shadow:var(--e1);
}
.toc h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-muted); margin-bottom:12px; }
.toc ol{ margin-left:20px; }
.toc a{ color:var(--t-body); text-decoration:none; font-size:14px; font-weight:600; line-height:2; }
.toc a:hover{ color:var(--leaf-deep); }

/* ============================================================
   FAQ (아코디언 — JS 없이 details/summary)
   ============================================================ */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-cat{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t-muted); margin:26px 0 4px 4px;
}
.faq-cat:first-child{ margin-top:0; }
.faq-item{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--e1); overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 20px;
  display:flex; align-items:center; gap:14px;
  font-weight:700; font-size:16px; color:var(--t-strong);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .q-mark{
  width:26px; height:26px; flex-shrink:0; border-radius:8px;
  background:var(--leaf-soft); color:var(--leaf-deep);
  display:grid; place-items:center; font-weight:800; font-size:14px;
}
.faq-item summary .chev{ margin-left:auto; width:18px; height:18px; color:var(--t-muted); transition:transform .2s; flex-shrink:0; }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-a{ padding:0 20px 20px 60px; }
.faq-a p{ font-size:15px; color:var(--t-body); line-height:1.75; margin:6px 0; }
.faq-a a{ color:var(--leaf-deep); font-weight:600; }
@media (max-width:640px){ .faq-a{ padding-left:20px; } }

/* 문의 배너 */
.contact-band{
  max-width:760px; margin:44px auto 0; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:38px 30px; box-shadow:var(--e1);
}
.contact-band h3{ font-size:20px; font-weight:800; color:var(--t-title); }
.contact-band p{ margin-top:10px; font-size:15px; color:var(--t-body); }
.contact-band a.mail{
  display:inline-block; margin-top:18px; font-weight:700; color:var(--leaf-deep);
  font-size:16px; text-decoration:none;
}
.contact-band a.mail:hover{ text-decoration:underline; }

/* 페이지 상단 back */
.doc-back{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  color:var(--t-muted); font-weight:600; font-size:14px; margin-bottom:24px;
}
.doc-back:hover{ color:var(--t-strong); }
.doc-back svg{ width:16px; height:16px; }