/* v2.0.48 - 2026-09-24 | 남은 예전 스타일 정리(그림자, 유리 블러, 청록·빨강 고정색)
   v2.0.47 - 2026-09-24 | 로그인 전 화면(첫 접속, 로딩)을 흑백으로. 이 부분만은 테마와 무관하게 항상 적용
   v2.0.46 - 2026-09-24 | 제목 크기 축소 + 목록·카드·버튼 정돈
   v2.0.45 - 2026-09-24 | 화이트 데스크 스킨
   설정 > 테마 > "화이트 데스크"를 고르면 app.js가 <html data-ui-skin="desk">를 붙이고,
   그때만 이 파일의 규칙이 적용된다. 다른 테마를 고르면 기존 디자인으로 그대로 돌아간다.
   구조: 흰 바탕 데스크 위에 둥근 흰 앱 창 1개 + 얇은 타이틀바 + 창 안쪽 왼쪽 보조 패널. */

/* ── 1. 디자인 값 모음 ───────────────────────────── */
html[data-ui-skin="desk"]{
  --desk-bg:#ebebec;            /* 창 바깥 데스크 */
  --desk-window:#ffffff;        /* 앱 창 */
  --desk-tone:#f5f5f4;          /* 창 안쪽 한 단계 낮은 면 */
  --desk-tone-2:#eeeeed;        /* 더 낮은 면(눌림, 빈 칸) */
  --desk-ink:#18181a;           /* 본문, 강조 */
  --desk-ink-soft:#4a4b50;
  --desk-muted:#86878c;
  --desk-line:rgba(20,20,24,.08);
  --desk-line-strong:rgba(20,20,24,.14);
  --desk-gap:14px;              /* 창과 화면 가장자리 사이 */
  --desk-titlebar:36px;
  --desk-r-window:24px;         /* 창 */
  --desk-r-panel:18px;          /* 창 안 패널 */
  --desk-r-item:12px;           /* 썸네일, 행 */
  --desk-r-control:10px;        /* 버튼, 입력 */
  --desk-font:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --v2-sans:var(--desk-font);
  --v2-serif:var(--desk-font);
  --v2-border:var(--desk-line-strong);
  --v2-hairline:var(--desk-line);
  --v2-hover:var(--desk-tone);
  --surface-readable:#ffffff;
  --surface-glass:#ffffff;
  accent-color:var(--desk-ink);  /* 슬라이더, 체크박스 기본색 */
}

/* ── 2. 데스크 바탕: 사용자 배경 사진은 흑백으로 아주 옅게만 ── */
html[data-ui-skin="desk"] body{background:var(--desk-bg)!important;background-image:none!important;color:var(--desk-ink)}
html[data-ui-skin="desk"] body::before{background:var(--desk-photo,none) center/cover no-repeat!important;filter:grayscale(1) contrast(.9);opacity:.09!important}
html[data-ui-skin="desk"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.55),transparent 70%)}

