/* 슈룹 디자인 시스템 'Warm Adventure' — 웹 적용 (2026-10-09)
   원본: AI/Design/Shuroop-Design-System/tokens.json
   게임과 같은 크림 바탕 · 초록 · 노랑 · 배민 주아체(웹은 같은 계열인 Jua) · 통통한 버튼.
   웹은 선생님·보호자가 읽는 곳이라 본문은 Pretendard 그대로 두고 제목·버튼에만 주아체를 쓴다.
   주색은 흰 글자와 작은 글자 대비(4.5:1)를 지키려고 디자인 시스템 초록(#329B72)보다 한 단계 진한 #25805E 를 쓴다. */
:root{
  --ws-surface:#fff8e8; --ws-card:#ffffff; --ws-primary:#329b72; --ws-primary-strong:#25805e; --ws-primary-dark:#216d51;
  --ws-accent:#ffc83d; --ws-accent-dark:#c59216; --ws-info:#59b8e8; --ws-ink:#20384d; --ws-muted:#536674;
  --ws-border:#d8e2d9; --ws-selected:#eaf5df; --ws-empty:#bcc6c9;
  --ws-display:'Jua','BM JUA','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  /* 기존 토큰을 디자인 시스템 값으로 */
  --brand:var(--ws-primary-strong); --pri:var(--ws-primary-strong); --pri-2:var(--ws-primary); --accent:var(--ws-primary-strong);
  --ink:var(--ws-ink); --muted:var(--ws-muted); --paper:var(--ws-surface); --bg:var(--ws-surface); --line:var(--ws-border);
  --pri-soft:var(--ws-selected); --soft:var(--ws-selected); --card:var(--ws-card); --r-lg:28px; --r:20px;
  --sh:0 4px 0 #ece2c9, 0 10px 24px #20384d0d;
}
body{background:var(--ws-surface);color:var(--ws-ink)}

/* 제목: 게임과 같은 둥근 글꼴. 주아체는 굵기가 하나라 굵게·좁은 자간을 풀어 준다 */
h1,h2,h3,.home-hero h1,.service-heading h1,.section-head h2,.home-section-head h2,.logo,.foot .footer-brand b{
  font-family:var(--ws-display);font-weight:400;letter-spacing:0}
h1 em,h2 em{color:var(--ws-primary-strong)}

/* 로고 그림 */
.logo .logo-img{display:block;height:54px;width:auto}
.logo-symbol{display:none}
.foot .footer-brand .logo-img{height:52px;width:auto;display:block;margin-bottom:6px}

