/* ════════════════════════════════════════════════════════════════════════
   saiiya-home.css — 공식 홈(/home) v2 전용 스타일. 2026-08-30

   ⚠️ 이 파일은 saiiya.css / saiiya-dashboard.css / layout/wb-tokens 와
      **아무것도 공유하지 않는다.** 화이트보드 팔레트(보드·종이·테이프·손글씨)와
      다른 디자인 언어라 섞이면 둘 다 망가진다.
      토큰은 --sy-, 클래스는 .sy- 로 접두사를 붙여 충돌을 막는다.

   ⚠️ 폰트를 /css/fonts/ 에 두는 이유 — SecurityConfig 와 SiteAccess 의
      permitAll 목록에 /fonts/** 가 없다. /css/** 는 있다.
      /fonts/ 에 두면 비로그인 방문자에게 폰트가 302 로 막혀 글꼴이 안 뜬다.

   ── 수치의 출처 ──
   아래 값은 전부 home_mock.png(5000×20094)를 **1440 폭으로 환산해 픽셀로 잰 것**이다.
   눈대중이 아니다. 헤더 구분선 1330px · 본문 구분선 1250px · 모눈 28.6px 처럼
   목업에서 직접 읽은 값이라, 고칠 때는 목업을 다시 재고 고쳐야 한다.

   ⚠️ 글자 크기는 **글줄의 잉크 높이가 아니라 글줄의 폭**으로 역산했다.
      목업이 크게 내보내진 이미지라 잉크 높이는 앤티에일리어싱 때문에 15~25% 부풀어 있다.
      높이로 재면 본문이 22px 로 나오지만 실제는 17px 이다.

   근거 문서: saiiya/docs/design/home/1.md · 2-questions.md · 3-mobile-rules.md
   ════════════════════════════════════════════════════════════════════════ */

/* ── 폰트 ─────────────────────────────────────────────────────────────
   제공받은 Pretendard OTF 5종을 KS X 1001(한글 2350자) + 영문 + 기호로
   서브셋해 woff2 로 변환한 것. 1,537KB → 190KB.
   드문 음절은 시스템 폰트로 자연스럽게 떨어진다. */
@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/pretendard-regular.woff2') format('woff2')}
@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/pretendard-medium.woff2') format('woff2')}
@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/pretendard-semibold.woff2') format('woff2')}
@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/pretendard-bold.woff2') format('woff2')}
@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/pretendard-extrabold.woff2') format('woff2')}

/* ── 토큰 ───────────────────────────────────────────────────────────── */
:root{
  /* 색 — 목업 실측 */
  --sy-bg:#ffffff;
  --sy-ink:#313233;
  --sy-muted:#595757;
  --sy-muted-2:#666565;
  --sy-accent:#d26161;
  --sy-accent-dark:#bf4f3b;
  --sy-pink-300:#f3a7a8;
  --sy-pink-200:#fadcdb;
  --sy-pink-100:#fce7e6;
  --sy-grid:#fdf3f3;
  --sy-rule:#c5b5b4;        /* 헤더 구분선 */
  --sy-rule-soft:#e3d6d6;   /* 기능 절 구분선 */

  /* 상태 색 — 공지 배너에서 먼저 필요해져 여기서 정했다(2026-08-31).
     전부 바탕 위 글자로 AA 를 통과한다(info 10.84 · success 5.44 · warning 6.04 · danger 5.80).
     폼을 옮길 때 오류·도움말도 이 네 쌍을 쓴다. 새로 만들지 말 것. */
  --sy-info-bg:#fce7e6;     --sy-info-fg:#313233;
  --sy-success-bg:#e6f0e7;  --sy-success-fg:#2f6b42;
  --sy-warning-bg:#fbf0d9;  --sy-warning-fg:#7a5312;
  --sy-danger-bg:#f9dedb;   --sy-danger-fg:#9c2f22;

  --sy-font:'PretendardLocal','Pretendard',-apple-system,BlinkMacSystemFont,
            'Segoe UI','Noto Sans KR',sans-serif;
  /* 손글씨는 지금 쓰지 않는다(2-questions Q10). 폰트를 받으면 이 한 줄만 바꾸면 된다. */
  --sy-hand:var(--sy-font);

  /* 글자 크기 — 목업의 글줄 폭에서 역산했다.
     전체를 키우거나 줄이려면 이 블록만 고치면 된다. */
  --sy-fs-display:60px;   /* H1 */
  --sy-fs-title:52px;     /* 밴드 h2 · HOW IT WORKS h2 · 마감 h2 */
  --sy-fs-head:37px;      /* 기능 h3 */
  --sy-fs-store:28px;     /* 스토어 버튼 */
  --sy-fs-nav:20px;
  --sy-fs-lead:20px;      /* 히어로 리드 · 밴드 보조문 · 마감 보조문 */
  --sy-fs-body:18px;      /* HOW IT WORKS 본문 */
  --sy-fs-small:17px;     /* 기능 본문 */
  --sy-fs-kicker:16px;    /* eyebrow · HOW IT WORKS */
  --sy-fs-chip:15px;
  --sy-fs-label:13px;     /* 기능 넘버 라벨 */

  /* 치수 */
  --sy-container:1250px;   /* 기능 절 구분선이 이 폭으로 그어진다 */
  --sy-header-w:1330px;    /* 헤더 구분선은 본문보다 넓다 */
  --sy-inset:86px;         /* 컨테이너 안쪽 좌우 여백. 구분선은 이걸 무시한다 */
  --sy-header-h:184px;
  --sy-pitch:28.6px;       /* 모눈 한 칸 */
  --sy-pad:24px;           /* 화면 가장자리 최소 여백 */
  --sy-read:760px;         /* 긴 글 읽기 폭. 한국어 17px 에서 한 줄 40자 안팎 */
  --sy-guide:1000px;       /* 안내 화면 폭. 표 3열·카드 3장이 들어가는 최소 */
  --sy-illust-w:700px;
  --sy-illust-h:325px;
}

/* ── 리셋 ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block}

/* ── 뼈대 ───────────────────────────────────────────────────────────── */
.sy{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--sy-bg);color:var(--sy-ink);
  font-family:var(--sy-font);font-weight:500;
  line-height:1.6;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
.sy a{color:inherit;text-decoration:none}
.sy-main{flex:1 0 auto}

/* 모눈 — 헤더 아래부터 깔린다. 헤더 위는 흰 바탕이다. */
.sy-grid-bg{
  background-image:
    linear-gradient(var(--sy-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--sy-grid) 1px,transparent 1px);
  background-size:var(--sy-pitch) var(--sy-pitch);
  background-position:center top;
}

/* 컨테이너 — 구분선은 이 폭 끝까지, 내용은 --sy-inset 만큼 안쪽으로 */
.sy-wrap{width:min(var(--sy-container),100% - var(--sy-pad)*2);margin-inline:auto}

/* ══ 헤더 ═══════════════════════════════════════════════════════════ */
.sy-topbar{flex:0 0 auto;background:var(--sy-bg)}
.sy-topbar-in{
  width:min(var(--sy-header-w),100% - var(--sy-pad)*2);margin-inline:auto;
  height:var(--sy-header-h);
  display:flex;align-items:center;gap:24px;
  border-bottom:1px solid var(--sy-rule);
}
.sy-logo{flex:0 0 auto;margin-inline-start:67px}
.sy-logo img{height:67px;width:auto}

.sy-nav{margin-inline-start:auto;display:flex;align-items:center;gap:44px;
  font-size:var(--sy-fs-nav);font-weight:700;color:var(--sy-muted);letter-spacing:-.02em}
.sy-nav a{padding:6px 2px}
.sy-nav a:hover{color:var(--sy-accent)}

/* 상태별 진입 버튼 — 목업에는 없지만 빼면 로그인한 사람이 앱으로 돌아갈 문이
   사라진다(2-questions Q2). 목업의 각진 사각 언어를 그대로 따른다. */
.sy-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin-inline-start:40px}
.sy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:52px;padding:0 22px;border-radius:0;white-space:nowrap;
  font-family:inherit;font-size:17px;font-weight:700;letter-spacing:-.02em;
  background:var(--sy-accent);color:#fff;border:1px solid var(--sy-accent);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.sy-btn:hover{background:var(--sy-accent-dark);border-color:var(--sy-accent-dark);color:#fff}
.sy-btn--ghost{background:transparent;color:var(--sy-ink);border-color:var(--sy-rule)}
.sy-btn--ghost:hover{background:transparent;color:var(--sy-accent);border-color:var(--sy-accent)}

/* ══ 히어로 ═════════════════════════════════════════════════════════ */
.sy-hero{position:relative;padding:76px 0 88px;overflow:hidden}
.sy-hero-in{position:relative;text-align:center}

.sy-eyebrow{margin:0 0 8px;font-size:var(--sy-fs-kicker);font-weight:500;
  color:var(--sy-muted-2);letter-spacing:-.02em}

.sy-h1{
  position:relative;display:inline-block;
  margin:0 0 32px;font-family:var(--sy-hand);
  font-size:var(--sy-fs-display);font-weight:800;line-height:1.4;letter-spacing:-.025em;
  color:var(--sy-muted);word-break:keep-all;
}
.sy-h1 em{font-style:normal;color:var(--sy-accent)}
/* H1 오른쪽 어깨의 하트 — 목업 42×50, 첫 줄 끝에서 살짝 위 */
.sy-h1 .sy-heart{position:absolute;top:-16px;right:-54px;width:42px;height:auto}

