/* Lutimize 전역 스타일. 원래는 base.html 의 <style> 블록이었다.
 *
 * HTML 은 Vary: Cookie 때문에 Cloudflare 엣지에서 영구 DYNAMIC 이라, 인라인으로 두면
 * 이 48KB 가 페이지뷰마다 새로 나갔다. 정적 파일로 빼면 해시 파일명 + 엣지 캐시로
 * 흡수된다(WhiteNoise CompressedManifestStaticFilesStorage).
 *
 * ⚠ 이 파일을 링크하는 <link> 는 base.html 에서 bootstrap-icons CSS **뒤**,
 *   하위 템플릿의 <style> **앞** 에 있어야 한다. 앞으로 옮기면 아이콘 CSS 가
 *   이걸 덮고, 뒤로 옮기면 login_page/register_page 의 .btn/.form-group
 *   오버라이드가 죽는다.
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}

html {
    /* 오프스크린 요소(모바일 드로어 등)가 문서 가로 폭을 늘려 페이지가
       우측으로 밀리는 버그 방지 — 가로 스크롤만 차단(세로/고정헤더/팝업
       영향 없음). hidden 은 스크롤바만 없앨 뿐 scrollTo/scrollIntoView 의
       프로그래매틱 가로 이동은 허용하므로, 지원 브라우저에선 clip 으로
       상향해 가로 이동 자체를 금지한다(미지원 구형은 hidden 폴백).
       주의 1: 여기에 height:100% 를 함께 두면 html 이 뷰포트 높이로 고정된
       스크롤 박스가 되어(overflow-x 지정이 overflow-y 를 auto 로 승격)
       세로 스크롤이 통째로 막힌다. iOS 하단바 대응은 body 의
       min-height:-webkit-fill-available 로 충족하므로 html height 는 두지 않는다.
       주의 2: body 에는 overflow-x 를 두지 않는다 — 헤더(.hdr)의 sticky 가
       깨진다(body 스타일 블록 주석 참고). */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #1A1A1A;
    color: #FFFFFF;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    /* 주의: body 에 overflow-x:hidden 을 두지 않는다 — body 가 overflow
       컨테이너가 되면 헤더(.hdr)의 position:sticky 가 뷰포트에 붙지 못해
       스크롤 시 상단 바가 사라진다. 가로 스크롤 차단은 위 html 의
       overflow-x:hidden 이 뷰포트 레벨에서 이미 담당한다. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* iOS 텍스트 크기 조정 방지 */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* 주의: touch-action:manipulation 과 overscroll-behavior-y:none 을
       body 에 두지 않는다. 전자는 일부 브라우저에서 팬(세로 스크롤)
       제스처를, 후자는 Android/Samsung Internet 에서 모멘텀 스크롤을
       억제해 "PC·모바일 공통 스크롤 불가" 버그를 유발한 적이 있다.
       더블탭 줌/바운스 억제가 필요하면 개별 인터랙티브 요소에만 건다. */
}

/* 언어별 본문 글꼴.
   예전에는 이 자리에서 서버가 lang 값으로 분기했다. CSS 를 static 으로
   빼면서 속성 선택자로 바꿨다 — base.html 의 html 태그가 lang 속성을 이미
   렌더하므로 값 주입이 필요 없다.
   ⚠ html 의 lang 속성을 고정값이나 템플릿 블록으로 바꾸면 여기가 통째로 죽어
     전 페이지 타이포가 한국어 스택으로 붕괴한다. 한 쌍으로 다뤄야 한다.
   ⚠ 특이도가 body(0,0,1) -> html[lang] body(0,1,2) 로 올라간다. 하위
     템플릿이 body{font-family} 를 재정의하면 그 재정의가 죽는다.
     (2026-09-02 기준 그런 템플릿은 없다 — 별도 셸과 이메일뿐) */
