/* ════════════════════════════════════════════════════════════
   [VIP Grade] 등급 색상 Token — Home VIP Card 와 Right Navigation 공통 소유
   ------------------------------------------------------------
   · 등급별 SVG 에셋이 없으므로 동일 Shield · Crown 형태에 색상만 바꾼다.
     Shield/Crown 구조는 재설계하지 않는다.
   · --vg-face  : Shield 내부 면 (Dark Surface)
   · --vg-line  : Shield 외곽선
   · --vg-crown : Crown 선 + 등급명 Text
   · SILVER · PLATINUM · DIAMOND 는 어두운 면 + 밝은 외곽선으로 흰색 뭉갬을 막는다.
   · INTEREST 는 GOLD 와 색상군 자체가 다르다(Rose 계열).
   · Token 은 Hook 요소에만 적용되어 다른 컴포넌트로 새지 않는다.
════════════════════════════════════════════════════════════ */

/* 미지정 등급(Token 미적용) 안전값 — GOLD 기준 */
[data-vip-grade-icon],
[data-vip-grade-text],
[data-vip-prefix],
[data-vip-grade-badge] {
  --vg-face:#1C2A4A;
  --vg-line:#D4AF5A;
  --vg-crown:#E2C36F;
  --vg-emblem:url('/s/ess83/assets/emblem/gold.png');
}