.sy-lead{margin:0 0 29px;font-size:var(--sy-fs-lead);font-weight:500;line-height:1.65;
  color:var(--sy-ink);word-break:keep-all}

.sy-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.sy-cta .sy-btn{height:52px;min-width:189px;padding:0 26px;font-size:var(--sy-fs-lead);gap:14px}
.sy-cta .sy-btn::after{content:"";width:0;height:0;
  border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

/* 말풍선 장식 — 한 장을 좌우 반전해 두 개로 쓴다.
   .sy-hero-in(= 컨테이너) 기준이다. 화면 기준으로 두면 넓은 모니터에서 본문과 떨어진다.
   목업: 좌 225×63 @ 컨테이너 좌+82 / 히어로 상단+160,  우 225×64 @ 컨테이너 우-117 / +337 */
.sy-bubble{position:absolute;width:225px;height:auto;pointer-events:none;user-select:none}
.sy-bubble--l{left:82px;top:84px}
.sy-bubble--r{right:117px;top:261px;transform:scaleX(-1)}

/* 목업의 줄바꿈. 폰 폭에서는 사라져 자연스럽게 흐른다.
   태그 앞뒤 줄바꿈이 공백이 되므로 숨겨져도 단어가 붙지 않는다. */
.sy-br{display:inline}

/* ══ 핑크 밴드 ══════════════════════════════════════════════════════
   목업의 두 밴드는 높이가 같지만(480px) 안쪽 여백이 다르다. */
.sy-band{background:var(--sy-pink-200);padding:143px 0 103px;text-align:center}
.sy-band h2{margin:0;font-family:var(--sy-hand);
  font-size:var(--sy-fs-title);font-weight:700;line-height:1.5;letter-spacing:-.03em;
  color:var(--sy-muted);word-break:keep-all}
.sy-band em{font-style:normal;color:var(--sy-accent);font-weight:800}

/* '사이야는' 앞에 붙는 하트 — 글자 왼쪽 어깨에 얹힌다(목업 44×60) */
.sy-band .sy-lede{position:relative;display:inline-block}
.sy-band .sy-lede .sy-heart{position:absolute;left:-40px;top:-46px;width:51px;height:auto}

.sy-band--private{padding:130px 0 134px}
.sy-band--private .sy-kicker{color:var(--sy-accent);margin:0 0 28px;font-size:14px}
.sy-band-sub{margin:24px 0 0;font-size:var(--sy-fs-lead);font-weight:500;line-height:1.5;
  color:var(--sy-muted-2);word-break:keep-all}

/* ══ HOW IT WORKS ═══════════════════════════════════════════════════ */
.sy-howto{padding:112px 0 0;text-align:center}
.sy-kicker{margin:0 0 55px;font-size:var(--sy-fs-kicker);font-weight:800;letter-spacing:.06em;
  color:var(--sy-accent)}
.sy-howto h2{margin:0 0 30px;font-family:var(--sy-hand);
  font-size:var(--sy-fs-title);font-weight:700;line-height:1.48;letter-spacing:-.03em;
  color:var(--sy-ink);word-break:keep-all}
.sy-howto p{margin:0;font-size:var(--sy-fs-body);font-weight:500;line-height:1.67;
  color:var(--sy-muted-2);word-break:keep-all}
/* 아래로 이어지는 세로선 */
.sy-howto::after{content:"";display:block;width:1px;height:60px;margin:68px auto 0;
  background:var(--sy-accent);opacity:.3}

/* ══ 기능 6절 ═══════════════════════════════════════════════════════
   ⚠️ 첫 절에도 위 구분선이 있다(목업 y=1867). :first-child 로 지우지 말 것. */
.sy-features{padding:75px 0 0}
/* ⚠️ 세로 여백이 거의 없다. 목업에서 블록 높이(441~480)와 일러스트 높이(427~459)의
   차이가 14~23px 뿐이다 — 즉 **일러스트가 블록 높이를 정하고** 글은 그 안에서 가운데 선다.
   여기에 60px 씩 패딩을 주면 블록마다 100px 씩 길어져 페이지 전체가 늘어난다. */
.sy-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--sy-illust-w));
  gap:24px;align-items:center;
  padding:62px 0 70px;
  border-top:1px solid var(--sy-rule-soft);
}
.sy-feat-text{padding-inline-start:var(--sy-inset);padding-inline-end:16px}

.sy-feat-no{margin:0 0 40px;font-size:var(--sy-fs-label);font-weight:600;color:var(--sy-muted-2)}
.sy-feat-no b{font-weight:800;color:var(--sy-accent);margin-inline-end:6px}

.sy-feature h3{margin:0 0 12px;font-family:var(--sy-hand);
  font-size:var(--sy-fs-head);font-weight:800;line-height:1.46;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-feature p{margin:0;font-size:var(--sy-fs-small);font-weight:500;line-height:1.7;
  color:var(--sy-muted-2);word-break:keep-all}

/* 01 아래의 기간 칩 — 목업 93×31, 간격 29 */
.sy-chips{display:flex;gap:29px;flex-wrap:wrap;margin:22px 0 0}
.sy-chip{display:inline-flex;align-items:center;height:31px;padding:0 26px;
  background:var(--sy-pink-200);color:var(--sy-accent);
  font-size:var(--sy-fs-chip);font-weight:800;letter-spacing:-.02em}

/* 목업은 일러스트를 **폭이 아니라 높이**로 맞춘다(427~459px). 그래서 그림마다 폭이 다르다
   (01 574 · 02 666 · 05 661). 폭으로 맞추면 가로로 긴 지도·프로필이 혼자 작아진다. */
.sy-illust{position:relative;display:grid;place-items:center}
.sy-illust img{height:var(--sy-illust-h);width:auto;max-width:100%;margin-inline:auto}

/* ══ 마감 CTA ═══════════════════════════════════════════════════════ */
.sy-store{padding:128px 0 150px;text-align:center}
.sy-store h2{margin:0 0 22px;font-family:var(--sy-hand);
  font-size:var(--sy-fs-title);font-weight:700;line-height:1.4;letter-spacing:-.03em;
  color:var(--sy-ink);word-break:keep-all}
.sy-store h2 em{font-style:normal;color:var(--sy-accent)}
.sy-store p{margin:0 0 86px;font-size:var(--sy-fs-lead);font-weight:500;color:var(--sy-muted-2)}

/* 목업 389×103, 간격 52 */
.sy-stores{display:flex;justify-content:center;gap:52px;flex-wrap:wrap}
.sy-store-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  width:389px;height:103px;background:var(--sy-pink-200);color:var(--sy-ink);
  font-size:var(--sy-fs-store);font-weight:600;letter-spacing:-.02em;
  box-shadow:7px 7px 0 rgba(49,50,51,.06);
  transition:transform .15s,box-shadow .15s;
}
.sy-store-btn:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 rgba(49,50,51,.06)}
.sy-store-btn svg{flex:0 0 auto;width:42px;height:42px}
/* 앱 출시 전 — 링크가 아직 없다(2-questions Q3). 눌리지 않게 두되 모양은 같다. */
.sy-store-btn[aria-disabled="true"]{cursor:default}
.sy-store-btn[aria-disabled="true"]:hover{transform:none;box-shadow:7px 7px 0 rgba(49,50,51,.06)}

/* ══ 푸터 ═══════════════════════════════════════════════════════════ */
.sy-footer{flex:0 0 auto;background:var(--sy-bg);border-top:1px solid var(--sy-rule-soft)}
.sy-footer-in{
  width:min(var(--sy-header-w),100% - var(--sy-pad)*2);margin-inline:auto;
  padding:48px 67px 56px;
  display:flex;gap:28px 48px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
}
/* ⚠️ align-items:flex-start 가 없으면 로고가 눌린다.
   세로 flex 컨테이너의 기본값은 align-items:stretch 라, 이미지가 가로 축(교차축)으로
   저작권 문구 너비만큼 늘어난다 — height 는 34px 로 고정돼 있으니 비율이 깨져 납작해진다.
   width:auto 는 stretch 를 이기지 못한다. */
.sy-foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sy-foot-brand img{height:34px;width:auto;flex:0 0 auto}
.sy-foot-copy{font-size:14px;font-weight:500;color:var(--sy-muted-2)}
.sy-foot-links{display:flex;flex-wrap:wrap;gap:12px 26px;
  font-size:15px;font-weight:600;color:var(--sy-muted)}
.sy-foot-links a{white-space:nowrap}
.sy-foot-links a:hover{color:var(--sy-accent)}

/* ══════════════════════════════════════════════════════════════════════
   반응형 — 근거는 saiiya/docs/design/home/3-mobile-rules.md
   ══════════════════════════════════════════════════════════════════════ */

/* 태블릿 — 2단은 유지하되 여백과 글자를 줄인다 */
@media (max-width:1180px){
  :root{
    --sy-fs-display:48px; --sy-fs-title:40px; --sy-fs-head:30px; --sy-fs-store:22px;
    --sy-fs-nav:16px; --sy-fs-lead:18px; --sy-fs-body:16px; --sy-fs-small:16px;
    --sy-inset:40px; --sy-header-h:132px; --sy-illust-w:460px; --sy-illust-h:300px;
  }
  .sy-logo{margin-inline-start:0}
  .sy-logo img{height:48px}
  .sy-nav{gap:24px}
  .sy-actions{margin-inline-start:24px}
  .sy-btn{height:46px;font-size:15px}
  .sy-cta .sy-btn{height:48px;min-width:168px}
  .sy-hero{padding:56px 0 76px}
  .sy-bubble{width:170px}
  .sy-bubble--l{left:24px;top:64px}
  .sy-bubble--r{right:24px;top:210px}
  .sy-band{padding:76px 0 92px}
  .sy-band--private{padding:92px 0 100px}
  .sy-howto{padding:84px 0 0}
  .sy-store{padding:92px 0 104px}
  .sy-store p{margin-bottom:56px}
  .sy-store-btn{width:300px;height:82px}
  .sy-footer-in{padding:40px 32px 44px}
}

