/* 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 를 두지 않는다 — .navbar 의 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
       컨테이너가 되면 .navbar 의 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; }

/* 반투명 글래스 상단 바 — 스크롤 방향과 무관하게 항상 고정 표시 */
.navbar {
    background: rgba(16, 16, 18, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    padding: 14px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* backdrop-filter 미지원 브라우저: 블러 없이 반투명만 두면 본문이
   비쳐 가독성이 깨지므로 불투명에 가깝게 폴백 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar { background: rgba(16, 16, 18, 0.94); }
}

.navbar.scrolled {
    background: rgba(14, 14, 16, 0.72);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.navbar-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #0057d1;
    text-decoration: none;
    display: flex;
    align-items: center;
}

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

/* 드로어 클리퍼 — 데스크톱에선 레이아웃에 존재하지 않고(display:contents),
   모바일에선 뷰포트 크기 overflow:hidden 박스가 되어 오프스크린 드로어가
   문서 가로 폭(scrollWidth)에 기여하는 것 자체를 차단한다. 루트
   overflow-x 클리핑은 엔진에 따라 프로그래매틱 가로 이동(scrollTo/
   scrollIntoView)을 막지 못해 이 방식이 유일하게 안전하다. */
.nav-drawer-clip {
    display: contents;
}

/* 좌측 링크 + 우측 액션(계정·다운로드) 2그룹 배치(오너 요청, 2026-09-02).
   .nav-links 가 로고와 언어 버튼 사이를 가득 채우고, 그 안에서 .nav-actions 가
   margin-left:auto 로 오른쪽 끝에 붙는다. 언어 전환 버튼은 .navbar-content 의
   별도 자식이라 항상 그보다 더 오른쪽이다. */
.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;   /* 여기가 좌우를 가르는 유일한 지점 */
}

/* 데스크톱·모바일 모두 아이콘 + 라벨 상시 표시(오너 요청, 2026-09-01).
   과거에는 심볼만 보이고 hover 시 라벨이 펼쳐졌지만, 아이콘만으로는
   목적지를 알 수 없다는 피드백에 따라 라벨을 항상 노출한다.
   ⚠ 라벨이 상시 폭을 차지하므로 좌우 패딩을 좁게 유지할 것 —
      7개 링크(관리자 포함) × 긴 로케일(ja) 조합에서 네비가 문서 가로
      폭을 늘리면 과거의 가로 밀림 버그가 재현된다. */