[data-vip-grade-icon][data-grade="bronz"],
[data-vip-grade-text][data-grade="bronz"],
[data-vip-prefix][data-grade="bronz"],
[data-vip-grade-badge][data-grade="bronz"]      { --vg-face:#2A1D12; --vg-line:#B3774A; --vg-crown:#C98C4E; --vg-emblem:url('/s/ess83/assets/emblem/bronze.png'); }

[data-vip-grade-icon][data-grade="silver"],
[data-vip-grade-text][data-grade="silver"],
[data-vip-prefix][data-grade="silver"],
[data-vip-grade-badge][data-grade="silver"]     { --vg-face:#1C222B; --vg-line:#9AA7B8; --vg-crown:#CBD5E1; --vg-emblem:url('/s/ess83/assets/emblem/silver.png'); }

[data-vip-grade-icon][data-grade="gold"],
[data-vip-grade-text][data-grade="gold"],
[data-vip-prefix][data-grade="gold"],
[data-vip-grade-badge][data-grade="gold"]       { --vg-face:#1C2A4A; --vg-line:#D4AF5A; --vg-crown:#E2C36F; --vg-emblem:url('/s/ess83/assets/emblem/gold.png'); }

[data-vip-grade-icon][data-grade="platinum"],
[data-vip-grade-text][data-grade="platinum"],
[data-vip-prefix][data-grade="platinum"],
[data-vip-grade-badge][data-grade="platinum"]   { --vg-face:#20262E; --vg-line:#C7D0DA; --vg-crown:#E8EEF5; --vg-emblem:url('/s/ess83/assets/emblem/platinum.png'); }

[data-vip-grade-icon][data-grade="diamond"],
[data-vip-grade-text][data-grade="diamond"],
[data-vip-prefix][data-grade="diamond"],
[data-vip-grade-badge][data-grade="diamond"]    { --vg-face:#12242E; --vg-line:#67C7DE; --vg-crown:#A8E4F0; --vg-emblem:url('/s/ess83/assets/emblem/diamond.png'); }

[data-vip-grade-icon][data-grade="interest"],
[data-vip-grade-text][data-grade="interest"],
[data-vip-prefix][data-grade="interest"],
[data-vip-grade-badge][data-grade="interest"]   { --vg-face:#2B1A22; --vg-line:#C77A8E; --vg-crown:#E2A0B0; }

/* [공통 셸] LoginModal·Left/Right Drawer·오버레이·검색(+반응형) */
#ess83-toast {
  position:fixed;
  left:50%;bottom:84px;                          /* Bottom Nav(68) 위 여백 */
  transform:translateX(-50%) translateY(8px);
  z-index:8950;
  max-width:calc(100% - 32px);width:max-content;
  box-sizing:border-box;
  padding:11px 16px;
  border-radius:10px;
  background:rgba(20,20,22,.96);
  border:1px solid rgba(212,175,90,.28);
  color:#fff;font-size:12px;font-weight:600;line-height:1.4;
  text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
#ess83-toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
.my-overlay {
  position:fixed;inset:0;z-index:8800;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .24s ease;
}
.my-overlay.open {opacity:1;pointer-events:auto}
.right-drawer {
  position:fixed;top:0;right:0;z-index:8900;
  width:312px;max-width:82vw;height:100dvh;
  background:linear-gradient(180deg,rgba(18,18,20,.46) 0%,rgba(9,10,12,.38) 100%);
  backdrop-filter:blur(34px) saturate(145%);
  -webkit-backdrop-filter:blur(34px) saturate(145%);
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow:-18px 0 48px rgba(0,0,0,.54),inset 1px 0 0 rgba(255,255,255,.04);
  transform:translateX(104%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.right-drawer::before {
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 76% 0%,rgba(212,175,90,.08),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
}
.right-drawer.open {transform:translateX(0)}
.rd-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.rd-title {font-size:15px;font-weight:800;color:rgba(255,255,255,.90);letter-spacing:.02em;line-height:1}
.rd-sub {margin-top:4px;font-size:10px;font-weight:500;color:rgba(255,255,255,.30);letter-spacing:.01em}
.rd-close {
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.44);transition:background .14s;
}
.rd-close:active {background:rgba(255,255,255,.07)}
.rd-close svg {width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.rd-scroll {flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rd-scroll::-webkit-scrollbar {display:none}
.rd-user {
  margin:14px 16px 0;padding:16px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(212,175,90,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.rd-user-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:calc(100% - 32px);
  margin:10px 16px 0;
  padding:14px 16px;
  min-height:58px;
  box-sizing:border-box;
  background:rgba(255,255,255,.04);       /* DS: 자산 Card 계열, VIP보다 약함 */
  border:1px solid rgba(255,255,255,.07); /* DS: --br-default (Gold 아님) */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  border-radius:12px;                     /* DS: --r-lg */
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s, border-color .15s;
}
.rd-user-link:hover {
  background:rgba(255,255,255,.055);      /* 배경만 미세 상승 */
  border-color:rgba(255,255,255,.10);     /* Border만 미세 상승 */
}
.rd-user-info {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;                           /* 긴 닉네임 대응 */
  flex:1 1 auto;
}
.rd-user-id {
  display:flex;
  align-items:center;
  gap:7px;                               /* 등급 엠블럼 ↔ 닉네임 7~8px */
  min-width:0;
}
.rd-grade-icon {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  border:0;
  /* 등급별 엠블럼 이미지 — data-grade Hook 이 --vg-emblem 을 지정한다. */
  background-color:transparent;
  background-image:var(--vg-emblem);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.rd-grade-icon svg { display:none; }
/* 등급 아이콘 — 색상은 Token 이 담당한다. */
.rd-grade-icon .ve-shield {
  fill:var(--vg-face);
  stroke:var(--vg-line);
  stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}
.rd-grade-icon .ve-crown {
  fill:none;
  stroke:var(--vg-crown);
  stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.rd-user-act {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:2px;
  font-size:11px;font-weight:600;
  color:rgba(255,255,255,.42);           /* DS: Caption — Secondary 위계 */
  white-space:nowrap;
}
.rd-user-act .rd-sc-chevron {
  flex:0 0 auto;display:flex;align-items:center;
  width:13px;height:13px;
}
.rd-user-act .rd-sc-chevron svg {
  width:13px;height:13px;fill:none;
  stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.rd-user-link:active { background:rgba(255,255,255,.075); }
.rd-user-link:focus-visible {
  outline:2px solid rgba(212,175,90,.55);
  outline-offset:2px;
}
.rd-user-link .rd-nickname {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rd-assets-sum {
  padding:4px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.rd-as-row {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 38px;
  column-gap:6px;
  align-items:center;
  min-height:36px;                               /* 네 행 동일 높이(버튼 20 포함) */
  padding:0;                                      /* 행별 상하 padding 없음 → Divider 간격 통일 */
}
.rd-as-row + .rd-as-row {border-top:1px solid rgba(255,255,255,.05)}
.rd-as-lbl {
  grid-column:1;
  font-size:11px;font-weight:600;color:rgba(255,255,255,.50);
  white-space:nowrap;text-align:left;
}
.rd-as-val {
  grid-column:2;
  min-width:0;text-align:right;
  font-size:14px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:visible;
}
.rd-as-val.wallet {color:#D4AF5A}
.rd-as-val.point {color:#3B7CF4}
.rd-as-val.comp {color:rgba(255,255,255,.62)}
.rd-as-val.coupon {color:rgba(255,255,255,.70)}
.rd-as-act {
  grid-column:3;
  display:flex;align-items:center;justify-content:flex-end;
  width:38px;min-width:38px;
}
.rd-as-act--ph { pointer-events:none; }
.rd-as-convert {
  width:38px;min-width:38px;height:20px;padding:0;
  border-radius:5px;
  border:1px solid rgba(212,175,90,.38);          /* 약한 Gold Outline */
  background:transparent;                          /* 기본 투명 */
  color:#D4AF5A;font-size:8px;font-weight:700;
  white-space:nowrap;cursor:pointer;
  box-shadow:none;
  transition:background .15s,border-color .15s;
}
.rd-as-convert:hover {
  background:rgba(212,175,90,.08);                 /* Hover에서만 매우 약한 Gold Tint */
  border-color:rgba(212,175,90,.55);
}
.rd-as-convert:active { background:rgba(212,175,90,.14); }
.rd-as-convert:disabled, .rd-as-convert[aria-disabled="true"] { opacity:.4; cursor:not-allowed; }
.rd-as-link {
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:inherit;text-align:start;width:100%;
}
.rd-bets {font:inherit;text-align:start;width:calc(100% - 32px)}
.rd-as-link .rd-sc-chevron {flex:0 0 auto;display:flex;align-items:center}
.rd-actions {
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.rd-act {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:64px;padding:10px 4px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;transition:background .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.rd-act .rd-sc-ico {width:20px;height:20px}
.rd-act .rd-sc-ico svg {width:20px;height:20px}
.rd-act-lbl {
  font-size:10px;font-weight:600;color:rgba(255,255,255,.72);
  white-space:nowrap;
}
.rd-logout-wrap {margin:14px 16px 4px}
/* 등급 Badge — 'VIP' 라벨 + 등급명 두 조각. 색상은 등급 Token 을 따른다. */
/* 등급 Badge — 색은 전부 현재 등급 Token 이 정한다(GOLD 고정값 없음).
   Dark Face 면 + 밝은 Border 로 절제되게 구분한다. Badge 전체를 등급색으로 채우지 않는다.
   크기 · Padding · Radius · 인사말 Layout 은 기존 그대로다. */
.rd-vip-prefix { color:rgba(255,255,255,.52); font-weight:700; }   /* Warm Gray 위계 유지 */
.rd-vip-grade  { color:var(--vg-crown); font-weight:800; }
.rd-vip-badge {
  padding:3px 8px;border-radius:99px;
  background:var(--vg-face);
  border:1px solid var(--vg-line);
  font-size:9px;font-weight:800;letter-spacing:.06em;
}
/* 인사줄 = 캡션 + 등급 Badge 한 줄. Badge 는 좌측 캡션 바로 뒤에 붙는다. */
.rd-greeting {
  display:flex;align-items:center;gap:7px;
  font-size:10px;color:rgba(255,255,255,.35);margin-bottom:5px;
}
.rd-nickname {font-size:15px;font-weight:700;color:rgba(255,255,255,.90)}
.rd-bets {
  margin:10px 16px 0;padding:14px;
  border-radius:12px;
  background:rgba(26,86,219,.08);
  border:1px solid rgba(26,86,219,.18);
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.rd-bets:active {background:rgba(26,86,219,.14)}
.rd-bets-left {}
.rd-bets-eyebrow {font-size:9px;font-weight:700;color:#3B7CF4;margin-bottom:5px}
.rd-bets-val {font-size:14px;font-weight:700;color:rgba(255,255,255,.88)}
.rd-bets-val.none {font-size:12px;color:rgba(255,255,255,.36);font-weight:500}
.rd-bets-arrow {
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(59,124,244,.14);
}
.rd-bets-arrow svg {width:14px;height:14px;stroke:#3B7CF4;stroke-width:2;fill:none;stroke-linecap:round}
.rd-section {padding:12px 16px 0}
.rd-section-title {
  font-size:10px;font-weight:700;
  color:rgba(255,255,255,.32);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:8px;
}
.rd-section-title--account {
  margin:14px 16px 8px;
}
/* 섹션 제목이 상단 여백을 담당하므로 바로 다음 카드는 자체 상단 여백을 두지 않는다. */
.rd-section-title--account + .rd-user-link {
  margin-top:0;
}
.rd-sc-item {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.rd-sc-item:hover {background:rgba(255,255,255,.06);transition:background .18s}
.rd-sc-item:active {background:rgba(255,255,255,.08)}
.rd-sc-left {display:flex;align-items:center;gap:10px}
.rd-sc-ico {width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.rd-sc-ico svg {width:18px;height:18px;stroke:rgba(255,255,255,.40);stroke-width:2;fill:none;stroke-linecap:round}
.rd-sc-lbl {font-size:13px;font-weight:600;color:rgba(255,255,255,.72)}
.rd-sc-right {display:flex;align-items:center;gap:6px}
.rd-sc-val {font-size:12px;font-weight:600;color:rgba(255,255,255,.44)}
.rd-sc-chevron svg {width:14px;height:14px;stroke:rgba(255,255,255,.24);stroke-width:2;fill:none;stroke-linecap:round}
.rd-svc-grid {
  display:flex;flex-wrap:wrap;
  gap:8px;
}
.rd-svc-grid > .rd-svc-btn {
  flex:1 1 calc(33.333% - 6px);   /* 1행 3개 기준 */
  min-width:0;
}
.rd-svc-btn {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:0 8px;border-radius:12px;
  /* [T028] 6개 카드 높이 통일 — 콘텐츠 의존 높이 제거(고정 74px).
     "카카오톡 상담" 등 긴 문구가 행 높이를 바꾸지 않도록 nowrap 병행. */
  height:74px;min-height:74px;box-sizing:border-box;
  white-space:nowrap;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.60);font-size:11px;font-weight:600;
  transition:background .15s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.rd-svc-btn:hover {background:rgba(255,255,255,.06);transition:background .18s}
.rd-svc-btn:active {background:rgba(255,255,255,.08);color:rgba(255,255,255,.90)}
.rd-svc-btn svg {width:22px;height:22px;flex:0 0 22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rd-svc-btn svg.kakao-logo {stroke:none;stroke-width:0;fill:none}
body.is-guest .left-drawer  [data-protected], body.is-guest .right-drawer [data-protected] {
  position:relative;                 /* 자물쇠 기준점 */
  cursor:pointer;                    /* 클릭 가능 유지 */
  /* 직접 Text Node는 자식 Selector(> *)가 닿지 않으므로 color로 감쇠.
     버튼 전체 opacity는 사용하지 않음(배경/Border 원본 유지). */
  color:rgba(255,255,255,.42);
}
body.is-guest .left-drawer  [data-protected] > *:not(svg), body.is-guest .right-drawer [data-protected] > *:not(svg) {
  opacity:.42;
  transition:opacity .15s;
}
body.is-guest .left-drawer  [data-protected]::after, body.is-guest .right-drawer [data-protected]::after {
  content:"";
  position:absolute;
  top:6px; right:6px;
  width:10px; height:10px;
  opacity:.55;
  pointer-events:none;               /* 클릭 통과 → Guard 정상 동작 */
  background-repeat:no-repeat;
  background-position:center;
  background-size:10px 10px;
  /* 자물쇠 SVG(고리+본체) — currentColor 불가한 ::after 특성상 흰색 고정 */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
body.is-user .left-drawer  [data-protected]::after, body.is-user .right-drawer [data-protected]::after { content:none; }
.rd-logout-wrap {padding:8px 16px 12px}
.rd-logout {
  width:100%;height:42px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;
  color:rgba(255,255,255,.38);font-size:13px;font-weight:600;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  transition:background .16s,color .16s,border-color .16s;
  -webkit-tap-highlight-color:transparent;
}
.rd-logout:active {background:rgba(230,57,70,.10);color:rgba(255,255,255,.78);border-color:rgba(230,57,70,.20)}
.rd-logout svg {width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.rd-footer {display:none}
.drawer-overlay {
  position:fixed;inset:0;z-index:8800;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .24s ease;
}
.drawer-overlay.open {opacity:1;pointer-events:auto}
.left-drawer {
  position:fixed;top:0;left:0;z-index:8900;
  width:312px;max-width:82vw;height:100dvh;
  background:linear-gradient(180deg,rgba(18,18,20,.46) 0%,rgba(9,10,12,.38) 100%);
  backdrop-filter:blur(34px) saturate(145%);
  -webkit-backdrop-filter:blur(34px) saturate(145%);
  border-right:1px solid rgba(255,255,255,.12);
  box-shadow:18px 0 48px rgba(0,0,0,.54),inset -1px 0 0 rgba(255,255,255,.04);
  transform:translateX(-104%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;
  overflow:hidden;   /* Task 8: 전체 스크롤 방지 */
}
.left-drawer::before {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 24% 0%,rgba(212,175,90,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
  z-index:-1;
}
.left-drawer.open {transform:translateX(0)}
.ld-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;   /* Task 8: 고정 */
}
.ld-logo-name {font-size:20px;font-weight:800;color:#D4AF5A;letter-spacing:.07em;line-height:1}
.ld-logo-sub {margin-top:4px;font-size:9px;font-weight:600;color:#7A6228;letter-spacing:.18em}
.ld-head-right {display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ld-head-grade {
  font-size:10px;font-weight:700;
  color:#D4AF5A;letter-spacing:.04em;
  line-height:1;
}
.ld-close {
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.44);
}
.ld-close:active {background:rgba(255,255,255,.07)}
.ld-close svg {width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.ld-scroll {
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ld-scroll::-webkit-scrollbar {display:none}
.ld-user {
  margin:14px 16px 10px;padding:16px;   /* Task 4: 14→16px */
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(212,175,90,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.ld-grade {font-size:12px;font-weight:800;color:#D4AF5A;letter-spacing:.05em;margin-bottom:8px}
.ld-assets {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ld-asset {
  padding:10px 12px;border-radius:10px;   /* Task 4: 9px 10px → 10px 12px */
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);
}
.ld-asset span {display:block;font-size:9px;color:rgba(255,255,255,.36);margin-bottom:3px}
.ld-asset strong {font-size:12px;color:rgba(255,255,255,.86)}
.ld-guest-text {font-size:12px;line-height:1.45;color:rgba(255,255,255,.58);margin-bottom:12px}
.ld-auth-row {display:flex;gap:8px}
.ld-auth-btn {flex:1;height:34px;border-radius:8px;font-size:11px;font-weight:700}
.ld-auth-btn.login {border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.ld-auth-btn.join {background:linear-gradient(135deg,#D4AF5A,#C4A040);color:#000}
.ld-top-actions {padding:0 16px 4px}
.ld-section {padding:10px 16px 0}
.ld-section + .ld-section {margin-top:8px}
.ld-section-title {
  font-size:10px;font-weight:700;
  color:rgba(255,255,255,.32);letter-spacing:.07em;text-transform:uppercase;  /* T019-2: .085→.07 (Premium Typography) */
  margin:12px 2px 8px;
}
.ld-menu {display:flex;flex-direction:column;gap:4px}
.ld-item {
  height:42px;display:flex;align-items:center;gap:11px;
  padding:0 12px;border-radius:10px;
  color:rgba(255,255,255,.66);font-size:13px;font-weight:600;
  transition:background .18s,color .18s;   /* Task 5: .14→.18s */
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.ld-item:hover {background:rgba(255,255,255,.05);color:rgba(255,255,255,.82)}
.ld-item:active {background:rgba(255,255,255,.08);color:rgba(255,255,255,.90)}
.ld-item.active {background:rgba(212,175,90,.10);color:#D4AF5A;padding-left:21px}
.ld-item.active::before {
  content:'';
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:99px;
  background:#D4AF5A;
}
.ld-ico {width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:currentColor;flex-shrink:0}
.ld-ico svg {width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ld-logout {
  width:100%;height:40px;
  color:rgba(255,255,255,.48);
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.035);
}
.ld-logout:active {
  background:rgba(230,57,70,.10);
  color:rgba(255,255,255,.82);
  border-color:rgba(230,57,70,.22);
}
.ld-logout .ld-ico svg {stroke:currentColor}
.ld-footer {
  padding:16px 18px 20px;
  border-top:1px solid rgba(255,255,255,.05);
  flex-shrink:0;   /* Task 8: 고정 */
}
.ld-foot-main {font-size:10px;font-weight:600;color:rgba(255,255,255,.36);line-height:1.45}
.ld-foot-sub {margin-top:5px;font-size:9px;color:rgba(255,255,255,.24)}
.ld-foot-copy {margin-top:4px;font-size:9px;color:rgba(255,255,255,.16)}
.am-backdrop {
  position:absolute;inset:0;
  background:rgba(0,0,0,.72);
  opacity:0;transition:opacity .25s;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.am-sheet {
  position:absolute;
  bottom:0;left:50%;
  transform:translate(-50%,100%);
  width:100%;max-width:430px;
  max-height:calc(100dvh - 24px);
  background:#111111;
  border-radius:20px 20px 0 0;
  border-top:1px solid rgba(255,255,255,.09);
  padding:0 24px calc(24px + env(safe-area-inset-bottom));
  transition:transform .30s cubic-bezier(.32,.72,0,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.am-handle {
  width:36px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.18);
  margin:12px auto 18px;
}
.am-head {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.am-title {font-size:17px;font-weight:700;color:rgba(255,255,255,.90)}
.am-close {
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.40);transition:background .14s;
}
.am-close:active {background:rgba(255,255,255,.08)}
.am-close svg {width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.am-inp-wrap {position:relative;margin-bottom:10px}
.am-inp {
  width:100%;height:48px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);border-radius:10px;
  padding:0 44px 0 44px;
  font-size:15px;font-weight:500;
  color:rgba(255,255,255,.90);
  font-family:-apple-system,'Apple SD Gothic Neo',sans-serif;
  transition:border-color .18s,background .18s;
}
.am-inp:focus {
  border-color:rgba(212,175,90,.55);
  background:rgba(255,255,255,.08);
  outline:none;
}
.am-inp-ico {
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.30);pointer-events:none;
}
.am-inp-ico svg {width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.am-pw-toggle {
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.30);transition:color .14s;
}
.am-pw-toggle:active {color:rgba(255,255,255,.65)}
.am-pw-toggle svg {width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.am-err {
  font-size:11px;font-weight:500;color:#E63946;
  min-height:16px;margin-bottom:6px;
}
/* 아이디 저장 단독 항목 — 좌측 정렬. */
.am-chk-line {
  display:flex; align-items:center; justify-content:flex-start;
  gap:18px;
  margin-bottom:10px;
}
.am-chk-line .am-chk-row { margin-bottom:0; flex:0 0 auto; }
.am-chk-row {
  display:flex;align-items:center;gap:7px;
  margin-bottom:12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.am-chk-box {
  width:16px;height:16px;flex-shrink:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  transition:background .14s,border-color .14s;
}
.am-chk-box.on {
  background:rgba(212,175,90,.20);
  border-color:rgba(212,175,90,.60);
}
.am-chk-box svg {
  width:10px;height:10px;
  stroke:#D4AF5A;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transition:opacity .14s;
}
.am-chk-box.on svg {opacity:1}
.am-chk-lbl {font-size:12px;font-weight:500;color:rgba(255,255,255,.50)}
.am-btn-login {
  width:100%;height:50px;
  background:linear-gradient(135deg,#D4AF5A 0%,#C4A040 100%);
  border-radius:10px;
  font-size:16px;font-weight:800;color:#000;
  box-shadow:
    0 6px 20px rgba(212,175,90,.34),
    0 2px 6px rgba(212,175,90,.18);
  margin-bottom:12px;              /* T023-2: 로그인 → 또는 12px */
  transition:opacity .15s,box-shadow .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.am-btn-login:active {
  opacity:.86;
  box-shadow:0 2px 8px rgba(212,175,90,.20);
}
.am-btn-login svg {width:16px;height:16px;stroke:#000;stroke-width:2.5;fill:none;stroke-linecap:round}
.am-divider {
  display:flex;align-items:center;gap:10px;
  font-size:11px;color:rgba(255,255,255,.28);
  margin-bottom:12px;              /* T023-2: 또는 → 회원가입 12px */
}
.am-divider::before, .am-divider::after {
  content:'';flex:1;height:1px;background:rgba(255,255,255,.08);
}
.am-btn-join {
  width:100%;height:46px;
  border:1px solid rgba(255,255,255,.14);border-radius:10px;
  font-size:14px;font-weight:600;color:rgba(255,255,255,.65);
  transition:background .14s,border-color .14s;
  margin-bottom:16px;              /* T023-2/4: 회원가입 → 카카오 16px (하나의 그룹처럼) */
}
.am-btn-join:active {background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)}
.am-kakao {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  padding:0;                       /* T023-4: 이중 여백 제거 — 간격은 .am-btn-join이 단일 담당 */
  width:100%;
  cursor:pointer;
  transition:opacity .15s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.am-kakao svg.kakao-logo {display:block;flex-shrink:0}
.am-kakao-lbl {
  font-size:11px;font-weight:500;
  color:rgba(255,255,255,.38);
  text-align:center;
  transition:color .14s;
}
.am-kakao:active {
  opacity:.78;
  transform:scale(1.03);
}
.am-kakao:active .am-kakao-lbl {color:rgba(255,255,255,.70)}
.am-captcha {
  overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height .30s ease,opacity .25s ease,margin .28s ease;
  margin-bottom:0;
}
.am-captcha.show {
  max-height:180px;opacity:1;
  margin-bottom:8px;
  padding-top:8px;
}
.am-captcha-msg {
  font-size:10px;font-weight:500;
  color:rgba(255,255,255,.34);
  margin-bottom:6px;
}
.am-captcha-box {
  display:flex;align-items:center;gap:8px;
  margin-bottom:8px;
}
.am-captcha-code {
  flex:1;height:36px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  overflow:hidden;position:relative;
}
.am-captcha-code canvas {display:block;width:100%;height:100%}
.am-captcha-refresh {
  width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  color:rgba(255,255,255,.36);
  transition:background .14s;
}
.am-captcha-refresh:active {background:rgba(255,255,255,.10)}
.am-captcha-refresh svg {width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.am-captcha-inp {
  width:100%;height:44px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);border-radius:8px;
  padding:0 14px;
  font-size:16px;font-weight:700;
  color:rgba(255,255,255,.90);letter-spacing:.06em;
  font-family:-apple-system,sans-serif;
  transition:border-color .18s;
}
.am-captcha-inp:focus {border-color:rgba(212,175,90,.50);outline:none}
.am-captcha-err {
  font-size:10px;font-weight:500;color:#E63946;
  min-height:14px;margin-top:4px;
  visibility:hidden;
}
.am-captcha-err.show {visibility:visible}
@media (max-height:680px){
  .am-sheet { max-height:calc(100dvh - 12px); border-radius:16px 16px 0 0; }
  .am-head { margin-bottom:14px; }
  .am-inp { height:46px; }
  .am-btn-login { height:48px; }
}
.rd-guest { margin:14px 16px 4px; padding:16px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(212,175,90,.16); }
.rd-guest-text { font-size:12px; line-height:1.5; color:rgba(255,255,255,.62); margin-bottom:12px; }
.rd-guest-auth { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rd-guest-btn { height:40px; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:rgba(255,255,255,.9); }
.rd-guest-btn.login { background:linear-gradient(180deg,#3B7CF4,#1A56DB); border-color:transparent; color:#fff; }
.rd-guest-btn.join { color:#D4AF5A; border-color:rgba(212,175,90,.34); }
@media (max-width:360px){
  .am-sheet { padding-left:16px; padding-right:16px; }
  .am-title { font-size:16px; }
  .am-inp { font-size:14px; }
}
@media (min-width:1200px){
  .drawer-overlay { display:none !important; }
  .left-drawer {
    grid-column:1; grid-row:2;
    position:sticky; top:calc(var(--desk-header-h) + 12px);
    transform:none !important;
    width:var(--rail-left-w); max-width:none; height:auto;
    max-height:calc(100dvh - var(--desk-header-h) - 24px);
    z-index:1; border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 30px rgba(0,0,0,.35); backdrop-filter:blur(8px);
  }
  .left-drawer .ld-close { display:none; }
  .left-drawer, .right-drawer {
    background:linear-gradient(180deg,rgba(16,17,20,.92) 0%,rgba(10,11,13,.90) 100%);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
  }
}
@media (min-width:1440px){
  .my-overlay { display:none !important; }
  .right-drawer {
    grid-column:3; grid-row:2;
    position:sticky; top:calc(var(--desk-header-h) + 12px);
    transform:none !important;
    width:var(--rail-right-w); max-width:none; height:auto;
    max-height:calc(100dvh - var(--desk-header-h) - 24px);
    z-index:1; border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 30px rgba(0,0,0,.35); backdrop-filter:blur(8px);
  }
  .right-drawer .rd-close { display:none; }
  .left-drawer, .right-drawer {
    background:linear-gradient(180deg,rgba(16,17,20,.92) 0%,rgba(10,11,13,.90) 100%);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
  }
}
@media (min-width:768px){
  .am-sheet {
    position:absolute;
    top:50%; left:50%; bottom:auto;
    transform:translate(-50%,-48%);
    width:min(460px, calc(100vw - 48px)); max-width:460px;
    max-height:min(88dvh, 720px);
    border-radius:18px;
    border:1px solid rgba(255,255,255,.09);
    padding:0 24px 24px;
    opacity:0;
    transition:opacity .22s ease, transform .22s cubic-bezier(.32,.72,0,1);
  }
  .am-sheet .am-handle { display:none; }
  .am-head { margin-top:20px; }
  .am-sheet { overflow-y:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width:320px){
  .ss-qa-row { grid-template-columns:repeat(3,1fr) !important; }
  .left-drawer { width:min(300px, 92vw); max-width:92vw; }
  .right-drawer { width:min(300px, 92vw); max-width:92vw; }
}
@media (max-height:740px){
  .am-sheet { max-height:calc(100dvh - 16px); }
}
@media (min-width:768px) and (max-height:740px){
  .am-sheet { top:8px; transform:translate(-50%,0); max-height:calc(100dvh - 16px); }
}
@media (prefers-reduced-motion:reduce){
  .left-drawer, .right-drawer { transition:none !important; }
}
@media (min-width:1200px){
  body.is-guest .left-drawer  .ld-user.auth-guest-only, body.is-guest .right-drawer .rd-guest.auth-guest-only {
    display:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }
}
@media (min-width:1440px){
  body.is-guest .right-drawer .rd-section--services {
    padding-top:12px;
    padding-right:16px;
    padding-bottom:16px;
    padding-left:16px;
  }
}