html[lang="en"] body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
html[lang="ja"] body { font-family: 'Poppins', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', 'Meiryo', -apple-system, sans-serif; }
html[lang="zh"] body { font-family: 'Poppins', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', -apple-system, sans-serif; }

/* ── 사이트 셸 토큰 (헤더·푸터) ──────────────────────────────────────
   홈 리디자인(2026-10-05, design_mockups/home_A_charcoal.html) 의 헤더·푸터를
   전 페이지 공통으로 옮겼다. 값은 시안 :root 그대로이고, 이름은 전부 --site-
   접두다 — partners/{intro,apply,dashboard}.html 이 :root 에 접두 없는 --bg ·
   --line · --r-sm 을 재정의하고, 블로그·공지는 .bd/.bl/.nl 아래에 같은 이름을
   쓴다. 접두 없이 두면 그 페이지들에서 헤더 색이 조용히 바뀐다.
   ⚠ body {} 의 배경·글자색은 여기서 바꾸지 않는다(다른 페이지가 의존).
   홈(home.css)은 이 토큰을 별칭(--bg:var(--site-bg) …)으로 받아 쓴다.

   z-index 척도 — 1000~1100 사이에는 헤더 자신의 팝오버 외에 아무것도 두지 않는다.
      20  홈 섹션 레일          30  홈 모바일 구매 바
     900  기존 하단 고정 바(요금제·다운로드)
    1000  .hdr — 언어 팝오버·모바일 패널은 이 쌓임 맥락 안에 있다
    1100  건너뛰기 링크
    1200  블로그·공지 읽기 진행 바   5000  공지 팝업
   10000  토스트                  10001  광고 수신 동의 팝업 */
:root {
    --site-bg: #1a1a1a;
    --site-bg-raise: #1e1e1e;
    --site-surface: #232323;
    --site-surface-2: #2a2a2a;
    --site-line: rgba(255, 255, 255, .08);
    --site-line-2: rgba(255, 255, 255, .14);
    --site-text: #f0f0f0;
    --site-text-2: #b0b0b0;
    --site-text-3: #949494;
    --site-brand: #0057d1;
    --site-brand-hover: #0a63e6;
    --site-brand-press: #004bb5;
    --site-accent: #7aa5f2;
    --site-focus: #a8c6ff;
    --site-logo-blue: #2d5bff;
    --site-logo-sky: #00aaff;
    --site-lockup-ink: #f0f0f0;   /* 락업 워드마크(원본은 남색 — 다크 헤더용으로 밝게) */
    --site-lockup-tag: #8fb0ea;   /* 락업 태그라인 */
    --site-hdr-bg: rgba(16, 16, 18, .74);
    --site-shadow-md: 0 18px 40px -18px rgba(0, 0, 0, .55);
    --site-r-xs: 6px;
    --site-r-sm: 10px;
    --site-r-md: 14px;
    --site-ease: cubic-bezier(.2, .8, .2, 1);
    --site-gutter: clamp(20px, 4vw, 40px);
    --site-hdr-h: 65px;   /* 64px 행 + 1px 하단 경계선. 앵커 오프셋(scroll-padding)이 이 값을 쓴다 */
    --site-z-header: 1000;
    --site-z-skip: 1100;
}

/* 헤더 락업 워드마크 "LUTIMIZE" 전용 Michroma(OFL, Reserved Font Name 없음 → 이름 유지).
   글자 7종(E I L M T U Z)만 남긴 2.8KB 서브셋이라 block + base.html preload 로
   대체 글꼴이 잠깐 비치는 일 없이 바로 그린다. 원본: 저장소 fonts/Michroma-Regular.ttf,
   라이선스: static/fonts/Michroma-OFL.txt. 재생성(저장소 루트에서):
     pyftsubset fonts/Michroma-Regular.ttf --text="LUTIMIZE" --flavor=woff2 \
       --layout-features='kern' --output-file=server/static/fonts/michroma-lutimize.woff2
   ⚠ 락업 글자를 바꾸면 이 서브셋과 unicode-range 를 함께 다시 만들 것(빠진 글자는
     대체 글꼴로 떨어진다). */
@font-face {
    font-family: "Michroma";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/michroma-lutimize.7fac4e29113c.woff2") format("woff2");
    unicode-range: U+45, U+49, U+4C, U+4D, U+54, U+55, U+5A;
}

/* 공용 아이콘 스프라이트(인라인 SVG <symbol>) — bootstrap-icons 서브셋에 글리프를
   늘리지 않으려고 시안처럼 인라인 SVG 를 쓴다. 심볼은 base.html <body> 첫 자식. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: var(--site-z-skip); background: var(--site-text); color: var(--site-bg); padding: 10px 16px; border-radius: var(--site-r-sm); font-size: .9375rem; font-weight: 600; line-height: 1.4; text-decoration: none; }
.skip-link:focus { top: 12px; outline: 2px solid var(--site-focus); outline-offset: 3px; }

/* 헤더·푸터 공용 컨테이너. ⚠ 이름이 .wrap 이 아닌 이유: 다른 템플릿 9개가 .wrap 을
   제 레이아웃으로 쓰고, 홈 본문도 자기 .wrap 을 쓴다.
   가로 안전 영역(가로 모드 iPhone 노치)은 거터와 비교해 큰 쪽을 쓴다. */
.site-wrap {
    width: calc(100% - 2 * var(--site-gutter));
    max-width: 1200px;
    width: min(100% - 2 * max(var(--site-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), 1200px);
    margin-inline: auto;
}

/* ── 헤더 ─────────────────────────────────────────────────────────
   반투명 글래스 + sticky. 스크롤 상태 전환(.scrolled)은 없다 — 시안 헤더는
   항상 같은 모습이라 스크롤 리스너도 두지 않는다.
   글꼴은 페이지 본문 글꼴을 물려받는다(홈 LUT Sans / ko 시스템 / en·ja·zh Poppins).
   크기·줄간격은 여기서 고정해 페이지 body 설정과 무관하게 같은 높이로 그린다.
   ⚠ .hdr 은 backdrop-filter 때문에 position:fixed 자손의 containing block 이 된다.
     헤더 안에 fixed 요소를 넣지 말 것 — 꼭 필요하면 inset:0/100%/100vw 대신
     top:0; left:0; width:100%; height:100dvh 로(과거 드로어 클리퍼 함정). */
.hdr {
    position: sticky;
    top: 0;
    z-index: var(--site-z-header);
    /* 홈 화면 웹앱(standalone, viewport-fit=cover)에서만 상태 표시줄 높이가 생긴다.
       브라우저 탭에서는 0 이라 높이는 --site-hdr-h 그대로다. */
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--site-hdr-bg);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--site-line);
    color: var(--site-text);
    font-size: 1.0625rem;
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* backdrop-filter 미지원: 블러 없이 반투명만 두면 본문이 비쳐 읽기 어렵다 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hdr { background: rgba(16, 16, 18, .94); }
}
.hdr a { color: inherit; text-decoration: none; }
.hdr :focus-visible { outline: 2px solid var(--site-focus); outline-offset: 3px; }
.hdr-row { display: flex; align-items: center; gap: 28px; height: 64px; }

/* 가로형 락업 — 오리지널 컬러 마크(logo-96.png, 투명 여백을 잘라 28×32 로 표시)
   + LUTIMIZE 워드마크 + 태그라인. 크롭 오프셋은 45px 렌더 기준 CSS px 라
   원본 512px 대신 96px 변형본을 써도 같다. 푸터(.ftr-logo)도 같은 락업이라
   .lockup-* 규칙은 .brand-lockup 으로 묶어 한 곳에서 공유한다. */
.hdr .brand { display: inline-flex; flex: none; align-items: center; gap: 11px; font-size: 1.1875rem; font-weight: 700; color: var(--site-text); }
.brand-lockup .lockup-mark { position: relative; flex: none; width: 28px; height: 32px; overflow: hidden; }
.brand-lockup .lockup-mark img { position: absolute; left: -9px; top: -6px; display: block; width: 45px; height: 45px; max-width: none; }
.brand-lockup .lockup-text { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1; }
.brand-lockup .lockup-word { font-family: "Michroma", "Eurostile", "Segoe UI", sans-serif; font-size: 1.0625rem; font-weight: 400; letter-spacing: .06em; color: var(--site-lockup-ink); }
.brand-lockup .lockup-tag { margin-top: 5px; font-size: .5rem; font-weight: 600; letter-spacing: .085em; color: var(--site-lockup-tag); white-space: nowrap; }

.hdr .nav-main { display: flex; gap: 2px; min-width: 0; }
.hdr .nav-main a,
.hdr .hdr-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--site-r-sm); color: var(--site-text-2); font-size: .9375rem; font-weight: 500; white-space: nowrap; transition: color .2s, background-color .2s; }
.hdr .nav-main a:hover,
.hdr .hdr-link:hover { color: var(--site-text); background: rgba(255, 255, 255, .07); }
.hdr-right { display: flex; flex: none; align-items: center; gap: 6px; margin-left: auto; }
.hdr .hdr-link .ico { width: 18px; height: 18px; }
/* 다운로드 — 헤더의 유일한 버튼형 링크(외곽선). 채움 강조는 본문 CTA 몫이다. */
.hdr .btn-dl { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--site-line-2); border-radius: var(--site-r-sm); color: var(--site-text); font-size: .9375rem; font-weight: 600; white-space: nowrap; transition: border-color .2s, background-color .2s, transform .2s var(--site-ease); }
.hdr .btn-dl .ico { width: 18px; height: 18px; }
.hdr .btn-dl:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06); }
.hdr .btn-dl:active { transform: scale(.98); }

