/* 액션영어 — v4 디자인 시스템 (다크 + 골드 + 민트 프리미엄)
   2026.05 — 30년차 디자이너 폴리시 적용
   토큰: 색상 / 타이포 / 간격 / 그림자 / 모션 */
:root{
  /* surface */
  --bg:#0A0E1A;
  --card:#151B2E;
  --card-2:#1C2440;
  --card-hi:#202849;
  --card-elev:#2A3252;

  /* line */
  --border:rgba(255,255,255,0.08);
  --border-2:rgba(255,255,255,0.14);
  --border-mint:rgba(54,199,189,0.22);
  --border-gold:rgba(255,193,7,0.22);

  /* text */
  --text:#FFFFFF;
  --text-2:#A4B0CC;
  --text-3:#6B7794;
  --text-4:#465070;

  /* brand */
  --mint:#36C7BD;
  --mint-glow:#52DCD0;
  --mint-deep:#2BA89D;
  --gold:#FFC107;
  --gold-deep:#E0A800;
  --gold-glow:#FFD93D;

  /* accent */
  --orange:#FF9A2E;
  --pink:#F06292;
  --magenta:#E91E63;
  --blue:#60A5FA;
  --blue-deep:#3B82F6;
  --green:#48BB78;
  --red:#EF4444;
  --purple:#A855F7;

  /* v4.1 Stitch Remix 인사이트 — 신규 토큰 (2026-06-02) */
  --cyan:#00BCAD;              /* tertiary — 진도 인디케이터·active filter */
  --cyan-deep:#00453F;         /* cyan container 끝 */
  --cyan-glow:#25DDCD;         /* cyan 강조 */
  --orange-urgent:#FF8C00;     /* 긴급 알림·streak 위험·D7+ 컴백 */
  --navy-stitch:#162839;       /* deep navy (v2 가능성 — 향후 마이그 시) */

  /* status */
  --kakao:#FEE500;
  --naver:#03C75A;
  --google-blue:#4285F4;
  --google-red:#EA4335;
  --google-yellow:#FBBC05;
  --google-green:#34A853;

  /* shadow */
  --sh-card:0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
  --sh-hero:0 14px 40px rgba(54,199,189,0.18), 0 0 0 1px rgba(54,199,189,0.18);
  --sh-gold:0 6px 18px rgba(255,193,7,0.32), 0 0 0 1px rgba(255,193,7,0.18);
  --sh-elev:0 24px 60px rgba(0,0,0,0.45);

  /* radius */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:28px;

  /* spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px;

  /* v2.0 테마 보강 (2026-05-26) — additive, 기존 페이지 무영향 */
  --lime:#A3E635;                 /* 팝 액센트 (fill/badge 전용) */
  --blue-cta:#1D4ED8;             /* 주 CTA 딥블루 */
  --blue-cta-deep:#1E40AF;
  --cta-primary:var(--blue-cta);  /* 컴포넌트용 시맨틱 alias */
  --font-display:'Black Han Sans','Pretendard',sans-serif;  /* 헤드라인 */
  --font-round:'Jua','Pretendard',sans-serif;               /* 수치/포인트 */
  --font-pixel:'Press Start 2P',ui-monospace,monospace;     /* eyebrow */

  /* v3.0 리뉴얼 토큰 (2026-05-29) — additive, 신규 컴포넌트 전용
     출처: design_handoff_renewal/renewal-tokens.css + README §5
     충돌 토큰은 -r(renewal) 접미사로 격리 → 기존 페이지 무영향 */
  /* brand (네이비 메인) */
  --brand:#1F4E79;
  --brand-2:#2F7AD6;
  --brand-3:#143962;
  /* gold (리뉴얼: #FFD700 메인, 기존 --gold #FFC107 과 분리) */
  --gold-r:#FFD700;
  --gold-r2:#D4A960;
  --gold-r3:#B9893A;
  /* dark surface (학습 외 모드: 온보딩/계정/결제/TPR) */
  --bg-dark:#07091F;
  --bg-dark-2:#0A0E2E;
  --bg-dark-3:#06081A;
  --bg-card:rgba(255,255,255,0.04);
  --line-dark:rgba(255,255,255,0.10);
  /* light surface (학습 모드: words/patterns/conversation) */
  --bg-light:#F5F7FA;
  --ink:#0e1326;
  --ink-soft:#6b7588;
  --line:#e6e9ef;
  /* accent (리뉴얼) */
  --neon-mint:#5BFFEE;
  --magenta-r:#FF3D8A;
  --red-r:#E63946;
  --lime-r:#C6FF3D;
  --purple-r:#7A4DFF;
  /* 리뉴얼 시맨틱 alias */
  --brand-cta:var(--brand);
  --brand-cta-glow:var(--brand-2);
}