/* 좁은 태블릿 — 여기서 1단으로 접는다. 일러스트가 위로 간다 */
@media (max-width:860px){
  :root{
    --sy-fs-display:40px; --sy-fs-title:30px; --sy-fs-head:26px;
    --sy-fs-lead:16px; --sy-fs-body:15px; --sy-fs-small:15px; --sy-fs-kicker:14px;
    --sy-inset:24px; --sy-pad:18px;
  }
  .sy-bubble{display:none}          /* 1단에서는 좌우 여백이 없어 글자 위로 올라온다 */
  .sy-h1 .sy-heart{width:30px;top:-10px;right:-36px}
  .sy-band .sy-lede .sy-heart{width:32px;left:-28px;top:-38px}
  .sy-howto::after{height:64px;margin-top:44px}
  .sy-features{padding:44px 0 0}
  .sy-feature{grid-template-columns:minmax(0,1fr);gap:28px;padding:52px 0 44px}
  .sy-feature{align-items:stretch}
  .sy-feat-text{padding-inline:var(--sy-inset)}
  .sy-illust{order:-1;padding-inline:var(--sy-inset)}
  .sy-illust img{height:auto;width:100%;max-width:420px;margin-inline:auto}
}

/* 폰 — 390px 기준 */
@media (max-width:600px){
  :root{
    --sy-fs-display:31px; --sy-fs-title:24px; --sy-fs-head:22px; --sy-fs-store:17px;
    --sy-fs-nav:12.5px; --sy-fs-lead:15px; --sy-fs-body:14px; --sy-fs-small:14px;
    --sy-fs-kicker:13px; --sy-fs-label:12px; --sy-fs-chip:13px;
    --sy-pitch:20px; --sy-header-h:64px; --sy-pad:16px; --sy-inset:16px;
  }
  .sy-br{display:none}              /* 목업 줄바꿈 해제 — 좁은 폭에서 넘친다 */
  .sy-topbar-in{gap:10px}
  .sy-logo img{height:32px}
  /* nav 를 숨기지 않는다 — 숨기면 구독·이용안내·고객센터로 가는 길이 푸터에만 남는다. */
  .sy-nav{gap:12px;font-weight:600}
  .sy-nav a{padding:4px 0}
  .sy-actions{display:none}         /* 대신 히어로 CTA 가 그 역할을 한다 */
  .sy-hero{padding:40px 0 48px}
  .sy-h1{margin-bottom:20px}
  .sy-h1 .sy-heart{width:22px;top:-8px;right:-26px}
  .sy-lead{line-height:1.8;margin-bottom:26px}
  .sy-cta .sy-btn{height:48px;min-width:0;width:100%;max-width:280px}
  .sy-band{padding:52px 0 56px}
  .sy-band h2{line-height:1.55}
  .sy-band--private{padding:56px 0 60px}
  .sy-band--private .sy-kicker{margin-bottom:18px;font-size:12px}
  .sy-band-sub{margin-top:16px}
  .sy-band .sy-lede .sy-heart{width:24px;left:-20px;top:-28px}
  .sy-howto{padding:52px 0 0}
  .sy-howto h2{margin-bottom:18px}
  .sy-howto::after{height:44px;margin-top:30px}
  .sy-kicker{margin-bottom:18px}
  .sy-features{padding:30px 0 0}
  .sy-feature{padding:36px 0 32px;gap:22px}
  .sy-feat-no{margin-bottom:16px}
  .sy-feature h3{margin-bottom:12px}
  .sy-chips{gap:10px;margin-top:18px}
  .sy-chip{height:29px;padding:0 15px}
  .sy-illust img{height:auto;width:100%;max-width:280px}
  .sy-store{padding:56px 0 64px}
  .sy-store h2{margin-bottom:14px}
  .sy-store p{margin-bottom:32px}
  .sy-stores{gap:14px}
  .sy-store-btn{width:100%;max-width:280px;height:60px;box-shadow:4px 4px 0 rgba(49,50,51,.06)}
  .sy-store-btn svg{width:24px;height:24px}
  .sy-footer-in{padding:30px 16px 36px;gap:20px}
  .sy-foot-brand img{height:26px}
  .sy-foot-links{font-size:13px;gap:8px 16px}
}

/* 폴더블 커버(≈280px) — 헤더 4항목이 안 들어간다 */
@media (max-width:360px){
  .sy-nav{gap:9px;font-size:11.5px}
  .sy-logo img{height:28px}
}

@media (prefers-reduced-motion:reduce){
  .sy-store-btn{transition:none}
  .sy-store-btn:hover{transform:none}
}


/* ══════════════════════════════════════════════════════════════════════
   공지 배너 · 이벤트 팝업 — layout/notices 파티션의 v2 대응
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 마크업과 JS 는 layout/notices.html 하나뿐이다(닫기 정책·localStorage 키가 거기 있다).
      복사하지 말고 여기서 색만 덮는다.

   ⚠️ 선택자에 body 를 붙인 이유 — notices 파티션이 <body> 안에서 자기 <style> 을
      다시 깔기 때문에, 같은 특이도면 나중에 온 그쪽이 이긴다.
      `.sy-banner.sev-INFO`(0,2,0) 를 이기려면 `body .sy-banner.sev-INFO`(0,2,1) 가 필요하다.

   ⚠️ 파티션은 화이트보드 토큰을 var(--paper, 폴백) 형태로 읽는다.
      v2 는 그 이름을 정의하지 않으므로 **폴백(크림색·벽돌색)이 그대로 나온다.**
      아래가 없으면 흰 바탕 위에 화이트보드 색 배너·팝업이 뜬다.
   ────────────────────────────────────────────────────────────────────── */

body .sy-banner{
  font-family:var(--sy-font);font-size:14px;font-weight:600;
  letter-spacing:-.015em;border-bottom:1px solid var(--sy-rule-soft);
}
body .sy-banner.sev-INFO{background:var(--sy-info-bg);color:var(--sy-info-fg)}
body .sy-banner.sev-WARNING{background:var(--sy-warning-bg);color:var(--sy-warning-fg)}
body .sy-banner.sev-CRITICAL{background:var(--sy-danger-bg);color:var(--sy-danger-fg)}

body .sy-popup{
  background:var(--sy-bg);color:var(--sy-ink);
  border:1px solid var(--sy-rule);border-radius:0;
  box-shadow:8px 8px 0 rgba(49,50,51,.10);
}
body .sy-popup-title{
  font-family:var(--sy-font);font-size:21px;font-weight:800;
  letter-spacing:-.03em;color:var(--sy-ink);
}
body .sy-popup-text{font-size:15px;line-height:1.7;color:var(--sy-muted-2)}
body .sy-popup-btn{
  background:var(--sy-accent);border:1px solid var(--sy-accent);color:#fff;
  border-radius:0;font-family:var(--sy-font);font-size:15px;font-weight:700;padding:13px;
}
body .sy-popup-btn:hover{background:var(--sy-accent-dark);border-color:var(--sy-accent-dark);opacity:1}
body .sy-popup-foot{background:var(--sy-pink-100);border-top:1px solid var(--sy-rule-soft)}
body .sy-popup-foot button{font-family:var(--sy-font);font-size:13px;color:var(--sy-muted-2)}
body .sy-popup-foot button:hover{color:var(--sy-accent)}

/* 강조 펄스가 화이트보드 벽돌색으로 번진다 — 로즈로 바꾼다 */
@keyframes syPopupPulse{
  0%,100%{box-shadow:8px 8px 0 rgba(49,50,51,.10)}
  50%{box-shadow:8px 8px 0 rgba(49,50,51,.10),0 0 0 3px color-mix(in srgb,var(--sy-accent) 55%,transparent)}
}


/* ══════════════════════════════════════════════════════════════════════
   안내 상자 .sy-callout
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 기존 화면의 `.sy-alert` 와 **다른 이름을 쓴다.** `.sy-alert` 는 auth·policy 등이
      각자 인라인으로 정의하고 있어, 같은 이름을 쓰면 한 화면에 두 뜻이 생긴다.
   색은 --sy-{info,success,warning,danger}-{bg,fg} 네 쌍을 그대로 쓴다. */
.sy-callout{
  display:block;padding:16px 20px;border-left:3px solid currentColor;
  font-size:15px;font-weight:600;line-height:1.7;word-break:keep-all;
  background:var(--sy-info-bg);color:var(--sy-info-fg);
}
.sy-callout--success{background:var(--sy-success-bg);color:var(--sy-success-fg)}
.sy-callout--warning{background:var(--sy-warning-bg);color:var(--sy-warning-fg)}
.sy-callout--danger{background:var(--sy-danger-bg);color:var(--sy-danger-fg)}
/* ⚠️ margin 이 아예 없어 위 요소에 딱 붙었다. 절 간격(52px)보다는 작아야
   "같은 이야기의 덧붙임" 으로 읽힌다. */