/* 언어 메뉴·모바일 메뉴는 <details>. 닫힌 <details> 는 내용을 렌더하지 않는다 —
   그것이 유일한 숨김 수단이다(오프스크린 이동·visibility 트릭 금지: 과거
   드로어가 문서 가로 폭을 늘리던 버그의 원인). */
.hdr .lang { position: relative; }
.hdr .lang summary,
.hdr .mmenu summary { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--site-r-sm); color: var(--site-text-2); list-style: none; cursor: pointer; transition: color .2s, background-color .2s; }
.hdr .lang summary::-webkit-details-marker,
.hdr .mmenu summary::-webkit-details-marker { display: none; }
.hdr .lang summary:hover,
.hdr .mmenu summary:hover,
.hdr .lang[open] summary,
.hdr .mmenu[open] summary { color: var(--site-text); background: rgba(255, 255, 255, .07); }
.hdr .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 148px; padding: 6px; background: var(--site-surface-2); border: 1px solid var(--site-line-2); border-radius: var(--site-r-md); box-shadow: var(--site-shadow-md); }
.hdr .lang-menu a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--site-r-xs); color: var(--site-text-2); font-size: .9375rem; white-space: nowrap; }
.hdr .lang-menu a:hover { color: var(--site-text); background: rgba(255, 255, 255, .08); }
.hdr .lang-menu a[aria-current] { color: var(--site-text); font-weight: 600; }
.hdr .lang-menu a[aria-current]::after { content: "\2713"; color: var(--site-accent); }