/* 리뉴얼 폰트 헬퍼 (renewal-tokens.css 호환) */
.bhs{font-family:'Black Han Sans','Pretendard',sans-serif;letter-spacing:-0.01em}
.pixel-num{font-family:'Press Start 2P',ui-monospace,monospace;letter-spacing:0.02em}

/* 리뉴얼 모션 키프레임 (캐릭터·뱃지·마키 공용)
   기존 .pulse(opacity) 와 충돌 피하려 rn- 접두사 사용 */
@keyframes rn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes rn-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.92}}
@keyframes rn-wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes rn-mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.rn-bob{animation:rn-bob 2.6s ease-in-out infinite}
.rn-pulse-anim{animation:rn-pulse 1.8s ease-in-out infinite}
.rn-wiggle{animation:rn-wiggle 1.2s ease-in-out infinite}
.rn-mq{animation:rn-mq 18s linear infinite}

/* 라이트 변형 — 학습 콘텐츠 화면용. 컨테이너/ body 에 data-theme="light" 적용 시에만 동작.
   dark 전용 토큰 누수 방지를 위해 시맨틱 토큰 전체 재정의. */
[data-theme="light"]{
  --bg:#F5F7FB;
  --card:#FFFFFF; --card-2:#EEF2F9; --card-hi:#E8EDF6; --card-elev:#FFFFFF;
  --border:#E2E8F0; --border-2:#CBD5E1;
  --border-mint:rgba(54,199,189,0.35); --border-gold:rgba(255,193,7,0.40);
  --text:#0F172A; --text-2:#475569; --text-3:#94A3B8; --text-4:#CBD5E1;
  --sh-card:0 8px 24px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04);
  --sh-hero:0 14px 40px rgba(29,78,216,0.12), 0 0 0 1px rgba(29,78,216,0.10);
  --sh-gold:0 6px 18px rgba(255,193,7,0.28);
  --sh-elev:0 24px 60px rgba(15,23,42,0.16);
}

/* 리뉴얼 다크 모드 — body 또는 컨테이너에 data-renewal="dark" 적용 시 활성.
   (온보딩/계정/결제/TPR 화면용. 기존 v4 다크와 분리해 점진 마이그레이션) */
[data-renewal="dark"]{
  --bg:var(--bg-dark);
  --card:var(--bg-dark-2);
  --card-2:var(--bg-card);
  --border:var(--line-dark);
  --text:#FFFFFF;
  --text-2:rgba(255,255,255,0.72);
  --text-3:rgba(255,255,255,0.48);
  --gold:var(--gold-r);
  --mint:var(--neon-mint);
}

/* 리뉴얼 라이트 모드 — 학습 콘텐츠(words/patterns/conversation). */
[data-renewal="light"]{
  --bg:var(--bg-light);
  --card:#FFFFFF;
  --card-2:#FFFFFF;
  --border:var(--line);
  --text:var(--ink);
  --text-2:var(--ink-soft);
  --text-3:#9aa3b5;
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0;padding:0;background:var(--bg);min-height:100%}
body{
  font-family:'Pretendard',system-ui,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  color:var(--text);font-size:14px;letter-spacing:-0.01em;line-height:1.5;
  -webkit-font-smoothing:antialiased;word-break:keep-all;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit}
img,svg{display:block;max-width:100%}
input,textarea,select{font-family:inherit;color:inherit}
.jua{font-family:'Jua','Pretendard',sans-serif}
.chunk{font-family:'Black Han Sans',sans-serif;letter-spacing:-0.01em}
.pix{font-family:'Press Start 2P',monospace;letter-spacing:0.02em}

/* PHONE FRAME (mobile-first; centered on desktop) */
.frame{
  max-width:480px;margin:0 auto;background:var(--bg);
  min-height:100vh;position:relative;overflow-x:hidden;
}
/* ============================================================
   웹 반응형 레이아웃 표준 (2026-06-30)
   - 모바일(<700px): 기존 동작 100% 유지 (변경 없음)
   - 700px↑     : 폰 목업 해제 → 콘텐츠가 화면 폭을 자연스럽게 활용
   패딩 기준(--web-gut, --web-max)
   ├ --web-gut : 콘텐츠와 화면 가장자리 사이 "최소" 좌우 여백
   └ --web-max : 콘텐츠 중앙 정렬 시 최대 폭. 화면이 넓어지면 남는
                 공간은 (화면폭-최대폭)/2 로 좌우에 균등 분배된다.
   배경은 .frame 이 full-bleed(화면 전체 폭)로 깔리므로 페이지별
   배경색(라이트/다크)이 그대로 유지된다. 카드 2열 그리드는 데스크톱
   3열·와이드 4열로 자동 reflow 된다.
   ============================================================ */