/* 버튼: 게임 버튼처럼 둥근 알약 + 아래쪽 두께감. 누르면 살짝 내려간다 */
.btn{border-radius:999px;font-family:var(--ws-display);font-weight:400;font-size:16px;letter-spacing:0;
  background:var(--ws-card);color:var(--ws-ink);border:2px solid var(--ws-border);
  box-shadow:0 4px 0 #e6dcc2;transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 #e6dcc2}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #e6dcc2}
.btn.primary{background:linear-gradient(180deg,#2f9270,var(--ws-primary-strong))!important;color:#fff;border-color:var(--ws-primary-dark);box-shadow:0 4px 0 var(--ws-primary-dark)}
.btn.primary:hover{box-shadow:0 5px 0 var(--ws-primary-dark)}
.btn.primary:active{box-shadow:0 1px 0 var(--ws-primary-dark)}
/* index.html 인라인 스타일의 .primary{background:…!important} 때문에 버튼 배경에는 !important 를 쓴다.
   노랑은 '무료 시연 신청'처럼 가장 먼저 눌러야 할 버튼 하나에만 (게임의 '시작하기'와 같은 역할) */
html body a.btn.btn.primary[href^="#contact/demo"],html body #account-menu a.btn.btn.primary{
  background:linear-gradient(180deg,#ffd45c,var(--ws-accent))!important;color:var(--ws-ink)!important;border-color:var(--ws-accent-dark)!important;box-shadow:0 4px 0 var(--ws-accent-dark)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--ws-info);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none;transition:none}}

/* 카드·패널: 크림 바탕 위의 흰 카드, 둥근 모서리와 두께감 */
.panel,.card,.content-card,.home-content,.guide-copy,.spec-box{border-radius:28px;border-color:var(--ws-border)}
.content-card,.home-content{box-shadow:var(--sh)}
.content-card:hover,.home-content:hover{border-color:var(--ws-primary)}

/* 칩·태그: 게임 미션바처럼 초록 알약 */
.tag,.chip,.category-label{border-radius:999px}
.tag{background:var(--ws-selected);color:var(--ws-primary-dark)}

/* 콘텐츠 카드 그림: 디자인 시스템 아이콘을 크림 판 위에 */
.card-art img.brand-icon,.home-content-art img.brand-icon{width:62%;height:78%;object-fit:contain;filter:drop-shadow(0 8px 10px #20384d14)}
.detail-art img.brand-icon{width:58%;height:auto;max-height:340px;object-fit:contain}
.card-art,.home-content-art,.detail-art{background:linear-gradient(180deg,#fffaf0,#f6eed8)}

/* 카테고리 아이콘 */
.theme-icon{width:56px;height:56px;object-fit:contain;display:block;margin-bottom:8px}

/* 별 장식(성공 표시) */
.ws-star{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;background:url(assets/brand/star.webp) center/contain no-repeat}

/* 예전 ☂ 기호 자리 → 파비콘과 같은 우산 그림 */
.umb-ico{display:block;width:1.15em;height:1.15em}
.member-mark .umb-ico{width:62%;height:62%}

/* 결제 요약: 오늘 결제 0원 (30일 무료 체험) */
.checkout-summary .trial-today{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 2px;padding:12px 14px;border-radius:14px;background:var(--ws-selected)}
.checkout-summary .trial-today b{font-family:var(--ws-display);font-size:1.6rem;color:var(--ws-primary-strong)}
.checkout-summary>button#pay-start{color:#fff!important;border-color:var(--ws-primary-dark)!important;font-size:16px}
.checkout-summary>button#pay-start:disabled{opacity:.6}

/* 디자인 작업용 도구 막대·검토 메모는 고객 화면에 처음부터 숨긴다. 언어 선택은 홈페이지에선 늘 머리줄 안에 들어가므로
   위쪽 44px 자리도 처음부터 비우지 않는다 (예전엔 i18n.js 가 돈 뒤에야 숨어서 0.5~1초 초록 막대가 보이고 머리줄이 튀어 올랐다) */
.review,.note,.review-end{display:none!important}
body{padding-top:0!important}

/* 내 이용 공간 · 시작 4단계: 아직 안 한 1단계(무료 체험)를 눈에 띄게 */
#start-steps [data-step=trial]:not(.is-done){background:#fff4d6;box-shadow:inset 0 0 0 2px var(--ws-accent)}
#start-steps .step-state{font-weight:700;color:var(--ws-ink)}

/* ── 회원 영역: 왼쪽 사이드바 고정 + 휴대폰 아래 탭 (2026-10-10) ── */
.member-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
.member-side{position:sticky;top:20px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:calc(100vh - 140px);padding:16px 12px;background:var(--ws-card);border:1px solid var(--ws-border);border-radius:24px}
.member-side nav{display:flex;flex-direction:column;gap:4px}
.member-side a{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:14px;color:var(--ws-ink);font-weight:600;font-size:15px;text-decoration:none}
.member-side a:hover{background:var(--ws-selected)}
.member-side a[aria-current=page]{background:var(--ws-primary-strong);color:#fff}
.member-side-foot{border-top:1px solid var(--ws-border);padding-top:10px}
.member-side-foot a{font-weight:500;font-size:14px;color:var(--ws-muted)}
.member-main{min-width:0}
.member-tabs{display:none}
@media(max-width:860px){
  .member-shell{display:block}.member-side{display:none}
  .member-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);background:#fffcf3;border-top:1px solid var(--ws-border);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .member-tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ws-muted);text-decoration:none;padding:4px 0}
  .member-tabs a[aria-current=page]{color:var(--ws-primary-strong);font-weight:700}
  .member-tabs span{font-size:20px}
  body:has(.member-tabs){padding-bottom:76px}
  body:has(.member-tabs) .sr-chat{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* 내 슈룹 첫 화면: 상태별 색 */
.ws-hero{padding:30px 32px;border-radius:28px;background:var(--ws-card);border:1px solid var(--ws-border);margin-bottom:22px}
.ws-hero h1{font-size:clamp(28px,3vw,38px);margin:6px 0 10px}
.ws-hero p#ws-msg{font-size:17px;color:var(--ws-ink);margin:0 0 16px}
.ws-hero[data-state=none],.ws-hero[data-state=ended]{background:#fff4d6;border-color:#f3d27a}
.ws-hero[data-state=trial]{background:var(--ws-selected)}
.ws-hero[data-state=pastdue]{background:#fdecea;border-color:#f0b4ab}
.ws-hero[data-state=pastdue] h1{color:#b4442f}
#start-steps li.is-next{background:#fff4d6;box-shadow:inset 0 0 0 2px var(--ws-accent)}
#start-steps li.is-done{opacity:.75}
.ws-summary{padding:24px 28px;border-radius:24px;background:var(--ws-card);border:1px solid var(--ws-border);margin:22px 0}
.ws-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 18px}
.ws-stats div{padding:16px;border-radius:16px;background:var(--ws-selected);display:flex;flex-direction:column;gap:4px}
.ws-stats b{font-family:var(--ws-display);font-weight:400;font-size:28px;color:var(--ws-primary-strong)}
.ws-stats span{font-size:13px;color:var(--ws-muted)}
@media(max-width:600px){.ws-stats{gap:8px}.ws-stats div{padding:12px}.ws-stats b{font-size:21px}}

/* 홈 · 왜 슈룹을 구독할까요? */
.why-sub-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin-top:8px}
.why-sub-card{position:relative;background:var(--ws-card);border:1px solid var(--ws-border);border-radius:28px;padding:28px 26px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh)}
.why-sub-card.is-key{background:linear-gradient(160deg,#fff4d6,#ffe9a8);border-color:#f3d27a}
.why-sub-badge{position:absolute;top:18px;right:18px;background:var(--ws-primary-strong);color:#fff;font-weight:700;font-size:12px;border-radius:999px;padding:4px 12px}
.why-sub-num{font-family:var(--ws-display);font-weight:400;font-size:40px;line-height:1.1;color:var(--ws-primary-strong)}
.why-sub-card.is-key .why-sub-num{font-size:52px;color:#b07400}
.why-sub-card h3{margin:0;font-size:21px}
.why-sub-card p{margin:0;color:var(--ws-muted);line-height:1.65}
.why-sub-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.why-sub-cta span{color:var(--ws-muted);font-size:14px}
@media(max-width:860px){.why-sub-grid{grid-template-columns:1fr}.why-sub-card.is-key .why-sub-num{font-size:44px}}

/* 구독 혜택 (홈 요약 + #benefits 페이지) */
.why-sub-grid-3{grid-template-columns:repeat(3,1fr)}
.why-sub-grid-3 .why-sub-num{font-size:34px}
.why-gift{margin-top:18px;padding:20px 24px;border-radius:24px;background:linear-gradient(160deg,#fff4d6,#ffe9a8);border:1px solid #f3d27a;display:flex;flex-direction:column;gap:6px}
.why-gift>b{font-family:var(--ws-display);font-weight:400;font-size:24px;color:#8a5a00}
.why-gift span{color:var(--ws-ink);line-height:1.65}
.why-gift-big>b{font-size:32px}
.why-safe{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:0;color:var(--ws-primary-strong);font-weight:700}
.why-who{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.why-who .tag{align-self:flex-start}
.why-who a{color:var(--ws-primary-strong);font-weight:700;margin-top:6px}
.why-safe-box{padding:30px 32px;border-radius:28px;background:var(--ws-selected);display:flex;flex-direction:column;gap:14px}
.why-safe-box p{margin:0;color:var(--ws-muted)}
@media(max-width:860px){.why-sub-grid-3,.why-who{grid-template-columns:1fr}}

/* 메뉴 7개(구독 혜택 추가)에 맞춰 간격을 줄인다 */
@media(min-width:861px){.header{gap:20px}.header .nav{gap:clamp(14px,1.6vw,26px)}.header .nav a{white-space:nowrap}.header .account{flex-wrap:nowrap;white-space:nowrap}}
@media(min-width:861px){.i18n-inline .header-actions{flex-wrap:nowrap!important;gap:12px}.i18n-inline .header .i18n-bar select{max-width:112px}}
@media(min-width:861px){.i18n-inline .header-actions{margin-left:16px}}