/* 모바일 메뉴 — 드로어가 아니라 헤더 바로 아래로 펼쳐지는 드롭다운이다.
   containing block 은 sticky .hdr 라 스크롤 위치와 무관하게 헤더 밑에 붙고,
   길면 패널 안에서만 스크롤한다. ⚠ 스크롤 잠금을 걸지 않는다(body overflow 금지 —
   sticky 가 풀린다. 나중에 필요해지면 html 에만). */
.hdr .mmenu { display: none; margin-left: auto; }
.hdr .mmenu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--site-hdr-h));
    max-height: calc(100dvh - var(--site-hdr-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px max(var(--site-gutter), env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(var(--site-gutter), env(safe-area-inset-left, 0px));
    background: var(--site-bg-raise);
    border-bottom: 1px solid var(--site-line-2);
    box-shadow: var(--site-shadow-md);
}
/* 글자 크기 !important: login_page/register_page 가 ≤768px 에서 맨 a 에 14px !important 를 건다(.ftr h2 주석 참고). */
.hdr .mmenu-panel > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--site-line); font-size: 1.0625rem !important; font-weight: 600; }
.hdr .mmenu-panel > a .ico { width: 18px; height: 18px; color: var(--site-text-3); }
.hdr .mmenu-langs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.hdr .mmenu-langs a { padding: 8px 12px; border: 1px solid var(--site-line-2); border-radius: var(--site-r-sm); color: var(--site-text-2); font-size: .875rem; font-weight: 500; }
.hdr .mmenu-langs a[aria-current] { color: var(--site-text); border-color: var(--site-accent); }

/* 헤더 hover 전환에도 prefers-reduced-motion 게이트를 걸지 않는다(아래 주의 참고). */

