/* 폰드메이커스 디자인 토큰과 공통 구성 요소.
   기준: Claude Design의 '폰드메이커스' 디자인 시스템(https://claude.ai/artifact/JE6k6ucpHfAk7YcjrxkWVz).
   라이트 값은 예전 pondmakers.com 테마 값 그대로, 다크 값은 그 시스템에서 새로 정의했다. 값을 바꾸면 그쪽 tokens.json과 함께 바꾼다. */
@import url("assets/fonts/pretendard.css");
@import url("assets/fonts/outfit.css");

:root {
  /* 원색 */
  --primary: #1F30FF;
  --second: #2999FF;
  --cyan: #7BE6FF;
  --navy: #16182B;
  --logo-ink: #163B8D;

  /* 쓰임(라이트) */
  --accent: var(--primary);
  --on-accent: #FFFFFF;
  --bg: #FFFFFF;
  --surface: #F0F5FA;
  --card: #FFFFFF;
  --title: #131822;
  --text: #666666;
  --muted: #90A0AF;          /* 2.7:1 — 읽어야 하는 글자에는 쓰지 않는다 */
  --line: #E1E1E1;
  --line-soft: #EEEEEE;
  --sky: #E7F1FB;
  --wave: #E3EFFB;
  --star: #131822;
  --icon-ground: #F0F5FA;    /* 두 색 아이콘(ic-about) 바탕 원 */
  --inverse: #16182B;        /* 테마와 상관없이 어두운 구역(문의) */
  --on-inverse: #FFFFFF;
  --on-inverse-muted: rgba(255, 255, 255, .6);
  --on-inverse-accent: var(--second);
  --on-inverse-line: rgba(255, 255, 255, .1);
  --glass: rgba(255, 255, 255, .92);
  --scrim: rgba(22, 24, 43, .6);
  --photo-shade: rgba(0, 0, 0, .6);
  --focus: #2999FF;
  --shadow-float: 0 10px 40px rgba(19, 24, 34, .08);
  --shadow-card: 0 20px 50px rgba(0, 0, 0, .12);
  --logo-light: block;       /* 밝은 로고/흰 로고 중 무엇을 보일지 */
  --logo-dark: none;

  /* 그라데이션: 끝색이 bg라 테마에 따라 흰색/밤색으로 녹아든다 */
  --gradient: linear-gradient(180deg, var(--navy) 20%, var(--primary) 55%, var(--second) 75%, var(--bg) 100%);
  --gradient-up: linear-gradient(0deg, var(--navy) 20%, var(--primary) 55%, var(--second) 75%, var(--bg) 100%);
  --sky-fade: linear-gradient(0deg, var(--bg) 0%, var(--sky) 100%);

  /* 글꼴 */
  --font-en: "Outfit", "Pretendard Variable", Pretendard, sans-serif;
  --font-ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 글자 크기: 원본 65·40·28·22·18·17·16·15·14·13 단계를 화면 폭에 맞춰 줄인다 */
  --t-65: clamp(30px, 4.4vw, 65px);
  --t-40: clamp(24px, 2.8vw, 40px);
  --t-28: clamp(20px, 1.95vw, 28px);
  --t-22: clamp(18px, 1.55vw, 22px);
  --t-18: clamp(15px, 1.25vw, 18px);
  --t-17: 17px;
  --t-16: 16px;
  --t-15: 15px;
  --t-14: 14px;
  --t-13: 13px;

  /* 간격·모서리 */
  --wrap: 1400px;
  --gutter: clamp(16px, 4vw, 40px);
  --space-xl: clamp(100px, 13vw, 200px);
  --space-lg: clamp(70px, 8vw, 140px);
  --space-md: clamp(40px, 5vw, 80px);
  --radius-20: 20px;
  --radius-30: clamp(20px, 2vw, 30px);
  --radius-40: clamp(24px, 2.8vw, 40px);
  --radius-pill: 999px;

  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --header-h: 84px;
}