.sy-callout{margin:26px 0}
.sy-callout:last-child{margin-bottom:0}
/* 기본(정보) 막대가 currentColor = 거의 검정이라 문서 생성기의 note 상자처럼 보였다.
   상태 변형은 제 색을 그대로 쓴다. */
.sy-callout{border-inline-start-color:var(--sy-accent)}
.sy-callout--success,.sy-callout--warning,.sy-callout--danger{
  border-inline-start-color:currentColor}

/* ══════════════════════════════════════════════════════════════════════
   긴 글 .sy-doc — 약관 · 개인정보 처리방침
   ══════════════════════════════════════════════════════════════════════
   본문은 어드민이 쓴 글을 PolicyRenderer 가 만든 HTML 이다.
   ⚠️ 렌더러가 내보내는 태그는 h2 · ul · li · p · br · b **여섯 개뿐**이다.
      링크·표·이미지는 일부러 넣지 않았다 — 아래 CSS 도 그 여섯에 맞춰져 있다.
   ────────────────────────────────────────────────────────────────────── */
.sy-doc-wrap{width:min(var(--sy-read),100% - var(--sy-pad)*2);margin-inline:auto;
  padding:72px 0 96px}
.sy-doc-title{margin:0 0 10px;font-family:var(--sy-hand);
  font-size:44px;font-weight:800;line-height:1.3;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-doc-meta{margin:0 0 36px;font-size:14px;font-weight:500;color:var(--sy-muted-2);
  font-variant-numeric:tabular-nums}
.sy-doc-wrap .sy-callout{margin:0 0 36px}

.sy-doc{font-size:17px;font-weight:500;line-height:1.9;color:var(--sy-ink);word-break:keep-all}
.sy-doc h2{
  margin:52px 0 14px;padding-top:26px;border-top:1px solid var(--sy-rule-soft);
  font-size:23px;font-weight:800;line-height:1.5;letter-spacing:-.03em;color:var(--sy-ink);
}
.sy-doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.sy-doc p{margin:0 0 18px}
.sy-doc b{font-weight:700;color:var(--sy-ink)}
.sy-doc ul{margin:0 0 18px;padding:0;list-style:none}
.sy-doc li{position:relative;padding-inline-start:18px;margin-bottom:8px;color:var(--sy-muted-2)}
.sy-doc li::before{content:"";position:absolute;inset-inline-start:2px;top:.78em;
  width:5px;height:5px;background:var(--sy-accent)}
.sy-doc > :last-child{margin-bottom:0}

.sy-doc-back{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--sy-rule-soft);
  font-size:15px;font-weight:600}
.sy-doc-back a{color:var(--sy-muted-2)}
.sy-doc-back a:hover{color:var(--sy-accent)}

/* ══════════════════════════════════════════════════════════════════════
   오류 화면 .sy-err
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 헤더·푸터를 붙이지 않는다. 이 화면은 어떤 경로에서도 뜰 수 있고,
      GlobalModelAdvice 가 돌지 않는 상황(필터 단계 오류)도 있어 모델을 믿을 수 없다.
      링크는 /dashboard 가 아니라 "/" 로 보낸다 — 비로그인이 /dashboard 로 가면
      로그인으로 다시 튕긴다. "/" 는 AuthController 가 상태를 보고 갈라준다.
   ────────────────────────────────────────────────────────────────────── */
.sy-err{min-height:100vh;display:grid;place-items:center;padding:40px 24px;text-align:center}
.sy-err-in{max-width:520px}
/* ⚠️ `.sy-err p`(0,1,1) 가 `.sy-err-code`(0,1,0) 를 이겨 96px 이 17px 로 눌렸었다.
   같은 블록 안에서 태그 선택자와 클래스 선택자가 싸우는 전형적인 자리다 — 특이도를 맞춰 둔다. */
.sy-err .sy-err-code{margin:0 0 6px;font-size:96px;font-weight:800;line-height:1;
  letter-spacing:-.05em;color:var(--sy-accent);font-variant-numeric:tabular-nums}
.sy-err h1{margin:0 0 14px;font-family:var(--sy-hand);
  font-size:34px;font-weight:800;line-height:1.35;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-err p{margin:0 0 34px;font-size:17px;line-height:1.8;color:var(--sy-muted-2);
  word-break:keep-all}
.sy-err-reason{display:block;margin-top:10px;font-size:13px;color:var(--sy-muted-2);opacity:.75}
.sy-err .sy-btn{min-width:200px}

@media (max-width:600px){
  .sy-doc-wrap{padding:44px 0 64px}
  .sy-doc-title{font-size:30px}
  .sy-doc-meta{margin-bottom:26px;font-size:13px}
  .sy-doc{font-size:16px;line-height:1.85}
  .sy-doc h2{margin-top:40px;padding-top:22px;font-size:20px}
  .sy-callout{padding:14px 16px;font-size:14px}
  .sy-err .sy-err-code{font-size:64px}
  .sy-err h1{font-size:25px}
  .sy-err p{font-size:15px;margin-bottom:28px}
}


/* ══════════════════════════════════════════════════════════════════════
   폼 — 로그인 · 가입 · 비밀번호
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 이름을 전부 새로 지었다. 기존 화면이 이미 쓰는 이름이 많다(00 문서 §0):
        .sy-input · .sy-label · .sy-form-group · .sy-hint* · .sy-consent*
        .sy-auth-wrap · .sy-auth-card · .sy-auth-sub · .sy-auth-logo · .sy-auth-footer
      그래서 v2 는 .sy-f-* (필드) · .sy-agree-* (동의) · .sy-auth-box 를 쓴다.
      기존 이름을 재사용하면 옛 화면과 한 화면에 섞였을 때 조용히 어긋난다.

   ⚠️ 입력칸 글자를 16px 밑으로 내리지 마라. iOS 사파리가 포커스 때 화면을 확대한다.
   ────────────────────────────────────────────────────────────────────── */

.sy-auth{min-height:100vh;display:grid;place-items:center;padding:48px 20px}
.sy-auth-box{
  width:min(460px,100%);background:var(--sy-bg);
  border:1px solid var(--sy-rule);padding:44px 40px 38px;
}
.sy-auth-mark{display:block;width:fit-content;margin:0 auto 12px}
.sy-auth-mark img{height:38px;width:auto}
.sy-auth-tag{margin:0 0 28px;text-align:center;font-size:15px;font-weight:500;
  color:var(--sy-muted-2);word-break:keep-all}
.sy-auth-box .sy-callout{margin:0 0 20px}

/* ── 필드 ── */
.sy-f-group{margin:0 0 18px}
.sy-f-label{display:block;margin:0 0 8px;font-size:14px;font-weight:700;
  letter-spacing:-.02em;color:var(--sy-ink)}
.sy-f-input{
  display:block;width:100%;height:52px;padding:0 15px;
  font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-.01em;
  color:var(--sy-ink);background:var(--sy-bg);
  border:1px solid var(--sy-rule-soft);border-radius:0;
  transition:border-color .15s,box-shadow .15s;
}
.sy-f-input::placeholder{color:var(--sy-muted-2);opacity:.6}
.sy-f-input:hover{border-color:var(--sy-rule)}
.sy-f-input:focus{outline:none;border-color:var(--sy-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sy-accent) 18%,transparent)}
.sy-f-input:disabled{background:var(--sy-pink-100);color:var(--sy-muted-2);cursor:not-allowed}
.sy-f-input[aria-invalid="true"]{border-color:var(--sy-danger-fg)}

/* 입력칸 + 버튼 한 줄 (가입의 "인증번호 받기") */
.sy-f-row{display:flex;gap:8px}
.sy-f-row .sy-f-input{flex:1 1 auto;min-width:0}
.sy-f-row .sy-btn{flex:0 0 auto;height:52px;padding:0 16px;font-size:14px}

/* 도움말 · 오류 */
.sy-f-hint{margin:8px 0 0;font-size:13px;font-weight:500;line-height:1.6;
  color:var(--sy-muted-2);word-break:keep-all;min-height:1.2em}
.sy-f-hint--ok{color:var(--sy-success-fg)}
.sy-f-hint--error{color:var(--sy-danger-fg)}

/* ── 동의 ── */
.sy-agree{margin:24px 0 26px;border:1px solid var(--sy-rule-soft)}
.sy-agree-all{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
  padding:15px 16px;background:var(--sy-pink-100);cursor:pointer}
.sy-agree-all b{font-size:15px;font-weight:800;color:var(--sy-ink)}
.sy-agree-sub{flex:1 1 100%;font-size:12.5px;color:var(--sy-muted-2)}
.sy-agree-list{padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px}
.sy-agree-item{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:14px;line-height:1.6;color:var(--sy-muted-2);word-break:keep-all}
.sy-agree-item a{color:var(--sy-accent);text-decoration:underline}
.sy-agree input[type=checkbox]{
  flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  accent-color:var(--sy-accent);cursor:pointer;
}