/* 모바일 메뉴 임계값 1024px — ⚠ base.js 의 resize 핸들러 innerWidth > 1024 와 한 쌍이다.
   한쪽만 바꾸면 넓은 화면에서 열린 패널이 남거나 좁은 화면에서 메뉴가 사라진다. */
@media (max-width: 1024px) {
    .hdr .nav-main,
    .hdr-right { display: none; }
    .hdr .mmenu { display: block; }
}
/* 컴팩트 구간(1025~1279px). 최악 조합(ja + 스태프 + 승인 파트너 + 문의 + 프로필
   + 다운로드 + 언어 + 락업)이 한 줄에 들어가게 여백부터 줄인다. 허용 순서:
   간격·여백 축소 → 계정 링크 아이콘 숨김 → 락업 태그라인 숨김.
   ⚠ 네비 링크를 숨기거나 ja 만 14px 아래로 줄이지 말 것. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .hdr-row { gap: 18px; }
    .hdr .nav-main { gap: 0; }
    .hdr .nav-main a,
    .hdr .hdr-link { padding: 8px 9px; }
    .hdr-right { gap: 4px; }
    .hdr .btn-dl { padding: 0 11px; }
}
/* 1025~1149px — 실측(2026-10-05, 헤드리스 크롬): 최악 조합이 1025px 에서 여유 18px 뿐이라
   글자를 14px 로 한 단계 내리고 계정 아이콘·태그라인을 숨긴다(여유 약 50px). */
@media (min-width: 1025px) and (max-width: 1149px) {
    .hdr .nav-main a,
    .hdr .hdr-link,
    .hdr .btn-dl { font-size: .875rem; }
    .hdr .hdr-link .ico,
    .hdr .lockup-tag { display: none; }
}

/* 콘텐츠 래퍼 — 페이지 콘텐츠발 가로 오버플로 차단 (html/body 에 걸면
   헤더(.hdr) sticky 가 깨져서 여기서 처리). clip 미지원 구형은 hidden 폴백. */
.page-content {
    overflow-x: hidden;
    overflow-x: clip;
}

/* 주의: 네비 hover 모션(아이콘 스프링 팝)에는 prefers-reduced-motion
    게이트를 걸지 않는다 — Windows '애니메이션 효과' 를 끈 사용자(최적화 유저에게
    흔함)의 브라우저가 reduce 를 보고해 전환이 통째로 스냅되던 문제.
    미세한 비전정성(non-vestibular) 전환이라 유지해도 무해하다는 오너 결정. */

.container {
    max-width: 500px;
    margin: 60px auto;
    padding: 40px;
    background: #1E1E1E;
    border-radius: 24px;
}

h1, h2 {
    color: #0057d1;
    margin-bottom: 30px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #B0B0B0;
    font-size: 14px;
}

input {
    width: 100%;
    padding: 14px 20px;
    background: #2A2A2A;
    border: 2px solid #3A3A3A;
    border-radius: 12px;
    color: #FFFFFF;
    font-size: 14px;
    transition: all 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    touch-action: manipulation;
    /* iOS 입력 필드 최적화 */
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    /* iOS 그림자 제거 */
    -webkit-box-shadow: none;
    box-shadow: none;
    /* iOS 자동완성 배경색 제거 */
    -webkit-autofill: transparent;
}

input:focus {
    outline: none;
    border-color: #0057d1;
    background: #2D2D2D;
}

/* iOS Safari 자동완성 배경색 제거 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #2A2A2A inset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    caret-color: #FFFFFF;
}

.btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, #0057d1, #2D5BFF);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    /* iOS 버튼 최적화 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    /* 안티앨리어싱 */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.btn:hover {
    background: linear-gradient(90deg, #0066e8, #3d6bff);
}

.btn:active {
    transform: translateZ(0) scale(0.98);
    -webkit-transform: translateZ(0) scale(0.98);
}

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    min-width: 300px;
    padding: 16px 20px;
    background: #1E1E1E;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border-left: 4px solid;
    animation: slideIn 0.3s ease-out;
    transition: all 0.3s;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOut 0.3s ease-in forwards;
}

.toast.success {
    border-left-color: #2ecc71;
}

.toast.error {
    border-left-color: #e74c3c;
}

.toast.info {
    border-left-color: #0057d1;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    color: #2ecc71;
}