:root{
  --web-gut:18px;   /* 최소 좌우 여백 기준 */
  --web-max:480px;  /* 콘텐츠 최대 폭 기준 (모바일 기본) */
}

/* 태블릿↑ : 폰 목업 해제 + full-bleed 중앙 정렬 */
@media(min-width:700px){
  :root{ --web-max:560px; }
  body{ margin:0; padding:0; background:transparent; display:block; }
  .frame{
    max-width:none; width:100%; margin:0;
    min-height:100vh; border:0; border-radius:0;
    box-shadow:none; overflow:visible; box-sizing:border-box;
    padding-left:  max(var(--web-gut), calc((100% - var(--web-max)) / 2));
    padding-right: max(var(--web-gut), calc((100% - var(--web-max)) / 2));
  }
  /* 모바일 전용 목업 크롬(가짜 상태바·노치) 숨김 */
  .frame > .status{ display:none; }
  /* 하단 탭바를 콘텐츠 폭에 맞춰 중앙 정렬 (인라인 max-width 덮어쓰기) */
  .rn-tabbar, nav.rn-tabbar, .tabbar{ max-width:var(--web-max) !important; }
}

/* 콘텐츠 화면은 대부분 1열(모바일) 레이아웃이라 폭을 과하게 넓히면
   캐릭터·카드가 늘어나 깨져 보인다. 그래서 폭은 560px로 가운데 정렬만 하고,
   넓은 화면에서는 배경만 full-bleed로 채운다. (다열 확장은 하지 않음) */

/* STATUS BAR (iPhone mock) */
.status{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px 6px;font-size:14px;font-weight:700;color:#fff;
  position:relative;z-index:1;
}
.status .island{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:114px;height:28px;background:#000;border-radius:18px;
}
.status .signals{display:flex;gap:6px;align-items:center;font-size:12px}

/* HEADER (page title) */
.head{padding:6px 18px 14px;position:relative}
.head .eyebrow{
  display:inline-block;font-family:'Press Start 2P',monospace;
  font-size:9px;color:var(--mint);letter-spacing:0.2em;margin-bottom:6px;
}
.head h1{
  font-family:'Black Han Sans',sans-serif;font-size:22px;line-height:1.2;color:#fff;
}
.head .head-right{
  position:absolute;top:8px;right:18px;display:flex;align-items:center;gap:8px;
}

/* HEADER with BACK button */
.head-back{
  display:flex;align-items:center;gap:10px;padding:8px 18px 14px;
}
.head-back .back{
  width:36px;height:36px;border-radius:50%;background:var(--card);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;
}
.head-back h1{
  font-family:'Black Han Sans',sans-serif;font-size:20px;line-height:1.2;
}
.head-back .right{margin-left:auto}

/* PILL (gold/ghost) */
.pill-gold{
  background:var(--gold);color:#1a1a1a;
  font-weight:900;font-size:12px;font-family:'Jua';
  padding:8px 16px;border-radius:999px;
  box-shadow:var(--sh-gold);
  display:inline-flex;align-items:center;gap:4px;
}
.pill-coin{
  background:rgba(255,193,7,0.15);color:var(--gold);
  border:1px solid var(--border-gold);
  font-weight:900;font-size:12px;
  padding:6px 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:4px;
}
.pill-fire{
  background:rgba(239,68,68,0.12);color:#FCA5A5;
  border:1px solid rgba(239,68,68,0.2);
  font-weight:900;font-size:12px;
  padding:6px 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:4px;
}
.pill-trust{
  margin:0 18px;background:var(--card);border:1px solid var(--border);
  border-radius:999px;padding:9px 14px;display:inline-flex;
  align-items:center;gap:6px;font-size:11px;color:var(--text-2);font-weight:700;
}