/* ── 버튼 변형 ── */
.sy-btn--block{display:flex;width:100%}
.sy-btn--kakao{
  background:#FEE500;border-color:#FEE500;color:#191600;
}
.sy-btn--kakao:hover{background:#f2da00;border-color:#f2da00;color:#191600}
.sy-btn--kakao svg{width:19px;height:19px;flex:0 0 auto}

/* ── 구분선 "또는" ── */
.sy-auth-or{display:flex;align-items:center;gap:12px;margin:20px 0;
  font-size:13px;font-weight:600;color:var(--sy-muted-2)}
.sy-auth-or::before,.sy-auth-or::after{content:"";flex:1;height:1px;background:var(--sy-rule-soft)}

/* ── 카드 아래 보조 링크 ── */
.sy-auth-alt{margin:16px 0 0;text-align:center;font-size:14px;color:var(--sy-muted-2)}
.sy-auth-alt a{color:var(--sy-accent);font-weight:700}
.sy-auth-alt a:hover{color:var(--sy-accent-dark);text-decoration:underline}
.sy-auth-alt + .sy-auth-alt{margin-top:8px}

/* ── 최소 푸터 ── */
.sy-auth-foot{margin:26px 0 0;text-align:center;font-size:12.5px;color:var(--sy-muted-2);
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px}
.sy-auth-foot a{color:var(--sy-muted-2)}
.sy-auth-foot a:hover{color:var(--sy-accent)}

@media (max-width:600px){
  .sy-auth{padding:28px 16px;place-items:start center}
  .sy-auth-box{padding:32px 22px 28px;border-left:0;border-right:0;
    width:calc(100% + 32px);margin-inline:-16px}
  .sy-auth-mark img{height:32px}
  .sy-auth-tag{margin-bottom:22px;font-size:14px}
  .sy-f-row{flex-wrap:wrap}
  .sy-f-row .sy-btn{width:100%}
}


/* ══════════════════════════════════════════════════════════════════════
   안내 화면 — 구독 안내 · 이용 안내 · 고객센터
   ══════════════════════════════════════════════════════════════════════
   랜딩(.sy-hero/.sy-feature)과 다른 뼈대다. 랜딩은 팔아야 하고 이쪽은 읽혀야 한다.
   ⚠️ 폭이 --sy-container(1250) 가 아니라 --sy-guide(1000) 다.
      표 3열·카드 3장이 들어가면서 글줄이 너무 길어지지 않는 폭이다.
   ⚠️ 이름을 새로 지었다 — 기존 화면이 .sy-card · .sy-content · .sy-page-title 을 쓴다(§0).
   ────────────────────────────────────────────────────────────────────── */

.sy-guide{width:min(var(--sy-guide),100% - var(--sy-pad)*2);margin-inline:auto;padding:0 0 96px}

.sy-guide-hero{padding:72px 0 56px;text-align:center}
.sy-guide-hero h1{margin:0 0 14px;font-family:var(--sy-hand);
  font-size:44px;font-weight:800;line-height:1.3;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-guide-hero p{margin:0 auto;max-width:38em;font-size:17px;font-weight:500;line-height:1.85;
  color:var(--sy-muted-2);word-break:keep-all}
.sy-guide-hero .sy-cta{margin-top:30px}

.sy-sec{padding:52px 0 0;border-top:1px solid var(--sy-rule-soft)}
.sy-sec > h2{margin:0 0 10px;font-family:var(--sy-hand);
  font-size:30px;font-weight:800;line-height:1.4;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-sec-lead{margin:0 0 28px;font-size:16px;font-weight:500;line-height:1.8;
  color:var(--sy-muted-2);word-break:keep-all}
.sy-sec + .sy-sec{margin-top:52px}
/* 절이 전부 같은 크기·같은 간격으로 오면 목차를 기계가 뽑아 놓은 것처럼 읽힌다.
   뒤쪽 부속 정보는 한 단 낮춰 페이지에 "크게 → 보통 → 작게" 의 흐름을 준다. */
.sy-sec--quiet{padding-top:44px}
.sy-sec--quiet > h2{font-size:23px;letter-spacing:-.03em;color:var(--sy-muted)}
.sy-sec--quiet + .sy-sec--quiet{margin-top:38px}
.sy-sec h3{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--sy-ink)}

/* ── 표 ── */
.sy-tablewrap{overflow-x:auto;border:1px solid var(--sy-rule-soft)}
.sy-table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.sy-table th,.sy-table td{text-align:left;padding:14px 18px;
  border-bottom:1px solid var(--sy-rule-soft);vertical-align:top;line-height:1.6}
.sy-table thead th{background:var(--sy-pink-100);font-size:13px;font-weight:800;
  letter-spacing:.02em;color:var(--sy-ink);white-space:nowrap}
.sy-table tbody tr:last-child th,.sy-table tbody tr:last-child td{border-bottom:0}
.sy-table td:first-child{font-weight:700;color:var(--sy-ink)}
.sy-table .sy-t-free{color:var(--sy-muted-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sy-table .sy-t-plus{color:var(--sy-accent);font-weight:700;white-space:nowrap}

/* ── 타일 (기능 소개 카드) ── */
.sy-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:2px}
.sy-tile{border:1px solid var(--sy-rule-soft);padding:22px 20px 20px;background:var(--sy-bg)}
.sy-tile .ico{font-size:26px;line-height:1;margin-bottom:12px}
.sy-tile h3{margin:0 0 7px}
.sy-tile p{margin:0;font-size:14px;line-height:1.75;color:var(--sy-muted-2);word-break:keep-all}

/* ── 단계 — 순서가 정보일 때만 쓴다 ── */
.sy-steps{list-style:none;margin:0;padding:0;counter-reset:sy-step;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px}
.sy-steps li{counter-increment:sy-step;position:relative;
  border:1px solid var(--sy-rule-soft);padding:44px 20px 22px;background:var(--sy-bg)}
.sy-steps li::before{content:counter(sy-step);position:absolute;top:-1px;left:-1px;
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--sy-accent);color:#fff;font-size:14px;font-weight:800}
.sy-steps h3{margin:0 0 8px}
.sy-steps p{margin:0;font-size:14px;line-height:1.75;color:var(--sy-muted-2);word-break:keep-all}

/* ── FAQ ── */
.sy-faq{border:1px solid var(--sy-rule-soft);background:var(--sy-bg)}
.sy-faq details{border-bottom:1px solid var(--sy-rule-soft)}
.sy-faq details:last-child{border-bottom:0}
.sy-faq summary{
  display:flex;align-items:flex-start;gap:12px;list-style:none;cursor:pointer;
  padding:17px 20px;font-size:16px;font-weight:700;letter-spacing:-.02em;
  color:var(--sy-ink);word-break:keep-all;
}
.sy-faq summary::-webkit-details-marker{display:none}
.sy-faq summary::before{content:"Q";flex:0 0 auto;width:20px;
  font-size:15px;font-weight:800;color:var(--sy-accent)}
.sy-faq summary::after{content:"";flex:0 0 auto;margin-inline-start:auto;margin-top:.42em;
  width:8px;height:8px;border-right:2px solid var(--sy-muted-2);border-bottom:2px solid var(--sy-muted-2);
  transform:rotate(45deg);transition:transform .18s}
.sy-faq details[open] summary::after{transform:rotate(-135deg)}
.sy-faq summary:hover{color:var(--sy-accent)}
.sy-faq .sy-faq-a{padding:0 20px 20px 52px;font-size:15px;line-height:1.85;
  color:var(--sy-muted-2);white-space:pre-line;word-break:keep-all}
.sy-faq .sy-faq-a a{color:var(--sy-accent);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.sy-faq summary::after{transition:none}}

/* ── 앱 설치 자리 ── */
.sy-app{display:grid;grid-template-columns:170px minmax(0,1fr);gap:26px;align-items:center;
  border:1px solid var(--sy-rule-soft);padding:26px}
.sy-qr{width:170px;height:170px;display:grid;place-items:center;text-align:center;
  border:2px dashed var(--sy-rule);background:var(--sy-pink-100);
  font-size:13px;font-weight:600;line-height:1.6;color:var(--sy-muted-2)}
.sy-app p{margin:0 0 8px;font-size:14.5px;line-height:1.8;color:var(--sy-muted-2);word-break:keep-all}
.sy-soon{display:inline-block;margin-top:8px;padding:5px 11px;
  background:var(--sy-pink-200);color:var(--sy-accent-on-pink);font-size:12.5px;font-weight:800}

/* ── 문의 · 연락 상자 ── */
.sy-contact{border:1px solid var(--sy-rule-soft);padding:28px 26px;margin-top:52px}
.sy-contact h2,.sy-contact h3{margin:0 0 10px}
.sy-contact p{margin:0 0 10px;font-size:15px;line-height:1.8;color:var(--sy-muted-2);word-break:keep-all}
.sy-contact p:last-child{margin-bottom:0}
.sy-contact a{color:var(--sy-accent);font-weight:600}
.sy-contact a:hover{text-decoration:underline}
.sy-contact form{margin-top:20px}
.sy-contact .sy-callout{margin:0 0 18px}

/* 폼 추가 요소 — 규격은 .sy-f-input 과 같다 */
.sy-f-select{
  display:block;width:100%;height:52px;padding:0 40px 0 15px;
  font-family:inherit;font-size:16px;font-weight:500;color:var(--sy-ink);
  background:var(--sy-bg) no-repeat right 15px center;
  background-image:linear-gradient(45deg,transparent 50%,var(--sy-muted-2) 50%),
                   linear-gradient(135deg,var(--sy-muted-2) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;background-position:right 19px center,right 13px center;
  border:1px solid var(--sy-rule-soft);border-radius:0;appearance:none;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.sy-f-textarea{
  display:block;width:100%;min-height:150px;padding:14px 15px;resize:vertical;
  font-family:inherit;font-size:16px;font-weight:500;line-height:1.7;color:var(--sy-ink);
  background:var(--sy-bg);border:1px solid var(--sy-rule-soft);border-radius:0;
  transition:border-color .15s,box-shadow .15s;
}
.sy-f-textarea::placeholder{color:var(--sy-muted-2);opacity:.6}
.sy-f-select:hover,.sy-f-textarea:hover{border-color:var(--sy-rule)}
.sy-f-select:focus,.sy-f-textarea:focus{outline:none;border-color:var(--sy-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sy-accent) 18%,transparent)}
.sy-f-foot{margin-top:18px;display:flex;justify-content:flex-end}

@media (max-width:860px){
  .sy-app{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
}
@media (max-width:600px){
  .sy-guide{padding-bottom:64px}
  .sy-guide-hero{padding:44px 0 40px}
  .sy-guide-hero h1{font-size:30px}
  .sy-guide-hero p{font-size:15px}
  .sy-sec{padding-top:40px}
  .sy-sec + .sy-sec{margin-top:40px}
  .sy-sec > h2{font-size:24px}
  .sy-sec-lead{margin-bottom:22px;font-size:15px}
  /* ⚠️ 표를 가로 스크롤로 두면 세 번째 열(Saiiya+)이 화면 밖에 숨는다.
     넘침 측정은 통과한다 — 조상에 overflow-x 가 있어서다. 그래서 눈으로만 잡힌다.
     비교표는 밀어서 보는 것이 아니라 **한눈에 나란히 놓여야** 뜻이 산다 → 폰에서는 줄여서 넣는다.
     .sy-tablewrap 의 overflow-x 는 그대로 둔다(그래도 넘치는 표를 위한 그물). */
  .sy-table{min-width:0;font-size:13px}
  .sy-table th,.sy-table td{padding:11px 10px}
  .sy-table thead th{font-size:11.5px}
  .sy-table td:first-child{word-break:keep-all}
  .sy-faq summary{padding:15px 16px;font-size:15px}
  .sy-faq .sy-faq-a{padding:0 16px 18px 42px;font-size:14px}
  .sy-contact{padding:22px 18px;margin-top:40px}
  .sy-f-foot .sy-btn{width:100%}
}


/* ══════════════════════════════════════════════════════════════════════
   굿즈 — 목록 · 상세
   ══════════════════════════════════════════════════════════════════════
   🚨 **`.gd-*` 클래스 이름을 바꾸지 마라.** 어드민의 디자인 8항목
      (`goods.design.*` → `templates/goods/design-css.html`)이 이 선택자들을 직접 겨눈다.
      이름을 바꾸면 강조색·열 수·사진 비율·모서리·글자 크기가 **조용히 안 먹는다.**
      그래서 v2 로 옮기면서도 클래스 계약은 그대로 두고 색·간격만 바꿨다.

   🚨 design-css 는 `.wb-app .gd-title` 처럼 **`.wb-app` 으로 스코프**돼 있었다.
      v2 의 껍데기는 `.sy` 라 그대로 두면 어드민 값이 안 걸린다 →
      design-css.html 의 선택자에 `.sy` 를 나란히 넣어 두 껍데기 모두에서 먹게 했다.

   ⚠️ 글자 크기가 13.5px 기준인 것도 계약이다. design-css 가
      `font-size:calc(13.5px * scale/100)` 로 덮어쓰므로, 여기서 다른 값을 줘도 어드민이 이긴다.

   ⚠️ 굿즈는 쇼핑몰이 아니다. 장바구니·주문·결제가 없고 서버는 주문을 저장하지 않는다.
      "구매" 처럼 읽히는 말을 새로 만들지 말 것. 문구는 전부 어드민(`goods.label.*`)에 있다.
   ────────────────────────────────────────────────────────────────────── */

/* 왼쪽 정렬 페이지 머리 — 목록형 화면용 */
.sy-head{padding:56px 0 26px}
.sy-head h1{margin:0 0 8px;font-family:var(--sy-hand);
  font-size:36px;font-weight:800;line-height:1.3;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-head p{margin:0;font-size:15px;line-height:1.75;color:var(--sy-muted-2);word-break:keep-all}

/* 뒤로 */
.sy-back{display:inline-block;margin:36px 0 18px;font-size:14px;font-weight:600;
  color:var(--sy-muted-2)}
.sy-back:hover{color:var(--sy-accent)}

/* ── 목록 ── */
.gd-lead{font-size:15px;color:var(--sy-muted-2);margin:6px 0 0;line-height:1.75}
.gd-count{font-size:13px;color:var(--sy-muted-2);margin:0 0 18px}
.gd-count b{color:var(--sy-ink);font-weight:700}

.gd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px;align-items:start}
.sy a.gd-card{display:block;color:inherit}
.gd-thumb{position:relative;width:100%;aspect-ratio:1/1;
  border:1px solid var(--sy-rule-soft);background:var(--sy-pink-100);
  display:grid;place-items:center;text-align:center;color:var(--sy-muted-2);
  font-size:12px;line-height:1.7;transition:border-color .16s}
.gd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sy a.gd-card:hover .gd-thumb{border-color:var(--sy-accent)}
.sy a.gd-card:hover .gd-title{color:var(--sy-accent)}

.gd-body{padding:12px 2px 0}
.gd-badge{display:inline-block;margin-bottom:7px;padding:3px 8px;font-size:11px;font-weight:800;
  background:var(--sy-pink-200);color:var(--sy-accent-on-pink)}
.gd-name{font-family:var(--sy-hand);font-size:19px;font-weight:800;letter-spacing:-.03em;
  color:var(--sy-ink);margin:0 0 4px;line-height:1.3}
.gd-title{font-size:13.5px;line-height:1.6;color:var(--sy-muted-2);margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:keep-all;transition:color .16s}
.gd-price{font-size:13.5px;font-weight:700;color:var(--sy-accent);margin:0 0 5px;
  line-height:1.5;word-break:keep-all}
.gd-meta{font-size:12px;color:var(--sy-muted-2);margin:0;line-height:1.6;opacity:.85}

.gd-notice{margin-top:44px;padding-top:22px;border-top:1px solid var(--sy-rule-soft);
  font-size:12.5px;line-height:1.9;color:var(--sy-muted-2)}
.gd-notice b{color:var(--sy-ink)}

/* ── 상세: 위 2단 ── */
.gd-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-bottom:36px}
.gd-shots{display:flex;flex-direction:column;gap:10px}
.gd-shot{width:100%;aspect-ratio:1/1;border:1px solid var(--sy-rule-soft);background:var(--sy-pink-100);
  display:grid;place-items:center;text-align:center;color:var(--sy-muted-2);
  font-size:13px;line-height:1.7;padding:16px}
.gd-shot img{width:100%;height:100%;object-fit:cover;display:block}
.gd-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.gd-thumbs .gd-thumb{aspect-ratio:1/1;display:block;padding:0;cursor:pointer;overflow:hidden}
.gd-thumbs .gd-thumb[aria-current="true"]{border-color:var(--sy-accent)}

.gd-fullname{font-size:21px;font-weight:800;line-height:1.45;letter-spacing:-.025em;
  color:var(--sy-ink);margin:0 0 8px;word-break:keep-all}
.gd-hero-copy{font-size:14px;line-height:1.75;color:var(--sy-muted-2);margin:0 0 20px;word-break:keep-all}
.gd-price-val{font-size:20px;font-weight:800;color:var(--sy-ink);line-height:1.4;word-break:keep-all}
.gd-hero .gd-price{padding:15px 0;border-top:2px solid var(--sy-ink);
  border-bottom:1px solid var(--sy-rule-soft);margin:0 0 2px}
.gd-facts{margin:0 0 22px}
.gd-fact{display:grid;grid-template-columns:82px 1fr;gap:12px;padding:10px 0;
  font-size:13.5px;line-height:1.7;border-bottom:1px solid var(--sy-rule-soft)}
.gd-fact dt{color:var(--sy-muted-2)}
.gd-fact dd{margin:0;color:var(--sy-ink);word-break:keep-all}

/* 옵션 — ⚠️ 1fr(=minmax(auto,1fr))은 내용보다 못 줄어든다. 오른쪽 em 이 nowrap 이라
   둘이 겹치면 한 줄이 439px 로 커지고 화면 전체가 가로로 밀렸다(2026-08-15 측정). */
.gd-opts{margin:0 0 20px}
.gd-opt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:10px;
  padding:10px 12px;border:1px solid var(--sy-rule-soft);background:var(--sy-pink-100);
  margin-bottom:6px;font-size:13.5px;line-height:1.6}
.gd-opt b{color:var(--sy-ink);font-weight:700}
.gd-opt em{font-style:normal;font-size:11.5px;color:var(--sy-accent);white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}

/* 문의 — 쇼핑몰의 구매 영역 자리. 우리는 판매자가 아니라 문의만 연결한다 */
.gd-buy{border:1px solid var(--sy-rule-soft);background:var(--sy-bg);padding:20px}
.gd-buy-t{font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--sy-muted-2);margin:0 0 12px}
.sy .gd-in{width:100%;box-sizing:border-box;background:var(--sy-bg);
  border:1px solid var(--sy-rule-soft);border-radius:0;padding:12px 13px;
  font-family:inherit;font-size:16px;color:var(--sy-ink);margin-bottom:8px;
  transition:border-color .15s,box-shadow .15s}
.sy .gd-in:focus{outline:none;border-color:var(--sy-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sy-accent) 18%,transparent)}
.sy textarea.gd-in{min-height:96px;line-height:1.7;resize:vertical}
.gd-agree{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.7;
  color:var(--sy-muted-2);margin:6px 0 14px;cursor:pointer}
.gd-agree input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--sy-accent)}
.gd-agree a{color:var(--sy-accent)}
.sy a.gd-kakao{display:flex;width:100%;box-sizing:border-box;margin-bottom:8px}
.gd-or{margin:16px 0 10px;font-size:12px;color:var(--sy-muted-2);text-align:center;
  display:flex;align-items:center;gap:10px}