.toast.error .toast-icon {
    color: #e74c3c;
}

.toast.info .toast-icon {
    color: #0057d1;
}

.toast-message {
    flex: 1;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
}

.toast-close {
    background: none;
    border: none;
    color: #B0B0B0;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.link {
    text-align: center;
    margin-top: 20px;
    color: #B0B0B0;
}

.link a {
    color: #0057d1;
    text-decoration: none;
}

.link a:hover {
    text-decoration: underline;
}

.home-content {
    text-align: center;
    padding: 60px 20px;
}

.home-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.home-content p {
    font-size: 18px;
    color: #B0B0B0;
    margin-bottom: 40px;
}

/* 태블릿 (769px ~ 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .container {
        max-width: 700px;
        margin: 40px auto;
        padding: 30px;
    }
}

/* 모바일 (~ 768px) */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    /* 컨테이너 */
    .container {
        max-width: 100%;
        margin: 20px;
        margin-left: max(20px, env(safe-area-inset-left));
        margin-right: max(20px, env(safe-area-inset-right));
        padding: 24px;
        border-radius: 16px;
    }

    /* 제목 크기 조정 */
    h1 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    h2 {
        font-size: 24px;
        margin-bottom: 16px;
    }

    /* 폼 */
    .form-group {
        margin-bottom: 16px;
    }

    label {
        font-size: 14px;
        margin-bottom: 6px;
    }

    input {
        padding: 14px 16px;
        font-size: 16px; /* 최소 16px로 자동 확대 방지 */
        border-radius: 10px;
    }

    .btn {
        padding: 16px;
        font-size: 16px;
        border-radius: 10px;
        min-height: 48px; /* 터치 영역 확보 */
    }

    /* Toast */
    .toast-container {
        bottom: 10px;
        right: 10px;
        left: 10px;
    }

    .toast {
        min-width: auto;
        width: 100%;
        padding: 14px 16px;
        border-radius: 10px;
    }

    .toast-message {
        font-size: 14px;
    }

    .link {
        margin-top: 16px;
        font-size: 14px;
    }

    /* 홈 콘텐츠 */
    .home-content {
        padding: 40px 20px;
    }

    .home-content h1 {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .home-content p {
        font-size: 16px;
        margin-bottom: 24px;
    }
}