/* BUTTONS */
.btn-gold{
  background:linear-gradient(180deg,var(--gold-glow),var(--gold));
  color:#1a1a1a;font-weight:900;font-family:'Jua';font-size:14px;
  padding:12px 20px;border-radius:12px;
  box-shadow:0 4px 0 var(--gold-deep),0 8px 16px rgba(255,193,7,0.3);
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  transition:transform .12s ease;
}
.btn-gold:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold-deep)}
.btn-gold.lg{font-size:15px;padding:14px 24px;width:100%}
.btn-ghost{
  background:rgba(255,255,255,0.08);color:#fff;
  border:1px solid var(--border-2);font-weight:800;font-size:13px;
  padding:12px 18px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-mint{
  background:linear-gradient(180deg,var(--mint-glow),var(--mint));
  color:#0a1a18;font-weight:900;font-family:'Jua';font-size:14px;
  padding:12px 20px;border-radius:12px;
  box-shadow:0 4px 0 var(--mint-deep),0 8px 16px rgba(54,199,189,0.3);
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
}
.btn-row{display:flex;gap:8px}

/* HERO card */
.hero{
  margin:14px 18px 0;background:var(--card-hi);
  border:1px solid var(--border-mint);
  border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--sh-hero);position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 0% 0%,rgba(54,199,189,0.15),transparent 60%),
    radial-gradient(circle at 100% 100%,rgba(255,193,7,0.08),transparent 60%);
  pointer-events:none;
}
.hero > *{position:relative}
.hero .lv{
  font-family:'Press Start 2P',monospace;font-size:9px;
  color:var(--mint);letter-spacing:0.15em;margin-bottom:8px;
}
.hero h2{
  font-family:'Black Han Sans',sans-serif;font-size:28px;line-height:1.15;
}
.hero h2 .mint{color:var(--mint)}
.hero h2 .gold{color:var(--gold)}
.hero p{font-size:12px;color:var(--text-2);margin-top:6px}
.hero .ctas{display:flex;gap:8px;margin-top:14px}