.gd-or::before,.gd-or::after{content:"";flex:1;height:1px;background:var(--sy-rule-soft)}
.gd-msg{padding:14px 18px;margin:0 0 18px;font-size:14.5px;line-height:1.7;
  border-left:3px solid currentColor}
.gd-msg.ok{background:var(--sy-success-bg);color:var(--sy-success-fg)}
.gd-msg.no{background:var(--sy-danger-bg);color:var(--sy-danger-fg)}

/* ── 상세페이지 이미지 ── */
.gd-detail{border-top:2px solid var(--sy-ink);margin-top:10px}
.gd-detail-tab{display:flex;border-bottom:1px solid var(--sy-rule-soft);margin-bottom:28px}
.gd-detail-tab span{padding:14px 20px;font-size:14px;font-weight:800;color:var(--sy-ink);
  border-bottom:2px solid var(--sy-ink);margin-bottom:-1px}
.gd-imgs{max-width:860px;margin:0 auto;font-size:0}
.gd-imgs img{width:100%;display:block}
.gd-imgs-empty{padding:64px 20px;text-align:center;color:var(--sy-muted-2);
  font-size:13.5px;line-height:1.8;border:1px dashed var(--sy-rule);background:var(--sy-pink-100)}

/* 상품정보 제공고시 */
.gd-notice-t{font-size:14px;font-weight:800;color:var(--sy-ink);margin:40px 0 12px}
.gd-specs{margin:0;border-top:1px solid var(--sy-ink)}
.gd-spec{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:11px 12px;
  border-bottom:1px solid var(--sy-rule-soft);font-size:13px;line-height:1.7}