/* ── 3. 앱 창 + 타이틀바 (PC) ───────────────────── */
@media(min-width:801px){
  html[data-ui-skin="desk"] .app-shell{
    margin:var(--desk-gap);min-height:calc(100vh - var(--desk-gap)*2);
    grid-template-rows:var(--desk-titlebar) 1fr;
    background:var(--desk-window);border-radius:var(--desk-r-window);
    box-shadow:0 0 0 1px var(--desk-line),0 30px 70px -40px rgba(0,0,0,.28);
  }
  /* 타이틀바: 창 버튼 모양 점 3개는 장식이며 누를 수 없다 */
  html[data-ui-skin="desk"] .app-shell::before{
    content:"";grid-column:1/-1;grid-row:1;height:var(--desk-titlebar);
    border-radius:var(--desk-r-window) var(--desk-r-window) 0 0;
    border-bottom:1px solid var(--desk-line);
    background:
      radial-gradient(circle at 20px 50%,#1c1c1e 0 5px,transparent 5.5px),
      radial-gradient(circle at 38px 50%,#c9c9cc 0 5px,transparent 5.5px),
      radial-gradient(circle at 56px 50%,#e1e1e3 0 5px,transparent 5.5px),
      #f7f7f6;
  }
  html[data-ui-skin="desk"] .sidebar{
    grid-row:2;position:sticky;top:var(--desk-gap);
    height:calc(100vh - var(--desk-gap)*2 - var(--desk-titlebar) - 10px);
    width:auto;margin:10px 0 0 10px;padding:14px 10px 12px;
    background:var(--desk-tone);color:var(--desk-ink);
    border:0;border-radius:var(--desk-r-panel);backdrop-filter:none;
  }
  html[data-ui-skin="desk"] .main-column{grid-row:2}
  html[data-ui-skin="desk"] .topbar{top:0;border-radius:0}
  html[data-ui-skin="desk"] .mini-player{left:calc(var(--sidebar-width) + var(--desk-gap) + 18px);right:calc(var(--desk-gap) + 18px);bottom:calc(var(--desk-gap) + 12px)}
}

/* ── 4. 왼쪽 보조 패널 ───────────────────────────── */
html[data-ui-skin="desk"] .brand-button{color:var(--desk-ink);border-bottom:1px solid var(--desk-line);padding:6px 6px 15px}
html[data-ui-skin="desk"] .brand-button strong{color:var(--desk-ink);font-weight:750;letter-spacing:-.02em}
html[data-ui-skin="desk"] .brand-button small{color:var(--desk-muted)}
html[data-ui-skin="desk"] .brand-button .brand-mark.small{background:#fff;border:1px solid var(--desk-line);color:var(--desk-ink);border-radius:12px}
html[data-ui-skin="desk"] .side-nav .nav-button{color:var(--desk-ink-soft);border-radius:var(--desk-r-control);font-weight:560}
html[data-ui-skin="desk"] .side-nav .nav-button:hover{background:rgba(20,20,24,.045);color:var(--desk-ink)}
html[data-ui-skin="desk"] .side-nav .nav-button.active{background:var(--desk-ink);color:#fff;box-shadow:none}
html[data-ui-skin="desk"] .side-foot{border-top:1px solid var(--desk-line)}
html[data-ui-skin="desk"] .side-identity strong{color:var(--desk-ink)}
html[data-ui-skin="desk"] .side-identity small{color:var(--desk-muted)}
html[data-ui-skin="desk"] .sidebar .icon-button{background:#fff;border:1px solid var(--desk-line);color:var(--desk-ink)}

/* ── 5. 상단 제목 영역: 제목은 크게, 조작은 작게 ───── */
html[data-ui-skin="desk"] .topbar{background:rgba(255,255,255,.96);backdrop-filter:none;border-bottom:1px solid var(--desk-line);padding:18px 32px 14px;min-height:0}
html[data-ui-skin="desk"] .topbar h1{font-family:var(--desk-font);font-size:25px;font-weight:750;letter-spacing:-.035em;line-height:1.2;color:var(--desk-ink)}
html[data-ui-skin="desk"] .page-description{color:var(--desk-muted)}
html[data-ui-skin="desk"] .top-actions .quiet-action{background:#fff}
html[data-ui-skin="desk"] .top-actions .quiet-action.strong{background:var(--desk-ink)}

/* ── 6. 버튼, 입력, 공통 면 ─────────────────────── */
html[data-ui-skin="desk"] .quiet-action{background:#fff;border:1px solid var(--desk-line-strong);color:var(--desk-ink);border-radius:var(--desk-r-control)}
html[data-ui-skin="desk"] .quiet-action:hover{background:var(--desk-tone);border-color:var(--desk-line-strong)}
html[data-ui-skin="desk"] .quiet-action.strong{background:var(--desk-ink);border-color:var(--desk-ink);color:#fff}
html[data-ui-skin="desk"] .quiet-action.strong:hover{background:#000}
/* 선택된 토글은 옅은 면 + 검은 테두리. 검은 채움은 주요 실행 버튼 하나에만 쓴다 */
html[data-ui-skin="desk"] .quiet-action.active{background:var(--desk-tone-2);border-color:var(--desk-ink);color:var(--desk-ink)!important}
html[data-ui-skin="desk"] .primary{background:var(--desk-ink);color:#fff;border-radius:var(--desk-r-control)}
html[data-ui-skin="desk"] .icon-button{background:#fff;border:1px solid var(--desk-line);color:var(--desk-ink);border-radius:var(--desk-r-control)}
html[data-ui-skin="desk"] :is(button,input,textarea,select,[contenteditable="true"]):focus-visible{outline:2px solid var(--desk-ink);outline-offset:2px}
html[data-ui-skin="desk"] .card{background:var(--desk-tone);border:0;box-shadow:none}
html[data-ui-skin="desk"] .v2-readable{background:var(--desk-tone)!important}
html[data-ui-skin="desk"] .v2-toolbar .search input,
html[data-ui-skin="desk"] .v2-settings .field input,
html[data-ui-skin="desk"] .v2-settings .field textarea,
html[data-ui-skin="desk"] .v2-settings .field select{background:#fff;border:1px solid var(--desk-line-strong);border-radius:var(--desk-r-control)}
html[data-ui-skin="desk"] .sync-banner{background:var(--desk-tone);color:var(--desk-ink-soft);border:1px solid var(--desk-line)}
html[data-ui-skin="desk"] .toast{background:var(--desk-ink);color:#fff;border-radius:12px}

/* ── 7. 홈: 포스터처럼 큰 문구 + 조용한 날짜 타일 ───── */
html[data-ui-skin="desk"] .v2-home-hero{background:var(--desk-tone);color:var(--desk-ink);box-shadow:none;border-radius:28px;padding:44px 46px}
html[data-ui-skin="desk"] .v2-home-hero::after{border-color:rgba(20,20,24,.06);box-shadow:0 0 0 52px rgba(20,20,24,.018),0 0 0 105px rgba(20,20,24,.012)}
html[data-ui-skin="desk"] .v2-home-hero .v2-kicker{color:var(--desk-muted);letter-spacing:.04em;font-weight:600}
html[data-ui-skin="desk"] .v2-home-hero h2{font-family:var(--desk-font)!important;font-size:clamp(32px,3.5vw,48px)!important;font-weight:780!important;letter-spacing:-.045em!important;line-height:1.1!important;color:var(--desk-ink)}
html[data-ui-skin="desk"] .v2-home-hero .v2-date-card{background:#fff!important;color:var(--desk-ink);border:0;box-shadow:none;border-radius:16px}
html[data-ui-skin="desk"] .v2-home-hero .v2-date-card span,
html[data-ui-skin="desk"] .v2-home-hero .v2-date-card small{color:var(--desk-muted)}
html[data-ui-skin="desk"] .v2-home-hero .v2-date-card strong{color:var(--desk-ink);font-weight:800;letter-spacing:-.03em}
html[data-ui-skin="desk"] .v2-section-head h2,
html[data-ui-skin="desk"] .section-head h2{font-family:var(--desk-font);font-weight:750;letter-spacing:-.03em}
html[data-ui-skin="desk"] .v2-recent-row:hover{background:var(--desk-tone)}
html[data-ui-skin="desk"] .v2-recent-cover{border-radius:var(--desk-r-item)}
html[data-ui-skin="desk"] .v2-album-card{border-radius:var(--desk-r-item)}
html[data-ui-skin="desk"] .v2-album-card.text-only{background:var(--desk-tone);border:0}

/* ── 8. 읽기 화면, 설정, 창(모달) ───────────────── */
html[data-ui-skin="desk"] .v2-log-paper{background:#fff;border:1px solid var(--desk-line);box-shadow:none}
html[data-ui-skin="desk"] .v2-day{background:#fff;border:1px solid var(--desk-line)}
html[data-ui-skin="desk"] .v2-day:hover{background:var(--desk-tone)}
html[data-ui-skin="desk"] .theme-choice{background:#fff;border:1px solid var(--desk-line)}
html[data-ui-skin="desk"] .theme-choice.active{border-color:var(--desk-ink);box-shadow:0 0 0 1px var(--desk-ink)}
html[data-ui-skin="desk"] .modal-backdrop{background:rgba(24,24,26,.32);backdrop-filter:none}
html[data-ui-skin="desk"] .modal-card{background:#fff;backdrop-filter:none;border:1px solid var(--desk-line);border-radius:22px;box-shadow:0 40px 90px -30px rgba(0,0,0,.35)}
html[data-ui-skin="desk"] .modal-card h2{font-family:var(--desk-font)}

/* ── 9. 휴대폰: 창 틀은 빼고 흰 화면 + 흰 하단 메뉴 ── */
@media(max-width:800px){
  html[data-ui-skin="desk"] .app-shell{background:var(--desk-window)}
  html[data-ui-skin="desk"] .topbar{padding:14px 16px 12px}
  html[data-ui-skin="desk"] .topbar h1{font-size:21px}
  html[data-ui-skin="desk"] .v2-home-hero{padding:26px 22px;border-radius:22px}
  html[data-ui-skin="desk"] .v2-home-hero h2{font-size:clamp(26px,7.6vw,32px)!important}
  html[data-ui-skin="desk"] .bottom-nav{background:rgba(255,255,255,.97)!important;border:1px solid var(--desk-line);box-shadow:0 14px 34px -14px rgba(0,0,0,.25);backdrop-filter:none!important}
  html[data-ui-skin="desk"] .bottom-nav .nav-button{color:var(--desk-muted)}
  html[data-ui-skin="desk"] .bottom-nav .nav-button.active{background:var(--desk-ink);color:#fff}
  html[data-ui-skin="desk"] .mini-player{border-radius:14px}
}

/* ── 10. v2.0.46 정돈: 글자 리듬, 목록, 카드 ────────── */
html[data-ui-skin="desk"] ::selection{background:var(--desk-ink);color:#fff}
html[data-ui-skin="desk"] body{font-feature-settings:"tnum" 0}
html[data-ui-skin="desk"] :is(.v2-date-card strong,.v2-kicker){font-variant-numeric:tabular-nums}
/* 스크롤바는 가늘고 옅게 */
html[data-ui-skin="desk"]{scrollbar-width:thin;scrollbar-color:rgba(20,20,24,.22) transparent}
html[data-ui-skin="desk"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-ui-skin="desk"] ::-webkit-scrollbar-thumb{background:rgba(20,20,24,.18);border-radius:10px;border:3px solid transparent;background-clip:content-box}

/* 제목 줄: 설명은 한 단계 작게, 섹션 제목은 작고 단단하게 */
html[data-ui-skin="desk"] .page-description{font-size:12.5px;margin-top:4px}
html[data-ui-skin="desk"] .v2-section{margin-bottom:38px}
html[data-ui-skin="desk"] .v2-section-head{margin-bottom:12px}
html[data-ui-skin="desk"] .v2-section-head h2,
html[data-ui-skin="desk"] .section-head h2{font-size:15px;font-weight:720;letter-spacing:-.02em}

/* 홈 날짜 타일: 숫자가 주인공, 이름표는 작게 */
html[data-ui-skin="desk"] .v2-home-hero .v2-date-card{padding:16px 18px}
html[data-ui-skin="desk"] .v2-home-hero .v2-date-card span{font-size:11.5px;font-weight:560}
html[data-ui-skin="desk"] .v2-home-hero .v2-date-card strong{font-size:24px;line-height:1.15;margin:6px 0 4px}
html[data-ui-skin="desk"] .v2-home-hero .v2-date-card small{font-size:11px;white-space:nowrap;font-variant-numeric:normal}
html[data-ui-skin="desk"] .v2-home-hero .v2-date-card{padding-inline:15px;min-width:0}

/* 최근 기록: 선 1줄 간격의 조용한 목록 */
html[data-ui-skin="desk"] .v2-recent-list{border-top:0}
html[data-ui-skin="desk"] .v2-recent-row{border-bottom:1px solid var(--desk-line);border-radius:0;padding:14px 10px;min-height:84px}
html[data-ui-skin="desk"] .v2-recent-row:hover{border-radius:var(--desk-r-item)}
html[data-ui-skin="desk"] .v2-recent-row.has-cover{grid-template-columns:84px minmax(0,1fr) 18px}
html[data-ui-skin="desk"] .v2-recent-cover{width:84px;height:58px;border-radius:10px;background:var(--desk-tone)}
html[data-ui-skin="desk"] .v2-recent-copy small{font-size:11px;color:var(--desk-muted)}
html[data-ui-skin="desk"] .v2-recent-copy strong{font-size:15px;font-weight:700;letter-spacing:-.02em}
html[data-ui-skin="desk"] .v2-recent-copy>span:last-child{font-size:12.5px;color:var(--desk-muted)}
html[data-ui-skin="desk"] .v2-arrow{color:#b7b8bc}

/* 로그 카드: 테두리 없이 옅은 면, 사진은 안쪽 여백을 두고 둥글게 */
html[data-ui-skin="desk"] .v2-log-blog-grid{gap:14px}
html[data-ui-skin="desk"] .v2-log-blog-card{background:var(--desk-tone);border:0;border-radius:var(--desk-r-panel);padding:8px;transform:none!important}
html[data-ui-skin="desk"] .v2-log-blog-card:hover{background:var(--desk-tone-2)}
html[data-ui-skin="desk"] .v2-log-blog-cover{border-radius:12px;background:#fff}
html[data-ui-skin="desk"] .v2-log-blog-copy{padding:12px 8px 8px;gap:5px}
html[data-ui-skin="desk"] .v2-log-blog-copy small{font-size:11px;color:var(--desk-muted)}
html[data-ui-skin="desk"] .v2-log-blog-copy strong{font-family:var(--desk-font);font-size:16px;font-weight:720;letter-spacing:-.025em}
html[data-ui-skin="desk"] .v2-log-blog-copy>span:last-child{font-size:12.5px;color:var(--desk-muted)}
html[data-ui-skin="desk"] .v2-log-head h2,
html[data-ui-skin="desk"] .v2-detail-title h2{font-family:var(--desk-font);font-weight:780}

/* 사진첩: 썸네일은 반경 14, 이름표는 작게 */
html[data-ui-skin="desk"] .v2-album-cover{border-radius:14px;background:var(--desk-tone)}
html[data-ui-skin="desk"] .v2-album-copy small{font-size:11px;color:var(--desk-muted)}
html[data-ui-skin="desk"] .v2-album-copy strong{font-size:14px;font-weight:700;letter-spacing:-.02em}

/* 창(모달): 머리와 꼬리는 선 없이 면으로 */
html[data-ui-skin="desk"] .modal-card>header{border-bottom:0;padding:20px 22px 8px}
html[data-ui-skin="desk"] .modal-footer{border-top:0;background:var(--desk-tone)}
html[data-ui-skin="desk"] .settings-card>h3{font-family:var(--desk-font)!important;font-size:15px!important;font-weight:720!important}

/* PC(마우스): 버튼과 메뉴를 한 단계 작고 촘촘하게. 터치 기기는 44px 유지 */
@media(min-width:801px) and (pointer:fine){
  html[data-ui-skin="desk"] :is(.quiet-action,.icon-button){min-height:36px}
  html[data-ui-skin="desk"] .quiet-action{padding:6px 13px;font-size:12.5px;font-weight:600}
  html[data-ui-skin="desk"] .icon-button{width:36px;height:36px}
  html[data-ui-skin="desk"] .side-nav .nav-button{min-height:40px;font-size:13.5px;padding:6px 9px}
  html[data-ui-skin="desk"] .side-nav .v2-svg-icon svg{stroke-width:1.5}
}

/* 휴대폰: 상단 영역을 줄여 내용이 먼저 보이게 */
@media(max-width:800px){
  html[data-ui-skin="desk"] .mobile-brand-edit{min-height:36px;margin-bottom:2px}
  html[data-ui-skin="desk"] .mobile-brand-edit .icon-button{background:transparent;border:0;color:var(--desk-muted)}
  html[data-ui-skin="desk"] .page-title-row{margin-bottom:10px}
  html[data-ui-skin="desk"] .top-actions{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  html[data-ui-skin="desk"] .top-actions::-webkit-scrollbar{display:none}
  html[data-ui-skin="desk"] .top-actions .quiet-action{flex:0 0 auto;padding:8px 14px}
  html[data-ui-skin="desk"] .bottom-nav{border-radius:20px;padding:5px}
  html[data-ui-skin="desk"] .bottom-nav .nav-button{border-radius:14px;font-size:10.5px;font-weight:600}
}

/* ── 11. v2.0.48 남은 예전 스타일 정리 ─────────────
   전 화면을 자동 검사해서 찾은 곳만 고친다: 그림자, 반투명 흰 테두리, 유리 블러, 고정 청록/빨강 */
/* 유리 블러 제거: 흰 바탕에서는 보이지 않고 스크롤만 무거워진다 */
html[data-ui-skin="desk"] :is(.card,.v2-date-card,.settings-card,.calendar-card){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* 倒數日 카드 */
html[data-ui-skin="desk"] .v2-dday-card{background:var(--desk-tone);border:0;box-shadow:none;border-radius:var(--desk-r-panel)}
/* 對話 틀 */
html[data-ui-skin="desk"] .v2-chat-shell{background:#fff;border:1px solid var(--desk-line);box-shadow:none;border-radius:var(--desk-r-panel)}
html[data-ui-skin="desk"] .v2-chat-list{background:var(--desk-tone)}
/* 點唱機 유튜브 카드 */
html[data-ui-skin="desk"] .v2-youtube-card{border:0;background:var(--desk-tone)}
/* 個人資料: 상세 종이와 무천/슌 전환 */
html[data-ui-skin="desk"] .profile-paper{box-shadow:none;border:1px solid var(--desk-line)}
html[data-ui-skin="desk"] .profile-owner-tabs{background:var(--desk-tone);border-color:transparent}
html[data-ui-skin="desk"] .profile-owner-tabs button.active{background:#fff;color:var(--desk-ink);box-shadow:0 0 0 1px var(--desk-line-strong)}
/* 새 기록, 더보기 창의 선택 타일 */
html[data-ui-skin="desk"] .modal-card .user-choice{background:var(--desk-tone);border:1px solid transparent;box-shadow:none;transform:none}
html[data-ui-skin="desk"] .modal-card .user-choice:hover{background:#fff;border-color:var(--desk-ink)}
/* 로그아웃 같은 위험 버튼: 빨간 채움 대신 흰 바탕 + 빨간 글자 (의미는 유지, 화면 톤은 흑백) */
html[data-ui-skin="desk"] .danger:not(.notice){background:#fff;color:#b3413b;border:1px solid rgba(179,65,59,.35);border-radius:var(--desk-r-control)}
html[data-ui-skin="desk"] .danger:not(.notice):hover{background:#fbf1f0}
/* 미니 플레이어: 고정 청록 표지와 회색 재생 버튼 */
html[data-ui-skin="desk"] .mini-player{background:rgba(24,24,26,.97);backdrop-filter:none}
html[data-ui-skin="desk"] .mini-cover{background:#2e2e31}
html[data-ui-skin="desk"] .player-btn.main{background:#fff;color:var(--desk-ink)}
html[data-ui-skin="desk"] .player-btn.repeat-mini.active{color:#fff}

/* ── 12. 로그인 전 화면: 항상 흑백 ───────────────────
   로그인 전에는 어떤 테마를 골랐는지 알 수 없으므로 data-ui-skin 조건 없이 적용한다.
   구조: 회색 데스크 위의 작은 앱 창 1개. 왼쪽은 검은 판, 오른쪽은 흰 입력 영역. */
:root{
  --gate-bg:#ebebec;--gate-ink:#18181a;--gate-muted:#86878c;--gate-line:rgba(20,20,24,.1);
  --gate-font:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
.boot-screen,.login-shell{background:var(--gate-bg);color:var(--gate-ink);font-family:var(--gate-font)}

/* 로딩 카드 */
.boot-card{background:#fff;backdrop-filter:none;border:1px solid var(--gate-line);border-radius:20px;box-shadow:0 30px 70px -40px rgba(0,0,0,.3);padding:26px 34px;gap:10px}
.boot-card strong{font-weight:720;letter-spacing:-.02em}
.boot-card span{color:var(--gate-muted)}
.boot-card .brand-mark{width:52px;height:52px;border-radius:14px;background:var(--gate-ink);box-shadow:none;font:800 17px/1 var(--gate-font);letter-spacing:.04em}
.boot-card .primary{background:var(--gate-ink);color:#fff;border-radius:10px}

/* 로그인 창 */
.login-card{
  width:min(880px,100%);grid-template-rows:36px auto;
  background:#fff;backdrop-filter:none;border:1px solid var(--gate-line);border-radius:24px;
  box-shadow:0 40px 90px -45px rgba(0,0,0,.35);
}
.login-card::before{  /* 타이틀바: 점 3개는 장식 */
  content:"";grid-column:1/-1;border-bottom:1px solid var(--gate-line);
  background:
    radial-gradient(circle at 20px 50%,var(--gate-ink) 0 5px,transparent 5.5px),
    radial-gradient(circle at 38px 50%,#c9c9cc 0 5px,transparent 5.5px),
    radial-gradient(circle at 56px 50%,#e1e1e3 0 5px,transparent 5.5px),
    #f7f7f6;
}
.login-art{min-height:480px;margin:10px 0 10px 10px;border-radius:18px;background:var(--gate-ink)}
.login-art::after{display:none}
.orbit{border-color:rgba(255,255,255,.13)}
.login-emblem{width:150px;height:150px;border:1px solid rgba(255,255,255,.35);background:none;backdrop-filter:none;box-shadow:none;color:#fff;font:800 28px/1 var(--gate-font)!important;letter-spacing:.16em}
.login-copy{padding:56px 58px}
.login-copy .eyebrow{color:var(--gate-muted)!important;font-weight:650;letter-spacing:.08em;font-size:11px}
.login-copy h1{font-family:var(--gate-font)!important;font-size:clamp(30px,3.6vw,42px)!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:1.12!important;color:var(--gate-ink);margin:6px 0 14px}
.login-copy>p:not(.eyebrow){color:var(--gate-muted);font-size:14px}
.login-form{margin-top:34px}
.login-form label{font-size:12px;font-weight:650;color:var(--gate-ink)}
.password-row input{height:48px;border-radius:12px;border:1px solid var(--gate-line);background:#f5f5f4;color:var(--gate-ink);font-family:var(--gate-font)}
.password-row input::placeholder{color:#a3a4a8}
.password-row input:focus{border-color:var(--gate-ink);background:#fff;box-shadow:0 0 0 3px rgba(20,20,24,.08)}
.password-row .primary{height:48px;padding:0 20px;border-radius:12px;background:var(--gate-ink);color:#fff;font-weight:650;box-shadow:none}
.password-row .primary:hover{background:#000}
.password-row .primary:disabled{opacity:.55}
.login-shell button:focus-visible{outline:2px solid var(--gate-ink);outline-offset:2px}
.login-shell input:focus-visible{outline:none}  /* 입력칸은 검은 테두리 + 옅은 링으로 초점을 보여준다 */

@media(max-width:800px){
  .login-card{grid-template-rows:32px auto auto;border-radius:22px}
  .login-art{min-height:190px;margin:8px 8px 0}
  .login-emblem{width:110px;height:110px;font-size:21px!important}
  .login-copy{padding:28px 22px 26px}
  .login-copy h1{font-size:30px!important}
}

/* 사용자 고르기 화면: 로그인 뒤라 테마를 알 수 있으므로 화이트 데스크일 때만 */
html[data-ui-skin="desk"] .user-shell{background:var(--desk-bg)}
html[data-ui-skin="desk"] .user-card{background:#fff;backdrop-filter:none;border:1px solid var(--desk-line);border-radius:24px;box-shadow:0 40px 90px -45px rgba(0,0,0,.35)}
html[data-ui-skin="desk"] .user-card .eyebrow{color:var(--desk-muted)!important;letter-spacing:.08em;font-weight:650}
html[data-ui-skin="desk"] .user-card h1{font-family:var(--desk-font)!important;font-weight:800!important;letter-spacing:-.045em!important;color:var(--desk-ink)}
html[data-ui-skin="desk"] .user-choice{background:var(--desk-tone);border:1px solid transparent;border-radius:18px}
html[data-ui-skin="desk"] .user-choice:hover{transform:none;background:#fff;border-color:var(--desk-ink);box-shadow:none}

/* ── 13. 움직임 줄이기 설정 존중 ────────────────── */
@media(prefers-reduced-motion:reduce){
  html[data-ui-skin="desk"] *{transition-duration:.01ms!important}
}