/* SECTION */
.sec{padding:22px 18px 0}
.sec h3{font-family:'Jua';font-size:18px;color:#fff;line-height:1.2}
.sec .sub{font-size:11px;color:var(--text-3);margin-top:3px}
.sec .h-row{display:flex;align-items:flex-end;justify-content:space-between}
.sec .h-row a{font-size:12px;color:var(--mint);font-weight:700}

/* GRID — 3 stat cards */
.stats-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 18px 0}
.stat{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px 8px;text-align:center;
}
.stat .ico{
  width:40px;height:40px;border-radius:50%;
  margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.stat.s-mint .ico{background:rgba(54,199,189,0.15);color:var(--mint)}
.stat.s-blue .ico{background:rgba(96,165,250,0.15);color:var(--blue)}
.stat.s-gold .ico{background:rgba(255,193,7,0.15);color:var(--gold)}
.stat.s-pink .ico{background:rgba(240,98,146,0.15);color:var(--pink)}
.stat .t{font-family:'Jua';font-size:13px;color:#fff;line-height:1.1}
.stat .s{font-size:10px;color:var(--text-3);margin-top:3px}

/* ROW (lesson/menu) */
.rows{padding:12px 18px 0;display:flex;flex-direction:column;gap:8px}
.row{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:12px 14px;
  transition:border-color .15s ease,box-shadow .15s ease,transform .1s ease;
}
/* 행 hover/누름 피드백 — 모든 항목 동일하게 반응 (한 항목만 강조 고정 X) */
.row:hover,.rn-row:hover{border-color:#2DC5B0;box-shadow:0 12px 28px rgba(45,197,176,0.28);transform:translateY(-4px)}
.row:active,.rn-row:active{transform:translateY(-1px) scale(0.997)}
/* 단어 카테고리 카드(.rn-cat)도 동일한 떠오름 피드백 */
.rn-cat{transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease}
.rn-cat:hover{border-color:#2DC5B0;box-shadow:0 12px 28px rgba(45,197,176,0.22);transform:translateY(-4px)}
.rn-cat:active{transform:translateY(-1px) scale(0.997)}
.row .ico{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.row .ico.run{background:linear-gradient(135deg,#FF9A2E,#FF7A00)}
.row .ico.food{background:linear-gradient(135deg,#F06292,#E91E63)}
.row .ico.chat{background:linear-gradient(135deg,#60A5FA,#3B82F6)}
.row .ico.tpr{background:linear-gradient(135deg,#36C7BD,#2BA89D)}
.row .ico.gold{background:linear-gradient(135deg,#FFD93D,#FFC107)}
.row .ico.purple{background:linear-gradient(135deg,#A855F7,#7E22CE)}
.row .ico.dark{background:rgba(255,255,255,0.06);font-size:20px}
.row .meta{flex:1;min-width:0}
.row .meta .t{font-family:'Jua';font-size:14px;color:#fff}
.row .meta .m{font-size:10px;color:var(--text-3);margin-top:3px}
.row .meta .m .star{color:var(--gold-glow);font-weight:900}
.row .meta .m .coin{color:var(--mint);font-weight:900}
.row .meta .m .pill{
  background:rgba(239,68,68,0.15);color:#FCA5A5;
  padding:1px 6px;border-radius:4px;font-weight:700;
}
.row .arr{color:var(--text-3);font-size:18px}
.row.is-empty{justify-content:center;color:var(--text-3);font-size:12px;padding:24px 14px;text-align:center}

/* CHIPS (horizontal scroll) */
.chips{
  display:flex;gap:8px;overflow-x:auto;
  padding:12px 18px;scrollbar-width:none;-ms-overflow-style:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;padding:8px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text-2);font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.chip.on{background:rgba(54,199,189,0.15);border-color:var(--mint);color:var(--mint)}

/* TAB BAR */
.tab-spacer{height:88px}
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  max-width:480px;width:100%;
  background:rgba(15,19,40,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  display:flex;justify-content:space-around;align-items:center;
  padding:8px 8px max(8px,env(safe-area-inset-bottom));z-index:50;
}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;opacity:.5}
.tab .em{font-size:22px;line-height:1}
.tab .lbl{font-size:9px;color:var(--text-2);font-weight:700}
.tab.on{opacity:1}
.tab.on .em{
  background:rgba(255,193,7,0.18);border-radius:50%;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--gold);
}
.tab.on .lbl{color:var(--gold)}
@media(min-width:700px){.tabbar{position:fixed;border-radius:0;max-width:var(--web-max)}}

/* CARD HELPERS */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:14px;
}
.card-elev{
  background:var(--card-hi);border:1px solid var(--border-2);
  border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-card);
}
.card-mint{
  background:linear-gradient(135deg,rgba(54,199,189,0.12),rgba(54,199,189,0.04));
  border:1px solid var(--border-mint);border-radius:var(--r);padding:14px;
}
.card-gold{
  background:linear-gradient(135deg,rgba(255,193,7,0.10),rgba(255,193,7,0.04));
  border:1px solid var(--border-gold);border-radius:var(--r);padding:14px;
}

/* BALANCE big number */
.balance{
  background:linear-gradient(135deg,#1C2440 0%,#15193A 60%,#0F1430 100%);
  border:1px solid rgba(255,193,7,0.18);border-radius:var(--r-lg);padding:22px 18px;
  position:relative;overflow:hidden;margin:16px 18px 0;
}
.balance::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 100% 0%,rgba(255,193,7,0.18),transparent 60%);
  pointer-events:none;
}
.balance .lab{
  position:relative;font-family:'Press Start 2P',monospace;font-size:9px;
  color:var(--gold);letter-spacing:0.18em;margin-bottom:10px;
}
.balance .num{
  position:relative;font-family:'Jua';font-size:42px;line-height:1;color:#fff;
  display:flex;align-items:baseline;gap:6px;
}
.balance .num .u{font-size:18px;color:var(--gold)}
.balance .sub{
  position:relative;font-size:11px;color:var(--text-3);margin-top:6px;
}
.balance .actions{position:relative;display:flex;gap:8px;margin-top:14px}

/* AUTH/center layouts */
.center-wrap{
  min-height:calc(100vh - 60px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 24px;text-align:center;gap:20px;
}
.brand-logo{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.brand-logo .mark{
  width:60px;height:60px;border-radius:16px;
  background:linear-gradient(135deg,var(--mint),var(--mint-deep));
  display:flex;align-items:center;justify-content:center;
  font-family:'Jua';font-size:32px;color:#fff;
  box-shadow:0 8px 24px rgba(54,199,189,0.35);
}
.brand-logo .label{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--mint);letter-spacing:0.25em}
.brand-logo .name{font-family:'Jua';font-size:24px;color:#fff}

/* SOCIAL login buttons */
.social-btn{
  width:100%;padding:14px 16px;border-radius:14px;
  display:flex;align-items:center;gap:14px;
  font-weight:900;font-size:14px;
  border:1px solid var(--border);
  transition:transform .12s ease, background .15s ease;
}
.social-btn:active{transform:scale(0.985)}
.social-btn .ico{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;
}
.social-btn .arr{margin-left:auto;color:var(--text-3);font-size:18px}
.social-btn.kakao{background:#FEE500;color:#3C1E1E;border-color:#FEE500}
.social-btn.kakao .ico{background:transparent}
.social-btn.naver{background:#03C75A;color:#fff;border-color:#03C75A}
.social-btn.naver .ico{background:#fff;color:#03C75A}
.social-btn.google{background:#fff;color:#1a1a1a;border-color:#fff}
.social-btn.google .ico{background:#fff}

/* TOPIC GRID / Category */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px 18px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 18px 0}
.tile{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:14px;text-align:left;
}
.tile .em{font-size:32px;line-height:1;margin-bottom:8px}
.tile .t{font-family:'Jua';font-size:14px;color:#fff}
.tile .m{font-size:11px;color:var(--text-3);margin-top:3px}
.tile.lg{padding:16px;aspect-ratio:1/1.05;display:flex;flex-direction:column;justify-content:space-between}

/* POLICY blocks */
.policy{padding:16px 18px 0}
.policy h3{font-family:'Jua';font-size:16px;color:#fff;margin-top:18px;margin-bottom:8px}
.policy h3:first-child{margin-top:0}
.policy h3 .n{
  display:inline-block;width:24px;height:24px;border-radius:50%;
  background:rgba(54,199,189,0.15);color:var(--mint);
  font-size:12px;font-weight:900;text-align:center;line-height:24px;
  margin-right:8px;vertical-align:middle;
}
.policy ul{list-style:none;padding:0}
.policy ul li{
  padding:6px 0 6px 16px;position:relative;font-size:13px;color:var(--text-2);line-height:1.6;
}
.policy ul li::before{
  content:"·";position:absolute;left:6px;color:var(--mint);font-weight:900;
}

/* AVATAR */
.avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--mint),var(--mint-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Jua';font-size:28px;
}

/* FORM */
.input{
  width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:12px 14px;color:#fff;font-size:14px;
}
.input:focus{outline:none;border-color:var(--mint)}

/* DIVIDER */
.div-h{height:1px;background:var(--border);margin:14px 0}

/* ACCESSIBILITY */
:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}

/* MOTION */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1.4s linear infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.pulse{animation:pulse 1.2s ease-in-out infinite}

/* ========================================================================
   RENEWAL v3.0 공통 컴포넌트 (2026-05-29)
   출처: design_handoff_renewal/README §8 + components/shared.jsx
   모두 rn- 접두사로 격리 → 기존 v4 페이지·컴포넌트와 충돌 없음
   ======================================================================== */

/* Frame & section helpers --------------------------------------------------*/
.rn-frame{max-width:480px;margin:0 auto;min-height:100vh;position:relative;overflow-x:hidden;background:var(--bg)}
.rn-frame.dark{background:linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-dark-2) 60%,var(--bg-dark-3) 100%);color:#fff}
.rn-frame.light{background:var(--bg-light);color:var(--ink)}
.rn-section{padding:14px 16px}
.rn-section.tight{padding:8px 16px}

/* Pixel kicker label -------------------------------------------------------*/
.rn-kicker{font-family:'Press Start 2P',ui-monospace,monospace;font-size:9px;letter-spacing:0.22em;color:var(--neon-mint);text-transform:uppercase}
.rn-kicker.gold{color:var(--gold-r)}
.rn-kicker.dim{color:rgba(255,255,255,0.48)}

/* Headers ------------------------------------------------------------------*/
.rn-header{padding:52px 18px 8px;position:relative}
.rn-header.dark{background:transparent;color:#fff}
.rn-header.light{background:#fff;border-bottom:1px solid #EEF1F5;padding:52px 18px 12px}
.rn-header .row{display:flex;align-items:center;gap:10px}
.rn-header .back{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,0.06);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;border:0;cursor:pointer}
.rn-header.light .back{background:#F2F4F8;color:var(--ink)}
.rn-header .title{font-family:'Black Han Sans','Pretendard',sans-serif;font-size:22px;letter-spacing:-0.01em;line-height:1.1;color:#fff}
.rn-header.light .title{color:var(--ink);font-family:'Jua','Pretendard',sans-serif;font-size:20px}
/* 헤더 제목: 한 줄 유지 + 말줄임 (토픽이 길어도 줄바꿈 깨짐 방지) */
.rn-header .title{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-header .row > a,.rn-header .row .back,.rn-header .row .rn-chip{flex-shrink:0}
.rn-header .spacer{flex:0 0 0}
.rn-header .logo-tile{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;font-family:'Jua',sans-serif;font-size:16px;display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 30px}
.rn-header .logo-tile::after{content:'';position:absolute;top:2px;right:2px;width:4px;height:4px;border-radius:50%;background:var(--gold-r)}

/* Chips (스트릭·코인·뱃지) -------------------------------------------------*/
.rn-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;font-family:'Jua',sans-serif;font-size:12px;line-height:1;white-space:nowrap}
.rn-chip.streak{background:#FFF4DB;color:#B9893A;border:1px solid rgba(185,137,58,0.18)}
.rn-chip.coin{background:#EEF3FB;color:var(--brand);border:1px solid rgba(31,78,121,0.12)}
.rn-chip.coin .l{width:14px;height:14px;border-radius:50%;background:var(--gold-r);color:#1a1200;font-size:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
.rn-chip.mint{background:rgba(91,255,238,0.16);color:var(--neon-mint);border:1px solid rgba(91,255,238,0.3)}
.rn-chip.gold{background:#FFF4DB;color:#9A6B00;border:1px solid rgba(255,215,0,0.32)}
/* 가짜 상태바(9:41·노치·신호) 전역 숨김 — 실제 폰 상태바와 중복되어 부자연스러움 (일부 페이지가 lp_service_fixes.css 미로드라 여기서 보장) */
.status{display:none!important}
.rn-chip.ghost-dark{background:rgba(255,255,255,0.06);color:#fff;border:1px solid rgba(255,255,255,0.14)}

/* Pill tabs ----------------------------------------------------------------*/
.rn-pill-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;scrollbar-width:none}
.rn-pill-tabs::-webkit-scrollbar{display:none}
.rn-pill-tab{flex:0 0 auto;height:34px;padding:0 14px;border-radius:999px;font-family:'Jua',sans-serif;font-size:13px;display:inline-flex;align-items:center;background:#fff;color:var(--ink);border:1px solid #E6E9EF;cursor:pointer}
.rn-pill-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.rn-frame.dark .rn-pill-tab{background:transparent;color:#fff;border-color:rgba(255,255,255,0.14)}
.rn-frame.dark .rn-pill-tab.active{background:rgba(91,255,238,0.18);color:var(--neon-mint);border-color:rgba(91,255,238,0.5);box-shadow:0 0 12px rgba(91,255,238,0.28)}

/* Hero card ----------------------------------------------------------------*/
.rn-hero{position:relative;border-radius:16px;padding:18px;background:linear-gradient(135deg,var(--brand) 0%,#0E1326 100%);color:#fff;overflow:hidden;min-height:120px;box-shadow:0 6px 18px rgba(31,78,121,0.35)}
.rn-hero .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(91,255,238,0.18);color:var(--neon-mint);font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:0.15em;margin-bottom:10px}
.rn-hero .badge.gold{background:rgba(255,215,0,0.18);color:var(--gold-r)}
.rn-hero h2{font-family:'Black Han Sans',sans-serif;font-size:22px;line-height:1.15;letter-spacing:-0.01em;margin:0 0 8px;color:#fff;max-width:68%}
.rn-hero h2 .g{color:var(--gold-r)}
.rn-hero p{font-size:11px;line-height:1.5;color:rgba(255,255,255,0.78);max-width:68%;margin:0}
.rn-hero .mascot{position:absolute;right:8px;bottom:0;width:96px;height:auto;animation:rn-bob 2.6s ease-in-out infinite;pointer-events:none}
.rn-hero .deco{position:absolute;opacity:0.7;pointer-events:none}
.rn-hero .deco.tl{top:10px;left:12px;animation:rn-bob 3.4s ease-in-out infinite}
.rn-hero .deco.tr{top:14px;right:20px;animation:rn-bob 2.8s ease-in-out 0.4s infinite}

/* Buttons (rn- 접두사로 기존 .btn 과 분리) ---------------------------------*/
.rn-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:50px;padding:0 18px;border-radius:14px;font-family:'Jua',sans-serif;font-size:15px;font-weight:900;border:0;cursor:pointer;white-space:nowrap;transition:transform .08s ease, box-shadow .15s ease}
.rn-btn:active{transform:translateY(1px) scale(0.99)}
.rn-btn.block{width:100%}
.rn-btn.gold{background:linear-gradient(180deg,#FFD700 0%,#B9893A 100%);color:#1a1200;box-shadow:0 6px 20px rgba(255,215,0,0.4)}
.rn-btn.blue{background:linear-gradient(180deg,var(--brand-2) 0%,var(--brand) 100%);color:#fff;box-shadow:0 6px 18px rgba(31,78,121,0.35)}
.rn-btn.light-2{background:#fff;color:var(--brand);border:1.5px solid #E1E5EC}
.rn-btn.ghost-dark{background:rgba(255,255,255,0.10);color:#fff;border:1px solid rgba(255,255,255,0.18)}
.rn-btn.kakao{background:#FEE500;color:#191919}
.rn-btn.naver{background:#03C75A;color:#fff}
.rn-btn.google{background:#fff;color:#1f1f1f;box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid #E5E7EB}

/* List rows (라이트) -------------------------------------------------------*/
.rn-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #EEF1F5;border-radius:12px;padding:12px 14px;color:var(--ink);text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.rn-row + .rn-row{margin-top:8px}
.rn-row .icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 40px}
.rn-row .body{flex:1;min-width:0}
.rn-row .title{font-family:'Jua',sans-serif;font-size:14px;color:var(--ink);line-height:1.2;display:flex;align-items:center;gap:6px}
.rn-row .meta{font-size:11px;color:var(--ink-soft);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rn-row .arrow{color:#C8CDD6;font-size:18px;flex:0 0 auto}
.rn-row.gold{border:1.5px solid var(--gold-r);box-shadow:0 4px 14px rgba(255,215,0,0.15)}
.rn-row .tag{display:inline-flex;padding:2px 8px;border-radius:999px;background:#F2F4F8;color:var(--ink-soft);font-size:10px}
.rn-row .tag.gold{background:#FFF4DB;color:#B9893A}
.rn-row .tag.mint{background:#E4FBF9;color:#1F8C82}

/* Cards --------------------------------------------------------------------*/
.rn-card{background:#fff;border:1px solid #EEF1F5;border-radius:14px;padding:14px}
.rn-card.dark{background:var(--bg-card);border-color:var(--line-dark);color:#fff}
.rn-card .h{font-family:'Jua',sans-serif;font-size:14px;margin-bottom:6px}

/* Category 2-col grid ------------------------------------------------------*/
.rn-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rn-cat{background:#fff;border:1px solid #EEF1F5;border-radius:12px;padding:14px;text-decoration:none;color:var(--ink);position:relative}
.rn-cat .ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:10px}
.rn-cat .name{font-family:'Jua',sans-serif;font-size:16px;line-height:1.1}
.rn-cat .ex{font-size:11px;color:var(--ink-soft);margin-top:3px}
.rn-cat .count{font-size:11px;color:var(--ink-soft);margin-top:6px}
.rn-cat .study-badge{position:absolute;top:8px;right:8px;background:#FFF4DB;color:#B9893A;font-size:10px;font-family:'Jua',sans-serif;padding:2px 8px;border-radius:999px}
/* 카테고리 틴트 */
.rn-cat[data-cat="food"] .ico{background:#FFF4E5;color:var(--orange)}
.rn-cat[data-cat="animal"] .ico{background:#F1ECFF;color:var(--purple-r)}
.rn-cat[data-cat="travel"] .ico{background:#E8F1FB;color:var(--brand)}
.rn-cat[data-cat="family"] .ico{background:#FFEBF3;color:var(--magenta-r)}
.rn-cat[data-cat="body"] .ico{background:#FFF4DB;color:#B9893A}

/* Tab bar (하단) -----------------------------------------------------------*/
.rn-tabbar{position:sticky;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-around;padding:8px 6px 22px;background:#fff;border-top:1px solid #EEF1F5;z-index:30}
.rn-tabbar.dark{background:rgba(7,9,31,0.96);border-top-color:rgba(255,255,255,0.08);color:#fff;backdrop-filter:blur(10px)}
.rn-tabbar .item{flex:1;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-family:'Jua',sans-serif;color:var(--ink-soft);text-decoration:none;border-radius:12px;padding:6px 4px}
.rn-tabbar .item .ico{font-size:18px;line-height:1}
.rn-tabbar .item.active{background:var(--ink);color:#fff}
.rn-tabbar.dark .item{color:rgba(255,255,255,0.5)}
.rn-tabbar.dark .item.active{background:linear-gradient(180deg,#FFD700,#B9893A);color:#1a1200}

/* Sticky bottom CTA (랜딩 등) ----------------------------------------------*/
.rn-sticky-cta{position:sticky;bottom:0;left:0;right:0;background:#fff;border-radius:18px 18px 0 0;padding:14px 16px 22px;box-shadow:0 -8px 24px rgba(0,0,0,0.10);z-index:25}
.rn-sticky-cta .trust{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:10px;color:var(--ink-soft)}
.rn-sticky-cta .trust span{flex:1;text-align:center;white-space:nowrap}
.rn-sticky-cta .secondary{display:block;text-align:center;font-size:13px;color:var(--ink-soft);text-decoration:underline;margin-top:8px}

/* Pixel deco container -----------------------------------------------------*/
.rn-pixel{position:absolute;pointer-events:none}
.rn-pixel.star{width:22px;height:22px;color:var(--gold-r)}
.rn-pixel.cube{width:18px;height:18px;color:var(--neon-mint)}
.rn-pixel.heart{width:20px;height:20px;color:var(--magenta-r)}

/

/* 프로필 아바타(.rn-avatar) — 마이페이지 전용. 크기 미지정이라 넓은 화면에서
   캐릭터 원본(500x723)이 그대로 커지던 문제 수정: 72px 컬럼 + LV 배지를
   이미지 바로 아래에 세로로 쌓아 겹침 방지(절대위치 X). */
.rn-avatar{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;width:72px;align-self:center}
.rn-avatar img{width:72px;height:auto;display:block;border-radius:12px}
.rn-avatar .lv{display:inline-block;background:linear-gradient(180deg,#FFD700,#B9893A);
  color:#1a1200;font-family:'Jua',sans-serif;font-size:9px;line-height:1;padding:3px 8px;
  border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,0.3)}