/* 다크 테마: 시스템 설정을 따르고, data-theme으로 덮어쓴다(어드민 미리보기) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #7D8AFF; --on-accent: #0E1020;
    --bg: #0E1020; --surface: #171A2E; --card: #1C1F36;
    --title: #F1F4FA; --text: #AEB6C6; --muted: #7F8AA0;
    --line: #2A2E48; --line-soft: #22263D; --sky: #141A36; --wave: #1B2347; --star: #F1F4FA; --icon-ground: #DCE6F5;
    --glass: rgba(28, 31, 54, .9); --scrim: rgba(0, 0, 0, .6); --focus: #7D8AFF;
    --shadow-float: 0 10px 40px rgba(0, 0, 0, .4); --shadow-card: 0 20px 50px rgba(0, 0, 0, .35);
    --logo-light: none; --logo-dark: block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --accent: #7D8AFF; --on-accent: #0E1020;
  --bg: #0E1020; --surface: #171A2E; --card: #1C1F36;
  --title: #F1F4FA; --text: #AEB6C6; --muted: #7F8AA0;
  --line: #2A2E48; --line-soft: #22263D; --sky: #141A36; --wave: #1B2347; --star: #F1F4FA; --icon-ground: #DCE6F5;
  --glass: rgba(28, 31, 54, .9); --scrim: rgba(0, 0, 0, .6); --focus: #7D8AFF;
  --shadow-float: 0 10px 40px rgba(0, 0, 0, .4); --shadow-card: 0 20px 50px rgba(0, 0, 0, .35);
  --logo-light: none; --logo-dark: block;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--t-17)/1.6 var(--font-en); font-family: var(--font-en); word-break: keep-all; overflow-x: hidden; }
body, input, textarea, button, select { font-family: "Outfit", "Pretendard Variable", Pretendard, sans-serif; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--title); }
p, dl, dd, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--title); color: var(--bg); padding: 10px 16px; border-radius: var(--radius-pill); }
.skip:focus { top: 12px; }

.wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.en { font-family: var(--font-en); }

/* 섹션 머리말: 작은 파란 글씨 → 큰 제목 → 설명 */
.title { text-align: center; }
.title .eyebrow { display: block; font: 500 var(--t-16)/1.4 var(--font-ko); color: var(--accent); margin-bottom: 14px; }
.title h2 { font: 700 var(--t-65)/1.3 var(--font-ko); letter-spacing: -0.02em; }
.title p { margin-top: 24px; font-size: var(--t-18); }
.on-dark, .on-dark h2, .on-dark h3 { color: var(--on-inverse); }
.on-dark .eyebrow { color: var(--on-inverse-accent); }
/* 로고: 테마에 맞는 한 벌만 보인다 */
.logo-light { display: var(--logo-light); }
.logo-dark { display: var(--logo-dark); }

/* 반짝이 장식(원본 ic-star) */
.deco { position: absolute; inset: 0; pointer-events: none; }
.deco i { position: absolute; width: 29px; height: 29px; background: var(--star); -webkit-mask: url(assets/img/ic-star.svg) center/contain no-repeat; mask: url(assets/img/ic-star.svg) center/contain no-repeat; animation: twinkle 3s ease-in-out infinite; }
.deco i.s { width: 16px; height: 16px; animation-delay: 1.2s; }
.deco.white i { background: var(--on-inverse); }
@keyframes twinkle { 50% { transform: scale(.7) rotate(45deg); opacity: .6; } }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: var(--radius-pill); border: 0; font: 600 var(--t-16)/1 var(--font-ko); background: var(--card); color: var(--title); transition: transform .3s var(--ease), background .3s; }
.btn::after { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url(assets/img/arrow-basic.svg) center/contain no-repeat; mask: url(assets/img/arrow-basic.svg) center/contain no-repeat; transition: transform .3s var(--ease); }
.btn:hover::after { transform: translateX(4px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-circle { width: 52px; padding: 0; }

/* 나타나는 움직임 */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .deco i, .marquee ul { animation: none !important; }
}