/* 작은 모바일 (~ 480px) */
@media (max-width: 480px) {
    .container {
        margin: 16px;
        padding: 20px;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    input,
    .btn {
        font-size: 16px; /* iOS 자동 확대 방지 */
    }

    .home-content h1 {
        font-size: 28px;
    }

    .home-content p {
        font-size: 15px;
    }
}

/* ===== 프로모션 마일스톤 — 닉네임 / 플랜 라벨 스타일 ===== */
/* 코스메틱 닉네임 색상 — has_reward 로 검증된 후에만 적용됨 */
.nickname-default { color: inherit; }
.nickname-silver {
    background: linear-gradient(90deg, #c0c0c0, #f0f0f0, #c0c0c0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.nickname-gold {
    background: linear-gradient(90deg, #c79100, #ffd700, #ffec80, #ffd700, #c79100);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.nickname-diamond {
    background: linear-gradient(90deg, #7fc7ff, #b9f2ff, #e7faff, #b9f2ff, #7fc7ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(185, 242, 255, 0.4);
}
.nickname-holo {
    background: linear-gradient(90deg, #ff6ec4, #7873f5, #4ade80, #fbbf24, #ff6ec4);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    animation: nickname-holo-shift 4s linear infinite;
}
@keyframes nickname-holo-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
/* Lutimize Pass 전용 닉네임 색상 — red / purple */
.nickname-red {
    background: linear-gradient(90deg, #c81e1e, #f87171, #fca5a5, #f87171, #c81e1e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.nickname-purple {
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #d8b4fe, #a78bfa, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
/* Lutimize Pass 보유자 표시 — plan-pill 뒤에 붙는 보조 pill */
.pass-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    margin-left: 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #f39c12;
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.45);
}

/* 플랜 pill — ADMIN/ULTRA/Premium/Basic/Free */
.plan-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    vertical-align: middle;
}
.plan-pill-admin {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.plan-pill-ultra {
    background: linear-gradient(135deg, #fbbf24, #ec4899, #8b5cf6);
    color: #fff;
    box-shadow: 0 2px 12px rgba(236, 72, 153, 0.5);
}
.plan-pill-premium {
    background: linear-gradient(135deg, #0057d1, #2D5BFF);
    color: #fff;
}
.plan-pill-basic {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.plan-pill-free {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
}

/* ===== 마일스톤 가로 타임라인 (공통) ===== */
.ms-timeline-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 6px;
}
.ms-nav {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1E1E1E;
    border: 1px solid #333;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ms-nav:hover {
    background: #0057d1;
    color: #fff;
    border-color: #0057d1;
}
.ms-nav i { font-size: 18px; }
.ms-timeline {
    flex: 1;
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    padding: 28px 8px 14px;
    scrollbar-width: none;
    display: flex;
    align-items: center;
}
.ms-timeline::-webkit-scrollbar { display: none; }

.ms-node-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ms-node-wrap:hover { z-index: 5; }
.ms-node {
    width: 34px;
    height: 34px;
    background: #1a1a1a;
    border: 2px solid #3a3a3a;
    border-radius: 6px;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s;
    position: relative;
    z-index: 2;
}
.ms-node-num {
    transform: rotate(-45deg);
    font-size: 13px;
    font-weight: 800;
    color: #777;
    line-height: 1;
    user-select: none;
}
.ms-node.unlocked {
    background: linear-gradient(135deg, #2575ff, #0057d1);
    border-color: #2575ff;
    box-shadow: 0 4px 12px rgba(0, 87, 209, 0.32);
}
.ms-node.unlocked .ms-node-num { color: #fff; }
.ms-node.current {
    transform: rotate(45deg) scale(1.18);
    box-shadow:
        0 0 0 4px rgba(0, 87, 209, 0.25),
        0 6px 16px rgba(0, 87, 209, 0.5);
    border-color: #fff;
}
.ms-node-wrap:hover .ms-node:not(.current) {
    transform: rotate(45deg) scale(1.1);
}

.ms-connector {
    width: 36px;
    height: 4px;
    background: #2e2e2e;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    border-radius: 2px;
}
.ms-connector.unlocked {
    background: linear-gradient(90deg, #2575ff, #0057d1);
}

/* 툴팁 — overflow:auto 부모(.ms-timeline)의 클리핑을 우회하기 위해 z-index 매우 큼 */
.ms-tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: #1A1A1A;
    border: 1px solid #2d3a55;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
    pointer-events: none;
    z-index: 99999;
}
.ms-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1A1A1A;
}
.ms-node-wrap:hover .ms-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}
.ms-tooltip-title {
    font-size: 12px;
    font-weight: 700;
    color: #4a90ff;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ms-tooltip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #ccc;
    line-height: 1.7;
}
.ms-tooltip-list li {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ms-tooltip-list li::before {
    content: '·';
    color: #4a90ff;
    font-weight: 700;
}
.ms-tooltip-list .ms-tt-icon { font-size: 14px; }
.ms-tooltip-list .ms-tt-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.15);
}
.ms-tooltip-title {
    font-size: 12px;
    font-weight: 700;
    color: #0057d1;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ms-tooltip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #ccc;
    line-height: 1.6;
    white-space: nowrap;
}
.ms-tooltip-list li::before {
    content: '·';
    color: #0057d1;
    margin-right: 4px;
    font-weight: 700;
}

/* ===== 뱃지 (닉네임 옆 아이콘+색상) — 풀 선택기 & 표시 ===== */
.badge-section-title {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
}
.badge-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}
.badge-cell {
    aspect-ratio: 1;
    background: #1A1A1A;
    border: 1px solid #2A2A2A;
    border-radius: 8px;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.badge-cell:hover:not(.locked):not(:disabled) {
    background: #0057d1;
    color: #fff;
    border-color: #0057d1;
    transform: scale(1.08);
}
.badge-cell.selected {
    background: rgba(0, 87, 209, 0.25);
    color: #5AA0FF;
    border-color: #0057d1;
    box-shadow: inset 0 0 0 2px #0057d1;
}
/* 잠금: 실제 아이콘은 흐리게(미리보기) + 자물쇠 오버레이 */
.badge-cell.locked {
    cursor: not-allowed;
    color: #555;
    position: relative;
}
.badge-cell.locked .badge-cell-glyph {
    opacity: 0.20;
    font-size: 18px;
}
.badge-cell.locked .badge-cell-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 7px;
}
.badge-cell.locked:hover .badge-cell-lock {
    color: #ccc;
    background: rgba(0, 0, 0, 0.5);
}
.badge-palette {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.badge-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #2A2A2A;
    cursor: pointer;
    transition: all 0.12s;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #555;
}
.badge-swatch:hover:not(.locked):not(:disabled) {
    transform: scale(1.15);
    border-color: #fff;
}
.badge-swatch.selected {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 87, 209, 0.6);
}
/* 잠금 스와치: 실제 색상을 흐리게 + 자물쇠 오버레이 */
.badge-swatch.locked {
    cursor: not-allowed;
    opacity: 0.30;
    position: relative;
}
.badge-swatch.locked i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    opacity: 0.95;
}
.badge-swatch.locked:hover i { background: rgba(0, 0, 0, 0.65); }
.badge-preview-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* 닉네임 옆 작은 뱃지 (리더보드/프로필 표시용) — 다른 사용자에게 보임 */
.user-badge-icon {
    display: inline-block;
    font-size: inherit;
    margin-right: 4px;
    vertical-align: -1px;
}
/* ── 푸터 ────────────────────────────────────────────────────────
   브랜드 열 + 링크 3열 + 하단 바(홈 리디자인 2026-10-05). 배경을 깔지 않고
   경계선 한 줄로만 본문과 나눈다 — 푸터가 본문보다 눈에 띄면 글을 다 읽기 전에
   시선이 내려간다. 홈은 본문 마지막 CTA 와 붙이려고 margin-top 을 0 으로 덮는다(home.css).
   ⚠ .site-footer 클래스는 pricing.html(모바일 고정 바 여백), id="ftr" 는 홈
     구매 바 관찰자가 쓴다 — 둘 다 지우지 말 것. */
.ftr {
    margin-top: 100px;
    padding-block: 56px 40px;
    border-top: 1px solid var(--site-line);
    color: var(--site-text-2);
    font-size: .9375rem;
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.ftr a { color: inherit; text-decoration: none; transition: color .2s; }
.ftr a:hover { color: var(--site-text); }
.ftr :focus-visible { outline: 2px solid var(--site-focus); outline-offset: 3px; }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
/* 락업 본체(마크 크롭·워드마크·태그라인)는 위 .brand-lockup 규칙을 헤더와 공유한다.
   ⚠ 여기서 .ftr-logo img 크기를 다시 지정하지 말 것 — 같은 특이도라 뒤에 오는 이 파일
   하단 규칙이 이겨서 마크 크롭(45px 렌더 + 28×32 창)이 깨진다. */
.ftr .ftr-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--site-text); }
.ftr-brand p { max-width: 22em; margin-top: 14px; color: var(--site-text-3); font-size: .875rem; }
/* 열 제목. base 의 h1,h2 { color·margin-bottom:30px·text-align:center } 와
   모바일 h2 { font-size:24px } 를 특이도로 이긴다. 크기·여백의 !important 는
   login_page/register_page 가 ≤768px 에서 맨 h2 에 거는 !important(24px·24px)
   때문이다 — 없으면 그 두 페이지에서만 열 제목이 본문 제목만큼 커진다. */
.ftr h2 { margin: 0 0 14px !important; color: var(--site-text); font-size: .8125rem !important; font-weight: 600; line-height: 1.7; letter-spacing: .01em; text-align: left; }
.ftr ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 28px; color: var(--site-text-3); font-size: .8125rem; }
/* 사업자 정보(홈 전용 블록)가 없는 페이지는 상단 열 바로 뒤에 하단 바가 온다.
   그 블록과 같은 간격·경계선을 줘서 저작권 줄이 링크 열에 붙어 보이지 않게 한다. */
.ftr-top + .ftr-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--site-line); }
.ftr-bottom ul { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 960px) {
    .ftr-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .ftr-top { grid-template-columns: 1fr 1fr; }
    .ftr-bottom { flex-direction: column; }
}