.nav-links a {
    color: #B0B0B0;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 999px;
    transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    /* iOS 링크 최적화 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.nav-links a .nav-ico {
    display: inline-flex;
    font-size: 18px;
    line-height: 1;
    /* hover 시 아이콘이 살짝 튀어오르는 스프링 팝 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-links a .nav-label {
    white-space: nowrap;
    margin-left: 8px;
    font-size: 14px;
}

.nav-links a:hover,
.nav-links a:focus-visible {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.nav-links a:hover .nav-ico,
.nav-links a:focus-visible .nav-ico {
    transform: scale(1.18);
}

.nav-links a:focus-visible {
    outline: 2px solid #4a90ff;
    outline-offset: 2px;
}

.nav-links a.btn-primary {
    background: linear-gradient(90deg, #0057d1, #2D5BFF);
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 20px rgba(0, 87, 209, 0.4);
}

.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:focus-visible {
    background: linear-gradient(90deg, #0066e8, #3d6bff);
    box-shadow: 0 6px 25px rgba(0, 87, 209, 0.5);
}

/* 주의: 네비 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;
}

/* ===== 모바일 반응형 CSS ===== */
/* 햄버거 메뉴 버튼 (기본 숨김) */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

/* 모바일 메뉴 오버레이 */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ===== 우측 네비 묶음 (언어전환 + 햄버거 + 링크) ===== */
/* ⚠ .nav-right 가 자라야 그 안의 .nav-links 도 자란다. 이게 없으면
   .navbar-content 의 space-between 이 .nav-right 를 콘텐츠 폭 그대로
   오른쪽에 붙여, 좌측 링크가 로고 옆이 아니라 화면 중앙에 뜬다.
   (2026-09-02 재배열 때 실제로 이것 때문에 한 번 어긋났다) */
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

/* ===== 언어 전환 드롭다운 (globe) ===== */
.lang-switcher {
    position: relative;
}

.lang-toggle {
    background: none;
    border: none;
    color: #B0B0B0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.lang-toggle:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1E1E1E;
    border: 1px solid #333333;
    border-radius: 12px;
    padding: 6px;
    min-width: 150px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1002;
}

.lang-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu a {
    display: block;
    padding: 10px 14px;
    color: #B0B0B0;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.lang-menu a:hover {
    color: #FFFFFF;
    background: rgba(0, 87, 209, 0.12);
}

.lang-menu a.active {
    color: #FFFFFF;
    background: rgba(0, 87, 209, 0.18);
}

/* 태블릿 (768px ~ 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .navbar {
        padding: 16px 30px;
    }

    .navbar-content {
        max-width: 100%;
    }

    .logo {
        font-size: 20px;
    }

    .logo img {
        height: 26px !important;
        width: 26px !important;
    }

    .container {
        max-width: 700px;
        margin: 40px auto;
        padding: 30px;
    }
}

/* 네비 드로어 임계값은 768px 이 아니라 1024px 이다. 라벨을 상시
    노출하면서(2026-09-01) 링크 7개 × 가장 긴 로케일(ja)이 태블릿 폭에
    들어가지 않아, 가로 네비를 유지하면 네비가 문서 가로 폭을 늘려
    과거의 가로 밀림 버그가 그대로 재현된다. ⚠ 이 블록을 다시 768px 로
    내리지 말 것 — 아래 resize 핸들러의 innerWidth > 1024 와 한 쌍이다. */
@media (max-width: 1024px) {
    /* ⚠ 데스크탑에서 좌/우 그룹을 가르려고 .nav-right 에 flex:1 을 줬는데,
       드로어 구간에서는 .nav-links 가 position:absolute 라 .nav-right 안에
       햄버거 버튼과 언어 버튼만 남는다. 그 상태로 늘어나면 버튼이 왼쪽 끝,
       즉 로고 바로 옆에 붙어 버린다(2026-09-02 실제 회귀).
       여기서 콘텐츠 폭으로 되돌리면 .navbar-content 의 space-between 이
       다시 우상단으로 밀어 준다. */
    .nav-right {
        flex: 0 0 auto;
    }

    /* 드로어에서는 그룹 구분이 의미 없다 — 둘 다 세로로 이어 붙인다.
       margin-left:auto 를 남겨 두면 항목이 오른쪽으로 밀려 정렬이 깨진다. */
    .nav-main,
    .nav-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        margin-left: 0;
    }

    /* 모바일 드로어 클리퍼 활성화 — 뷰포트 전체를 덮는 overflow:hidden
       박스. 드로어가 이 안에서 슬라이드하므로 화면 밖에 있어도 문서
       scrollWidth 를 늘리지 않는다(과거 375→750 가로 밀림 버그의 근본
       차단). pointer-events 는 드로어에만 되살린다. */
    .nav-drawer-clip {
        display: block;
        position: fixed;
        /* 주의: inset:0 을 쓰면 안 된다 — 부모 .navbar 의 backdrop-filter
           가 fixed 자손의 containing block 을 navbar 박스로 바꿔 클리퍼가
           navbar 높이로 쪼그라든다. navbar 는 항상 뷰포트 최상단에 고정
           (sticky top:0)이므로 top/left 0 + 뷰포트 단위 명시가 안전하다. */
        top: 0;
        left: 0;
        /* ⚠ width 는 100vw 가 아니라 100% 다. 100vw 는 세로 스크롤바 폭까지
           포함해서, 클래식 스크롤바가 있는 환경(데스크톱 창을 좁힌 경우 ·
           태블릿)에서 클리퍼가 문서보다 스크롤바 폭(≈15px)만큼 넓어져
           가로 스크롤이 생긴다. 100% 는 fixed 의 컨테이닝 블록(= navbar 의
           backdrop-filter 가 만든 패딩 박스, 미지원 시 뷰포트)에 대해
           해석되는데 둘 다 가로로는 뷰포트 폭과 같아 안전하다.
           height 는 반대로 100% 를 쓰면 navbar 높이로 쪼그라들므로
           반드시 100dvh 를 유지할 것. */
        width: 100%;
        height: 100dvh;
        overflow: hidden;
        pointer-events: none;
        z-index: 1000;
    }

    /* 데스크톱 네비게이션 숨기기 — 클리퍼 안에서 transform 슬라이드 */
    .nav-links {
        position: absolute;
        top: 0;
        right: 0;
        transform: translateX(calc(100% + 40px)); /* +40px = box-shadow까지 밖으로 */
        pointer-events: auto;
        width: 280px;
        /* 클리퍼가 position:fixed; inset:0 이라 높이가 곧 시각적 뷰포트
           (모바일 동적 툴바 대응 — 과거 -webkit-fill-available collapse
           버그와 무관). 드로어는 그 100% 를 채운다. */
        height: 100%;
        background: #1E1E1E;
        flex-direction: column;
        padding: 80px 20px 20px;
        /* iOS Safe Area 대응 */
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        gap: 0;
        transition: transform 0.3s ease;
        z-index: 1000;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 닫힌 드로어는 display:none 으로 박스 자체를 제거한다 — 일부 엔진이
       fixed 클리퍼의 overflow:hidden 을 관통해 오프스크린 자식을 문서
       scrollWidth 에 계산하는 것까지 막는 유일하게 확실한 방법.
       슬라이드 애니메이션은 JS 가 .open(박스 생성) → 다음 프레임
       .active(transform 해제) 2단계로 처리해 유지된다. */
    .nav-links {
        display: none;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links.active {
        transform: none;
    }

    .nav-links a {
        padding: 16px 20px;
        border-radius: 8px;
        margin-bottom: 8px;
        text-align: left;
        border-left: 3px solid transparent;
    }

    /* 모바일 드로어: 라벨은 기본 규칙에서 이미 상시 표시 — 여백만 넓힌다. */
    .nav-links a .nav-label {
        margin-left: 12px;
        font-size: 15px;
    }

    .nav-links a:hover,
    .nav-links a:active {
        transform: none;
        border-left-color: #0057d1;
        background: rgba(0, 87, 209, 0.1);
    }

    .nav-links a.btn-primary {
        background: linear-gradient(90deg, #0057d1, #2D5BFF);
        border-left-color: transparent;
        margin-top: 10px;
    }

    .nav-links a.btn-primary:hover,
    .nav-links a.btn-primary:active {
        background: linear-gradient(90deg, #0066e8, #3d6bff);
        border-left-color: transparent;
    }

    /* 햄버거 메뉴 버튼 표시 */
    .mobile-menu-toggle {
        display: block;
    }
}

/* 컴팩트 가로 네비 (1025px ~ 1200px) — 라벨은 그대로 두고 여백만 조여
   좁은 노트북에서도 한 줄에 들어가게 한다. */
@media (max-width: 1200px) and (min-width: 1025px) {
    .navbar {
        padding: 14px 24px;
    }

    .nav-links {
        gap: 2px;
    }

    .nav-links a {
        padding: 9px 9px;
    }

    .nav-links a .nav-label {
        margin-left: 6px;
        font-size: 13px;
    }

    /* ja 는 라벨이 가장 길다 — 스태프 + 유료 플랜(링크 8개: 관리자·파트너스 포함)이면
       1025~1079px 에서 .nav-main 이 제 콘텐츠보다 좁아져 'お問い合わせ' 가
       'プロフィール' 위에 최대 54px 겹쳤다. 여백만 더 조인다(라벨·드로어 임계값
       1024px 은 그대로). 링크 사이 간격도 .nav-links 와 같은 2px 로 맞춰 폰트
       차이(Hiragino 등)에 대비한 여유를 둔다. */
    html[lang="ja"] .nav-main,
    html[lang="ja"] .nav-actions {
        gap: 2px;
    }

    html[lang="ja"] .nav-links a {
        padding: 9px 6px;
    }

    html[lang="ja"] .nav-links a .nav-label {
        margin-left: 4px;
    }
}

/* 같은 ja 링크 8개 조합이 컴팩트 구간 바로 위(1201~1217px, 기본 여백 12px)에서도
   10px 겹쳤다. 가로 여백만 2px 줄인다. 1024px 이하 드로어의 .nav-links a 여백을
   덮지 않도록 반드시 데스크톱 구간에만 건다. */
@media (min-width: 1201px) {
    html[lang="ja"] .nav-links a {
        padding: 10px 10px;
    }
}

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

    .navbar {
        padding: 12px 20px;
        /* iOS Safe Area 대응 */
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-top: max(12px, env(safe-area-inset-top));
    }

    .navbar-content {
        max-width: 100%;
    }

    .logo {
        font-size: 18px;
    }

    .logo img {
        height: 24px !important;
        width: 24px !important;
        margin-right: 8px !important;
    }

    /* 컨테이너 */
    .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) {
    .navbar {
        padding: 10px 16px;
    }

    .logo {
        font-size: 16px;
    }

    .logo img {
        height: 22px !important;
        width: 22px !important;
    }

    .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;
}
/* ── 푸터 ────────────────────────────────────────────────────────
   브랜드 열 + 카테고리 4열 + 하단 바. 색은 페이지에서 가장 조용해야
   한다 — 푸터가 본문보다 눈에 띄면 글을 다 읽기 전에 시선이 내려간다. */
.site-footer {
    background: #0a0a0a; color: #8a8a8a;
    margin-top: 100px; border-top: 1px solid #1a1a1a;
    padding: 56px 20px 28px;
}
.ft-wrap { max-width: 1200px; margin: 0 auto; }
.ft-top {
    display: grid; grid-template-columns: minmax(220px, 1fr) 2.4fr;
    gap: 48px; align-items: start;
}
.ft-logo {
    display: inline-flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none;
    font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
}
.ft-logo img { width: 30px; height: 30px; object-fit: contain; }
.ft-social { display: flex; gap: 10px; margin-top: 20px; }
.ft-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 9px;
    border: 1px solid #222; color: #8a8a8a; font-size: 16px;
    text-decoration: none; transition: color .18s ease, border-color .18s ease;
}
.ft-social a:hover { color: #fff; border-color: #333; }
.ft-social a:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }

.ft-cols {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
/* ⚠ base 전역 h1,h2 { text-align:center } 를 여기서 차단하지 않으면
   열 제목이 가운데로 밀린다. */
.ft-col h2 {
    font-size: 13px; font-weight: 700; color: #e8e8e8;
    margin: 0 0 14px; text-align: left; letter-spacing: 0;
}
.ft-col a {
    display: block; font-size: 13.5px; color: #8a8a8a;
    text-decoration: none; padding: 5px 0;
    transition: color .18s ease;
}
.ft-col a:hover { color: #fff; }
.ft-col a:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; border-radius: 4px; }

.ft-bottom {
    display: flex; flex-wrap: wrap; gap: 12px 24px;
    align-items: center; justify-content: space-between;
    margin-top: 44px; padding-top: 20px; border-top: 1px solid #1a1a1a;
}
.ft-copy { margin: 0; font-size: 12.5px; color: #5f5f5f; }
.ft-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.ft-legal a {
    font-size: 12.5px; color: #7a7a7a; text-decoration: none;
    transition: color .18s ease;
}
.ft-legal a:hover { color: #fff; }
.ft-legal a:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; border-radius: 4px; }
.ft-llms {
    font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
    font-size: 12px; color: #5f5f5f !important;
}
.ft-llms:hover { color: #a9a9a9 !important; }

@media (max-width: 900px) {
    .ft-top { grid-template-columns: 1fr; gap: 34px; }
    .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}
@media (max-width: 480px) {
    .site-footer { padding: 40px 16px 24px; }
    .ft-bottom { flex-direction: column; align-items: flex-start; }
}