/* [공통 셸] App Shell 구조 — Header·App·Bottom Navigation·자산카드·헤더 아이콘·Auth 유틸(+반응형) */
.app {
  width:100%;max-width:430px;
  min-height:100dvh;
  margin:0 auto;
  background:#0A0A0A;
  overflow-x:clip;
  position:relative;
}
.app::before {
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:999;
  /* soft vignette — 가장자리 미세 어둠 */
  background:radial-gradient(ellipse at 50% 0%,
    transparent 60%,
    rgba(0,0,0,.18) 100%
  );
}
.app::after {
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:998;
  /* fine grain texture (CSS SVG noise) */
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.hdr {
  position:sticky;top:0;z-index:600;
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:var(--hdr-pad-top) var(--hdr-pad-x) var(--hdr-pad-bot);  /* was 9px 14px 6px */
  display:flex;flex-direction:column;
}
.hdr-row1 {
  min-height:44px;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding-top:2px;
}
.hdr-l {display:flex;align-items:center;gap:12px;padding-top:6px}
.asset-card {
  flex:1;
  min-width:0;
  display:flex;align-items:center;gap:5px;
  height:26px;padding:0 8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(212,175,90,.18);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.asset-card:active {
  background:rgba(212,175,90,.08);
  border-color:rgba(212,175,90,.34);
}
.asset-ico {
  width:14px;height:14px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.asset-ico svg {
  width:14px;height:14px;
  stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.asset-body {display:flex;flex-direction:column;gap:0}
.asset-lbl {
  font-size:8px;font-weight:600;
  color:rgba(255,255,255,.40);
  letter-spacing:.04em;line-height:1.1;
}
.asset-val {
  font-size:12px;font-weight:700;
  color:rgba(255,255,255,.88);
  letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hbg {
  display:flex;flex-direction:column;gap:5px;
  padding:5px 3px;cursor:pointer;
}
.hbg span {
  display:block;height:1.5px;
  background:rgba(255,255,255,.48);border-radius:1px;
}
.hbg span:nth-child(1) {width:20px}
.hbg span:nth-child(2) {width:13px}
.logo {display:flex;flex-direction:column;gap:0;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;appearance:none;-webkit-appearance:none;flex-shrink:0}
.logo:focus-visible {outline:1.5px solid rgba(212,175,90,.7);outline-offset:3px;border-radius:4px}
.logo-name {
  font-size:19px;font-weight:800;
  color:#D4AF5A;letter-spacing:.07em;line-height:1;
}
.logo-crown {font-size:10px;margin-right:1px;vertical-align:super}
.logo-sub {
  font-size:8px;font-weight:600;
  color:#7A6228;letter-spacing:.24em;
  text-transform:uppercase;margin-top:2px;
}
.hdr-r {
  display:flex;flex-direction:column;
  align-items:flex-end;   /* 두 행 모두 우측 정렬 */
  gap:8px;                /* 아이콘 행 ↔ 카드 행 간격 */
}
/* Badge 가 아이콘 밖으로 나가므로 이 계열에는 overflow:hidden 을 두지 않는다. */
.hdr-icons {
  overflow:visible;
  display:flex;align-items:center;
  gap:8px;   /* 2→8px: relaxed icon rhythm */
}
/* Header 아이콘 — 로그인 상태의 활성 버튼이다.
   비활성처럼 보이지 않도록 기본 명도를 Warm Gray 로 올린다.
   opacity / cursor:not-allowed / pointer-events:none 을 쓰지 않는다. */
.hico {
  position:relative;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(246,241,232,.78);
  border-radius:8px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .14s ease, color .14s ease;
}
.hico:active {
  background:rgba(255,255,255,.10);
  color:#fff;
}
.hico:focus-visible {
  outline:2px solid rgba(212,175,90,.85);   /* Header 는 Champagne Gold Focus Ring */
  outline-offset:2px;
}
.hico svg {
  width:22px;height:22px;
  stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
@media (hover:hover) and (pointer:fine){
  .hico:hover { background:rgba(255,255,255,.08); color:#fff; }
}

/* ── Header Badge ──
   아이콘 우측 상단 Compact Pill. 1 이상일 때만 표시(0 은 State 가 숨긴다).
   클릭·키보드 조작을 가로채지 않도록 pointer-events 를 끈다.
   Header 높이에 영향을 주지 않도록 absolute 로 띄운다. */
.hbadge {
  position:absolute;
  top:2px;
  left:calc(100% - 14px);
  min-width:16px;
  height:16px;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:9.5px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 0 0 1.5px #0A0A0A;           /* Header 배경과 분리 */
}
.hb-blue {                                   /* 선물함 — 쿠폰 */
  background:#1A56DB;
  color:#fff;
}
.hb-gold {                                   /* 쪽지함 — 읽지 않은 쪽지 */
  background:#D4AF5A;
  color:#101722;
}
body.is-guest .auth-user-only { display:none !important }
body.is-user  .auth-guest-only { display:none !important }
.hdr-guest {
  display:flex;align-items:center;gap:6px;
}
.btn-hdr-login {
  height:30px;padding:0 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,.72);
  transition:background .14s,border-color .14s,color .14s;
  -webkit-tap-highlight-color:transparent;
}
.btn-hdr-login:active {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.30);
  color:rgba(255,255,255,.90);
}
.btn-hdr-join {
  height:30px;padding:0 12px;
  background:linear-gradient(135deg,#D4AF5A 0%,#C4A040 100%);
  border-radius:8px;
  font-size:12px;font-weight:700;
  color:#000;
  box-shadow:0 2px 8px rgba(212,175,90,.28);
  transition:opacity .14s;
  -webkit-tap-highlight-color:transparent;
}
.btn-hdr-join:active {opacity:.84}
.hdr-row2 {
  width:180px;
  display:flex;align-items:center;
  gap:4px;
}
.fnav {
  background:rgba(10,10,10,.985);           /* T017-2: .97 → .985 */
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.10);  /* T017-2: .05 → .10 (경계 명확화) */
  display:flex;align-items:flex-start;
  padding-top:8px;
  transition:
    background .24s ease,
    border-color .24s ease,
    opacity .24s ease,
    transform .28s cubic-bezier(.32,.72,0,1);
}
.fnav.fnav-float {
  background:rgba(10,10,10,.72);              /* T017-2: .42 → .72 */
  border-top:1px solid rgba(255,255,255,.08); /* T017-2: .035 → .08 */
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  opacity:.94;                                /* T017-2: .82 → .94 */
}
.fnav.fnav-solid {
  background:rgba(10,10,10,.985);             /* T017-2 */
  border-top:1px solid rgba(255,255,255,.10); /* T017-2 */
  opacity:1;
}
.fnav.fnav-hidden {
  transform:translateX(-50%) translateY(calc(100% + env(safe-area-inset-bottom)));
  opacity:0;
  pointer-events:none;
  transition:
    transform .35s ease,
    opacity .35s ease,
    background .24s ease,
    border-color .24s ease;
}
.tab {
  flex:1;display:flex;flex-direction:column;
  align-items:center;gap:4px;
  cursor:pointer;padding-top:1px;
  transition:opacity .1s;
}
.tab:active {opacity:.65}
.t-ico {
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
}
.t-ico svg {
  width:22px;height:22px;
  stroke:rgba(255,255,255,.34);stroke-width:2;  /* T017-2: .20 → .34 (inactive 시인성) */
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .15s;
}
.t-lbl {
  font-size:10px;font-weight:500;
  color:rgba(255,255,255,.34);                 /* T017-2: .20 → .34 */
  transition:color .14s;
}
.tab.on .t-ico svg {stroke:#F2E3A0;stroke-width:2.15}
.tab.on .t-lbl {color:#F2E3A0;font-weight:700}
.floor {
  height:calc(var(--ess83-nav-h,52px) + 20px);
  display:block;
  background:#0c0c0c;
}
#auth-modal {
  position:fixed;inset:0;z-index:9000;pointer-events:none;
}
#auth-modal.show {pointer-events:auto}
#auth-modal.show .am-backdrop {opacity:1}
#auth-modal.show .am-sheet {transform:translate(-50%,0)}
.hdr-r, .hdr-icons, .hdr-row2, .asset-card { min-width:0; }
.app-main { display:block; min-width:0; }
@media (max-width:430px){
  .hdr-row1 { gap:8px; }
  .hdr-l { flex-shrink:0; }
  .hdr-r { min-width:0; }
  .hdr-row2 { width:min(180px,48vw); }
  .asset-card { min-width:0; }
  .asset-val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:360px){
  .hdr { padding-left:10px; padding-right:10px; }
  .hdr-l { gap:8px; }
  .logo-name { font-size:17px; }
  .hdr-icons { gap:3px; }
  .hico { width:34px; height:34px; }
  .hico svg { width:20px; height:20px; }
  .hdr-row2 { width:min(164px,48vw); }
  .asset-card { padding:0 5px; }
  .asset-lbl { font-size:7px; }
  .asset-val { font-size:10px; }
  .fnav { height:64px; padding-top:7px; }
  .t-ico { width:22px; height:22px; }
  .t-ico svg { width:20px; height:20px; }
  .t-lbl { font-size:8px; white-space:nowrap; }
  .tab { min-width:0; gap:3px; }
}
@media (min-width:768px){
  .app { max-width:min(960px,100%); }
  .app-main { display:flex; flex-direction:column; min-width:0; }
}
@media (min-width:1024px){
  .app { max-width:min(1000px,100%); }
}
@media (min-width:1200px){
  .app {
    max-width:var(--content-max); width:100%;
    display:grid;
    grid-template-columns:var(--rail-left-w) minmax(680px,1fr);
    grid-template-rows:auto auto;
    column-gap:28px; row-gap:0;
    padding:0 var(--page-pad-desktop) 48px;
    align-items:start;
  }
  .hdr {
    grid-column:1 / -1; grid-row:1;
    position:sticky; top:0; z-index:600;
    flex-direction:row; align-items:center; gap:24px;
    height:var(--desk-header-h); padding:0 4px; margin-bottom:20px;
  }
  .hdr-row1 {
    min-height:0; padding-top:0;
    width:100%; flex:1 1 auto; min-width:0;
    display:flex; align-items:center; justify-content:space-between;
  }
  .hdr-l { padding-top:0; flex:0 0 auto; }
  .hdr-r { flex:0 1 auto; min-width:0; margin-left:auto; flex-direction:row; align-items:center; gap:12px; }
  .hdr-r .auth-user-only {
    display:flex; flex-direction:row; align-items:center; gap:14px;
  }
  .hdr-r .auth-user-only .hdr-row2 {
    order:0; width:auto; display:flex; flex-direction:row; gap:8px; margin:0;
  }
  .hdr-r .auth-user-only .hdr-row2 .asset-card { height:40px; }
  .hdr-r .auth-user-only .hdr-icons { order:1; gap:6px; align-items:center; }
  .hdr-r .auth-user-only .hico { height:40px; }
  .hdr-r .auth-guest-only.hdr-guest { padding-top:0 !important; }
  .hbg { display:none !important; }
  .app-main {
    grid-column:2; grid-row:2;
    display:flex; flex-direction:column; gap:var(--section-gap);
    min-width:0;
  }
  .hdr { border-bottom:1px solid rgba(255,255,255,.09); }
  .hdr-r .auth-user-only { gap:0; }
  .hdr-r .auth-user-only .hdr-icons { gap:10px; }
}
@media (min-width:1440px){
  .app {
    grid-template-columns:var(--rail-left-w) minmax(680px,1fr) var(--rail-right-w);
    column-gap:24px;
  }
}
@media (min-width:2560px){
  .app { max-width:1560px; }
}
@media (hover:hover) and (pointer:fine) and (min-width:1200px){
  .hico { transition:background .16s ease, color .16s ease; }
  .hico:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.78); }
}
@media (min-width:768px){
  #auth-modal.show .am-sheet { transform:translate(-50%,-50%); opacity:1; }
}
@media (max-width:320px){
  .hdr { padding-left:8px; padding-right:8px; }
  .hdr-l { gap:6px; }
  .logo-name { font-size:16px; }
  .hdr-icons { gap:2px; }
  .hico { width:32px; height:32px; }
  .hico svg { width:19px; height:19px; }
  .hdr-row2 { width:min(150px,46vw); }
  .asset-card { padding:0 4px; }
  .asset-lbl { font-size:6.5px; }
  .asset-val { font-size:9.5px; }
  .hdr-guest .btn-hdr-login, .hdr-guest .btn-hdr-join {
    padding-left:8px; padding-right:8px; font-size:11px; white-space:nowrap;
  }
}
@media (min-width:340px) and (max-width:360px){
  .hdr { padding-left:10px; padding-right:10px; }
  .logo-name { font-size:18px; }
  .hdr-l { gap:8px; }
  .hdr-guest { gap:6px; }
  .btn-hdr-login, .btn-hdr-join { height:30px; padding-left:10px; padding-right:10px; font-size:11px; white-space:nowrap; }
  .fnav { height:68px; padding-top:8px; }
  .t-ico { width:23px; height:23px; }
  .t-ico svg { width:21px; height:21px; }
  .t-lbl { font-size:9px; }
}
@media (min-width:768px) and (max-height:740px){
  #auth-modal.show .am-sheet { transform:translate(-50%,0); }
}
@media (max-width:767px){
  .fnav {
    position:fixed;
    left:50%;
    right:auto;
    bottom:0;
    width:100%;
    max-width:430px;
    transform:translateX(-50%);
    z-index:700;
  }
  .fnav.fnav-solid {
    bottom:0;
    width:100%;
    max-width:430px;
    border-radius:0;
    transform:translateX(-50%);
    padding-bottom:var(--ess83-nav-bottom-pad);
  }
  .fnav.fnav-float {
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    width:calc(100% - 24px);
    max-width:406px;
    border-radius:14px;
    transform:translateX(-50%);
    box-shadow:0 10px 28px rgba(0,0,0,.34);
  }
  .fnav.fnav-hidden {
    transform:translateX(-50%) translateY(calc(100% + 24px + env(safe-area-inset-bottom,0px)));
  }
}
@media (min-width:768px) and (max-width:1199px){
  .fnav {
    position:fixed;
    display:flex;
    left:50%;
    right:auto;
    bottom:0;                                 /* 화면 최하단 밀착 */
    width:100%;
    max-width:none;
    height:calc(64px + var(--ess83-nav-bottom-pad));   /* [Nav 역승계] 라벨이 제스처영역에 붙지 않도록 */
    padding:7px 12px 0;
    padding-bottom:var(--ess83-nav-bottom-pad);
    box-sizing:border-box;
    transform:translateX(-50%);
    z-index:700;
    border:0;
    border-top:1px solid rgba(255,255,255,.10);
    border-radius:0;                          /* Floating Dock 해제 */
    background:rgba(10,10,10,.985);           /* Solid Dark */
    box-shadow:none;                          /* Floating Shadow 제거 */
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    opacity:1;
  }
  .fnav.fnav-float, .fnav.fnav-hidden, .fnav.fnav-solid {
    transform:translateX(-50%);
    opacity:1;
    pointer-events:auto;
    background:rgba(10,10,10,.985);
    border-top:1px solid rgba(255,255,255,.10);
  }
  .floor { display:block; background:transparent;
    height:calc(var(--ess83-nav-h,64px) + 20px); }
}
@media (min-width:1200px){
  .fnav {
    display:flex;
    position:fixed;
    /* JS가 .app-main 실측값을 주입 — 실패 시 화면 중앙으로 안전 Fallback */
    left:var(--dock-left, 50%);
    right:auto;
    transform:translateX(-50%);
    width:var(--dock-width, 100%);
    max-width:836px;
    height:56px;
    bottom:16px;
    padding:5px 12px 0;
    border:1px solid rgba(255,255,255,.08);
    border-top:1px solid rgba(255,255,255,.08);
    border-radius:14px;                       /* DS: --r-xl */
    background:rgba(17,17,17,.96);            /* 불투명 Dark Surface */
    box-shadow:0 10px 30px rgba(0,0,0,.38);   /* 낮은 Shadow */
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    opacity:1;
  }
  .fnav.fnav-float, .fnav.fnav-hidden, .fnav.fnav-solid {
    left:var(--dock-left, 50%);
    right:auto;
    transform:translateX(-50%);
    width:var(--dock-width, 100%);
    max-width:836px;
    height:56px;
    bottom:16px;
    border-radius:14px;
    opacity:1;
    pointer-events:auto;
    background:rgba(17,17,17,.96);
    box-shadow:0 10px 30px rgba(0,0,0,.38);
    border:1px solid rgba(255,255,255,.08);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .tab { height:48px; gap:3px; padding-top:0; justify-content:center; }
  .t-ico { width:20px; height:20px; }
  .t-ico svg { width:19px; height:19px; }
  .t-lbl { font-size:9px; white-space:nowrap; }
  .floor { display:block; height:96px; background:transparent; }
}
.hdr-guest {/* [인라인 이동] home.html style=padding-top:6px */ padding-top:6px;}

/* ════════════════════════════════════
   SIGNUP MODAL (추천인 코드) — #auth-modal ID 별칭
   ------------------------------------------------------------
   · 신규 시각 규칙 0건. Backdrop / Sheet / Head / Input / CTA 는
     LOGIN MODAL 의 .am-* 규칙을 그대로 상속한다.
   · #auth-modal ID 에 묶여 있어 상속되지 않는 "표시 · 전환" 규칙만
     #signup-modal 에 동일 적용한다.
   · 배치 — LOGIN MODAL CSS 블록 뒤. 같은 파일 안에서 이 순서를 유지할 것
     (Base → 768 → 768+max-height 순서가 뒤집히면 Desktop 중앙정렬이 깨진다).
   · 특이성 (1,2,0) 이므로 Responsive 파일의 .am-sheet (0,1,0) 규칙보다
     항상 우선한다. 파일 로드 순서와 무관.
════════════════════════════════════ */
#signup-modal{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
}
#signup-modal.show{pointer-events:auto}
#signup-modal.show .am-backdrop{opacity:1}
#signup-modal.show .am-sheet{transform:translate(-50%,0)}

/* Desktop · Tablet — 중앙 Dialog (LOGIN MODAL Task3 과 동일) */
@media (min-width:768px){
  #signup-modal.show .am-sheet{ transform:translate(-50%,-50%); opacity:1; }
}

/* 낮은 높이 — 상단 고정 (LOGIN MODAL Task7 과 동일) */
@media (min-width:768px) and (max-height:740px){
  #signup-modal.show .am-sheet{ transform:translate(-50%,0); }
}

/* 세로 리듬 보정 — 신규 값이 아니라 기존 스케일(16/20/24) 재사용.
   .am-inp-wrap 의 10px 는 "입력창 사이" 간격이라 CTA 직전 간격으로는 좁다.
   .am-btn-login 의 12px 는 뒤따르는 구분선/회원가입/카카오가 있을 때의 값이므로
   이 레이어에서는 0 으로 두어 Sheet 하단 패딩(24px)만 남긴다. */
#signup-modal .am-inp-wrap{ margin-bottom:16px; }
#signup-modal .am-btn-login{ margin-bottom:0; }

/* ════════════════════════════════════
   AUTH PRIMARY CTA — Groove Champagne Gold
   ------------------------------------------------------------
   적용 범위: 로그인 모달의 [로그인] · 추천인 코드 레이어의 [확인] 단 2개.
   회원가입 보조 버튼(.am-btn-join) · 카카오톡 상담(.am-kakao) 은 대상 아님.
   ------------------------------------------------------------
   Palette  base #D4AF5A / light #E2C36F / dark #B98D36
   · 기본 배경은 #D4AF5A 를 중심으로 위→아래 미세 하강(#DDBC6A → #C59C48).
     밝은 영역 #E2C36F 는 hover, 어두운 영역 #B98D36 은 border·active 에 배정한다.
   · 채도 높은 단색 노랑과 넓은 Glow 를 제거하고,
     위 → 아래로 밝기가 낮아지는 절제된 세로 Gradient 로 대체한다.
   · Border 는 배경보다 한 단계 어두운 Gold. Shadow 는 짧고 낮은 불투명도.
   · Text 는 Deep Navy(#101722). Gradient 전 구간에서 대비 4.5:1 이상.
   · 특이성 (1,1,0) 이므로 .am-btn-login (0,1,0) 원본 선언을 파일 순서와
     무관하게 덮는다. height / border-radius 는 선언하지 않아
     인증 모달 공통 규격과 낮은 높이 분기를 그대로 승계한다.
════════════════════════════════════ */
#auth-modal .am-btn-login,
#signup-modal .am-btn-login{
  box-sizing:border-box;
  background:linear-gradient(180deg,#DDBC6A 0%,#D4AF5A 46%,#C59C48 100%);
  border:1px solid #B98D36;
  box-shadow:0 2px 6px rgba(120,88,26,.26);
  color:#101722;
  font-weight:600;
  opacity:1;
  transition:background .16s ease, border-color .16s ease,
             box-shadow .16s ease, transform .12s ease;
  display:flex;align-items:center;justify-content:center;gap:6px;
  line-height:1;
}

/* 아이콘 — 글자와 동일 색, 광학 중심 정렬 */
#auth-modal .am-btn-login svg,
#signup-modal .am-btn-login svg{
  width:16px;height:16px;flex:0 0 auto;
  stroke:currentColor;stroke-width:2.25;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  display:block;
}

/* hover — 밝기·명암 소폭만 상승 (Touch 기기 sticky hover 제외) */
@media (hover:hover) and (pointer:fine){
  #auth-modal .am-btn-login:hover,
  #signup-modal .am-btn-login:hover{
    background:linear-gradient(180deg,#E2C36F 0%,#DAB863 46%,#CBA351 100%);
    border-color:#C29A48;
    box-shadow:0 3px 8px rgba(120,88,26,.30);
  }
}

/* active — 밝기를 낮추고 1px 눌림감 */
#auth-modal .am-btn-login:active,
#signup-modal .am-btn-login:active{
  background:linear-gradient(180deg,#C29A48 0%,#B98D36 100%);
  border-color:#A57D2F;
  box-shadow:0 1px 3px rgba(120,88,26,.24);
  transform:translateY(1px);
  opacity:1;
}

/* focus-visible — 얇은 Champagne Gold 포커스 링 */
#auth-modal .am-btn-login:focus-visible,
#signup-modal .am-btn-login:focus-visible{
  outline:2px solid rgba(212,175,90,.72);
  outline-offset:2px;
}

/* disabled — 채도·명도를 낮추되 텍스트 대비 유지 */
#auth-modal .am-btn-login:disabled,
#signup-modal .am-btn-login:disabled,
#auth-modal .am-btn-login[aria-disabled="true"],
#signup-modal .am-btn-login[aria-disabled="true"]{
  background:linear-gradient(180deg,#9C8A5E 0%,#8D7F5A 100%);
  border-color:#6F6039;
  box-shadow:none;
  color:#101722;
  transform:none;
  cursor:not-allowed;
}