.gd-spec dt{color:var(--sy-muted-2)}
.gd-spec dd{margin:0;color:var(--sy-ink);word-break:keep-all}
.gd-seller{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--sy-rule-soft);
  font-size:12.5px;line-height:1.85;color:var(--sy-muted-2)}
.gd-seller b{color:var(--sy-ink)}

@media(max-width:1000px){.gd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){
  .gd-hero{grid-template-columns:minmax(0,1fr);gap:24px}
  .gd-spec{grid-template-columns:104px 1fr}
}
@media(max-width:760px){.gd-grid{grid-template-columns:1fr 1fr;gap:22px 14px}}
@media(max-width:600px){
  .sy-head{padding:40px 0 20px}
  .sy-head h1{font-size:26px}
  .sy-back{margin:24px 0 14px}
  .gd-fullname{font-size:19px}
  .gd-buy{padding:16px}
  .gd-detail-tab span{padding:12px 16px;font-size:13px}
  .gd-imgs-empty{padding:44px 16px}
}
@media(max-width:420px){.gd-grid{grid-template-columns:minmax(0,1fr)}}


/* ══════════════════════════════════════════════════════════════════════
   앱 껍데기 — 로그인한 사람이 쓰는 화면의 헤더 · 푸터
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 공홈 헤더(.sy-topbar)와 **다른 물건이다.** 섞지 마라.
        공홈  로고 + 안내 메뉴 4 + 상태 버튼        비회원도 본다
        앱    로고 + 5그룹 14항목 + 알림 + 아바타   로그인·연동 완료가 쓴다
      공홈 화면에 앱 헤더를 씌우면 커플 연동 전에는 메뉴가 전부 /invite 로 튕긴다.

   ⚠️ 이름이 `.sy-appbar`·`.sy-anav-*` 다. `.sy-topbar`/`.sy-nav` 는 공홈이 쓴다.

   ⚠️ 알림 종 드롭다운은 **JS 가 위치를 잰다**(아바타 폭이 닉네임 길이에 따라 달라져
      고정 오프셋으로는 못 맞춘다). `--bell-shift` 를 JS 가 넣으므로 지우지 말 것.
   ────────────────────────────────────────────────────────────────────── */

.sy-appbar{flex:0 0 auto;position:sticky;top:0;z-index:40;background:var(--sy-bg);
  border-bottom:1px solid var(--sy-rule)}
.sy-appbar-in{
  width:min(var(--sy-header-w),100% - var(--sy-pad)*2);margin-inline:auto;
  height:76px;display:flex;align-items:center;gap:20px;
}
.sy-appbar .sy-logo{margin-inline-start:0}
.sy-appbar .sy-logo img{height:34px}

/* ── 5그룹 네비 ── */
.sy-anav{display:flex;align-items:stretch;height:76px;margin-inline-start:22px}
.sy-anav-group{position:relative;display:flex;align-items:stretch}
.sy-anav-top{
  display:flex;align-items:center;height:100%;padding:0 15px;border:0;background:none;
  font-family:inherit;font-size:15.5px;font-weight:700;letter-spacing:-.02em;
  color:var(--sy-muted-2);cursor:pointer;white-space:nowrap;position:relative;
}
.sy-anav-top:hover,.sy-anav-group:hover .sy-anav-top{color:var(--sy-ink)}
.sy-anav-top.active{color:var(--sy-accent)}
.sy-anav-top.active::after{content:"";position:absolute;left:15px;right:15px;bottom:-1px;
  height:2px;background:var(--sy-accent)}

.sy-anav-drop{
  position:absolute;top:100%;left:0;min-width:158px;display:none;flex-direction:column;
  background:var(--sy-bg);border:1px solid var(--sy-rule);box-shadow:6px 6px 0 rgba(49,50,51,.07);
  padding:6px 0;z-index:50;
}
.sy-anav-group:hover .sy-anav-drop,.sy-anav-group:focus-within .sy-anav-drop{display:flex}
.sy-anav-drop a{padding:10px 18px;font-size:14.5px;font-weight:600;color:var(--sy-muted-2);
  white-space:nowrap}
.sy-anav-drop a:hover{background:var(--sy-pink-100);color:var(--sy-accent)}

/* 안 본 것 표시 — 지금은 '사이야 위키' 만 쓴다 */
.sy-dot{display:inline-block;width:5px;height:5px;margin-inline-start:5px;
  background:var(--sy-accent);vertical-align:middle}
.sy-dot--top{position:absolute;top:22px;right:8px;margin:0}

/* ── 오른쪽 ── */
.sy-appbar .sy-actions{margin-inline-start:auto;gap:10px}
.sy-iconbtn{
  display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:1px solid var(--sy-rule-soft);background:var(--sy-bg);border-radius:0;
  font-size:17px;line-height:1;color:var(--sy-ink);cursor:pointer;position:relative;
}
.sy-iconbtn:hover{border-color:var(--sy-accent);color:var(--sy-accent)}
.sy-burger{display:none}

/* 알림 종 */
.sy-bell{position:relative}
.sy-bell-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;
  background:var(--sy-accent);border:1.5px solid var(--sy-bg)}
.sy-bell-drop{
  position:absolute;top:calc(100% + 8px);right:0;width:302px;max-width:86vw;
  transform:translateX(var(--bell-shift,0px));
  background:var(--sy-bg);border:1px solid var(--sy-rule);box-shadow:6px 6px 0 rgba(49,50,51,.07);
  z-index:60;
}
.sy-bell-head{padding:13px 16px;font-size:13px;font-weight:800;color:var(--sy-ink);
  border-bottom:1px solid var(--sy-rule-soft)}
.sy-bell-list{list-style:none;margin:0;padding:0;max-height:322px;overflow:auto}
.sy-bell-item{display:flex;gap:10px;align-items:baseline;padding:12px 16px;
  border-bottom:1px solid var(--sy-rule-soft);font-size:14px;line-height:1.6;color:var(--sy-ink)}
.sy-bell-list li:last-child .sy-bell-item{border-bottom:0}
.sy-bell-item:hover{background:var(--sy-pink-100)}
.sy-bell-text{flex:1;min-width:0;word-break:keep-all}
.sy-bell-ago{flex:0 0 auto;font-size:12px;color:var(--sy-muted-2);white-space:nowrap}
.sy-bell-none{padding:26px 16px;text-align:center;font-size:13.5px;color:var(--sy-muted-2)}

/* 아바타 — ⚠️ 줄어들어야 하는 건 이것 하나뿐이다.
   min-width 를 안 막으면 닉네임이 길 때 종·햄버거까지 같이 찌그러진다. */
.sy-avatar{
  display:block;max-width:132px;min-width:0;height:40px;line-height:38px;padding:0 14px;
  border:1px solid var(--sy-rule-soft);background:var(--sy-bg);
  font-size:14px;font-weight:700;color:var(--sy-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sy-avatar:hover{border-color:var(--sy-accent);color:var(--sy-accent)}

/* ── 한도 안내 줄 ── */
.sy-quota{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 18px;margin:0 0 22px;
  background:var(--sy-warning-bg);color:var(--sy-warning-fg);
  border-left:3px solid currentColor;font-size:14.5px;font-weight:600;line-height:1.6}
.sy-quota a{margin-inline-start:auto;color:inherit;font-weight:800;text-decoration:underline;
  white-space:nowrap}

/* ── 앱 푸터 ── */
.sy-appfoot{flex:0 0 auto;background:var(--sy-bg);border-top:1px solid var(--sy-rule-soft)}
.sy-appfoot-in{width:min(var(--sy-header-w),100% - var(--sy-pad)*2);margin-inline:auto;
  padding:26px 0 32px;display:flex;gap:14px 26px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;font-size:13px;color:var(--sy-muted-2)}
.sy-appfoot nav{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;font-weight:600}
.sy-appfoot a{color:var(--sy-muted-2)}
.sy-appfoot a:hover{color:var(--sy-accent)}
.sy-logout{border:0;background:none;padding:0;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--sy-muted-2);cursor:pointer}
.sy-logout:hover{color:var(--sy-accent)}

/* ── 앱 본문 ── */
.sy-page{width:min(var(--sy-guide),100% - var(--sy-pad)*2);margin-inline:auto;padding:44px 0 80px}
.sy-page--narrow{width:min(var(--sy-read),100% - var(--sy-pad)*2)}

@media (max-width:980px){
  /* 5그룹이 안 들어간다 → 햄버거로 접는다 */
  .sy-appbar-in,.sy-anav{height:64px}
  .sy-burger{display:grid}
  .sy-anav{
    position:absolute;top:64px;left:0;right:0;height:auto;margin:0;
    flex-direction:column;align-items:stretch;display:none;
    background:var(--sy-bg);border-bottom:1px solid var(--sy-rule);
    box-shadow:0 6px 0 rgba(49,50,51,.05);
  }
  .sy-anav.open{display:flex}
  .sy-anav-group{flex-direction:column;align-items:stretch}
  .sy-anav-top{height:46px;padding:0 20px;justify-content:flex-start;
    border-bottom:1px solid var(--sy-rule-soft)}
  .sy-anav-top.active::after{display:none}
  .sy-anav-drop{position:static;display:flex;min-width:0;border:0;box-shadow:none;
    padding:0;background:var(--sy-pink-100)}
  .sy-anav-drop a{padding:11px 20px 11px 34px}
  .sy-dot--top{position:static;margin-inline-start:6px}
  .sy-appbar{position:relative}
}
@media (max-width:600px){
  .sy-appbar-in{gap:10px}
  .sy-appbar .sy-logo img{height:26px}
  .sy-avatar{max-width:88px;padding:0 10px;font-size:13px}
  .sy-iconbtn{width:36px;height:36px}
  .sy-page{padding:28px 0 56px}
  .sy-quota{font-size:13.5px;padding:12px 14px}
  .sy-quota a{margin-inline-start:0;flex-basis:100%}
  .sy-appfoot-in{padding:22px 0 26px;font-size:12.5px}
}


/* ══════════════════════════════════════════════════════════════════════
   요금제 — 표가 아니라 종이 두 장
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 비교표(.sy-table)를 쓰지 않는다. 항목이 7개뿐이고 두 열의 차이가
      "숫자 vs 제한 없음" 하나라, 표로 만들면 SaaS 가격표처럼 읽히고
      정작 중요한 것(둘이 함께 쓴다)이 묻힌다.
   🚨 **가격을 적지 않는다.** 스토어 구독 화면의 금액이 정본이다.
   ────────────────────────────────────────────────────────────────────── */

.sy-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sy-plan-card{position:relative;background:var(--sy-bg);
  border:1px solid var(--sy-rule-soft);padding:32px 28px 30px}
.sy-plan-card--plus{border-color:var(--sy-accent);box-shadow:inset 0 0 0 1px var(--sy-accent)}
.sy-plan-tag{position:absolute;top:-1px;right:-1px;padding:5px 12px;
  background:var(--sy-accent);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em}
.sy-plan-name{margin:0 0 4px;font-family:var(--sy-hand);
  font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--sy-ink)}
.sy-plan-card--plus .sy-plan-name{color:var(--sy-accent)}
.sy-plan-note{margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--sy-rule-soft);
  font-size:13.5px;color:var(--sy-muted-2)}
.sy-plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;
  font-size:14.5px;line-height:1.6;color:var(--sy-ink)}
.sy-plan-list li{position:relative;padding-inline-start:17px;word-break:keep-all}
.sy-plan-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.55em;
  width:5px;height:5px;background:var(--sy-rule)}
.sy-plan-card--plus .sy-plan-list li::before{background:var(--sy-accent)}
.sy-plan-list b{font-weight:800}
.sy-plan-list .num{color:var(--sy-muted-2);font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .sy-plans{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .sy-plan-card{padding:26px 20px 24px}
  .sy-plan-name{font-size:26px}
}

/* 안내 화면용 밴드 — 랜딩의 480px 는 문장 하나에 비해 너무 크다 */
.sy-band--tight{padding:74px 0 78px}
.sy-band--tight h2{font-size:40px;line-height:1.45}
@media (max-width:860px){.sy-band--tight{padding:56px 0 60px}.sy-band--tight h2{font-size:28px}}
@media (max-width:600px){.sy-band--tight{padding:44px 0 48px}.sy-band--tight h2{font-size:23px}}

/* 무료로 계속 쓰는 것 — 목록이 떠 있지 않게 상자에 담는다 */
/* ── 무료 항목 ──
   ⚠️ 상자에 가두지 않는다. 이 페이지는 카드·상자가 연달아 나오는데 여기까지 상자로 만들면
      네 덩어리가 같은 모양으로 쌓여 기계로 찍은 화면처럼 읽힌다.
   ⚠️ 4열 격자도 쓰지 않는다. 길이가 제각각인 낱말 8개를 같은 폭에 맞추면 빈칸이 남는다 —
      글자 폭대로 흘려보내면 줄 끝이 들쭉날쭉해져 오히려 사람이 늘어놓은 것처럼 보인다. */
.sy-freelist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sy-freelist li{padding:9px 16px;background:var(--sy-pink-100);color:var(--sy-ink);
  font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
@media (max-width:600px){
  .sy-freelist{gap:6px}
  .sy-freelist li{padding:8px 13px;font-size:14px}
}

/* ── 바로가기 칩 (고객센터 주제 이동) ── */
.sy-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.sy-jump a{display:inline-flex;align-items:center;height:38px;padding:0 18px;
  border:1px solid var(--sy-rule-soft);background:var(--sy-bg);
  font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--sy-muted-2)}
.sy-jump a:hover{border-color:var(--sy-accent);color:var(--sy-accent)}

/* ── 문의 상자 — 일러스트를 옆에 둔다 ── */
.sy-contact--split{display:grid;grid-template-columns:220px minmax(0,1fr);gap:30px;
  align-items:start}
.sy-contact-il{text-align:center}
.sy-contact-il img{width:100%;max-width:200px;height:auto;margin:0 auto 12px}
.sy-contact-il p{margin:0;font-size:13px;line-height:1.7;color:var(--sy-muted-2);word-break:keep-all}

@media (max-width:760px){
  .sy-contact--split{grid-template-columns:minmax(0,1fr);gap:20px}
  .sy-contact-il img{max-width:150px}
}
@media (max-width:600px){
  .sy-jump{gap:6px;margin-top:20px}
  .sy-jump a{height:34px;padding:0 13px;font-size:13px}
}

/* ── 안내 페이지 히어로의 말풍선 장식 ──
   il-bubble.png 은 일러스트가 아니라 **말풍선 배경 도형**이다.
   ⚠️ 가운데에 단독으로 놓으면 빈 분홍 덩어리로 보인다 — /home 처럼 좌우 장식으로만 쓴다.
   ⚠️ .sy-guide-hero 에 position:relative 가 있어야 붙는다. */
.sy-guide-hero{position:relative}
.sy-guide-bubble{position:absolute;top:26px;width:132px;height:auto;
  pointer-events:none;user-select:none}
.sy-guide-bubble--l{left:0}
.sy-guide-bubble--r{right:0;top:120px;transform:scaleX(-1)}
/* 본문 폭(38em)에 붙기 시작하면 글자 위로 올라온다 */
@media (max-width:1040px){.sy-guide-bubble{width:104px}}
@media (max-width:900px){.sy-guide-bubble{display:none}}

/* ── 페이지 안 바로가기(#앵커) ──
   ⚠️ scroll-behavior 는 스크롤하는 요소(html)에 걸어야 한다. .sy 에 걸면 아무 일도 안 일어난다.
      이 CSS 는 site/v2/head 에서만 불리므로 v2 화면에만 적용된다. */
.sy-guide .sy-sec[id]{scroll-margin-top:24px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ── 절 끝에 붙는 조건 단서 ──
   ⚠️ .sy-sec-lead 를 재사용하지 않는다. 그건 제목 바로 아래용이라 위 여백이 0 이다. */
.sy-note{margin:22px 0 0;padding-inline-start:16px;
  border-inline-start:1px solid var(--sy-rule-soft);
  font-size:14px;line-height:1.85;color:var(--sy-muted-2);word-break:keep-all}
.sy-note b{font-weight:700;color:var(--sy-muted)}

/* Saiiya+ 카드의 값은 "달라지는 것" 이다 — 무료 카드와 같은 회색이면 아무것도 안 읽힌다 */
.sy-plan-card--plus .sy-plan-list .num{color:var(--sy-accent);font-weight:700}

/* ── 본문 안의 링크 ──
   🚨 `.sy a{color:inherit;text-decoration:none}` 이 전역이라, 문단 안에 링크를 넣으면
      본문과 똑같이 보인다. /plans 의 "이용약관" 이 실제로 그렇게 묻혀 있었다.
      링크를 넣는 자리마다 이 규칙을 타게 할 것. */
.sy-sec-lead a,.sy-note a,.sy-callout a,.sy-freelist a{
  color:var(--sy-accent);font-weight:700;
  text-decoration:underline;text-underline-offset:2px}