/* 간편 로그인 화면 — 15단계
   🔴 tokens.css 변수만 쓴다. **딱 하나 예외가 소셜 버튼 색이다** — 아래 설명.

   ══ 🔴 소셜 버튼 색을 우리 마음대로 못 바꾸는 이유 ══
   세 제공자 모두 버튼 색을 **규정으로 못 박아** 놓았다.
     카카오  "위의 색상 규정에 벗어난 색상을 적용해서는 안 됩니다"  #FEE500 / 글자 검정 85%
     구글    Light 채움 #FFFFFF · 테두리 #747775 · G 로고는 원색 그대로
     네이버  NAVER GREEN #03C75A · 흰 글자
   색을 바꾸면 심사에서 반려될 수 있다. 그래서 **규정값을 그대로 쓴다.**

   ══ 🔴 그 결과 생기는 대비 미달 — 숨기지 않고 적어 둔다 ══
     카카오  #FEE500 위 #262200(검정 85%)   12.52:1  ✅ AAA
     구글    #FFFFFF 위 #1F1F1F             16.48:1  ✅ AAA · 테두리 4.53:1 ✅
     네이버  #03C75A 위 #FFFFFF              2.25:1  🔴 **AA(4.5)는커녕 큰글씨 AA(3)도 미달**
   히어로 버튼 때와 같은 처리다 — ops/check-contrast.sh 의 승인 예외 목록에 넣되
   **숫자는 매번 찍는다.** 조용히 넘어가지 않는다.
   ⚠ 네이버에 더 진한/흰색 변형이 공식으로 있는지는 **확인 못 했다**
     (developers.naver.com 접속이 막혀 원문을 못 읽음). 사장님이 검수 때 공식 AI 파일을
     받으시면 대비가 나은 변형이 있는지 보고 그때 바꾼다. */

/* 🔴 이 화면에는 하단 고정 바가 없다. shop.css 의 96px 여백은 빈 공간만 만든다.
   🔴 **반드시 .auth-page 로 한정한다.** 랜딩(home.css)도 이 파일을 불러 쓰는데,
      거기엔 하단 고정 핑크 바가 있어 70px 여백이 필요하다.
      한정을 빼면 랜딩 맨 아래 내용이 그 바에 가려진다. */
body.auth-page{padding-bottom:var(--s6)}

.auth{max-width:420px;margin:0 auto;padding:var(--s6) var(--s4) var(--s7)}
.auth h1{font-size:var(--t-sec);line-height:var(--t-sec-lh);letter-spacing:var(--ls-head);
  color:var(--c-text-strong);margin:0 0 var(--s2)}
.auth .lead{color:var(--c-text-sub);margin:0 0 var(--s6)}

/* 상단바의 닫기(×) — 로고 오른쪽 끝 */
.gnb .x{margin-left:auto;min-height:var(--tap);min-width:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--c-text);font-size:26px;line-height:1;
  cursor:pointer;border-radius:var(--r-md);
  transition:background var(--m-base) var(--m-ease),transform var(--m-fast) var(--m-ease)}
.gnb .x:hover{background:var(--c-surface-alt);transform:translateY(-1px)}
.gnb .x:active{transform:scale(var(--m-press))}

/* ── 소셜 버튼 — 아이콘 한 줄 ──────────────────────────────────
   🔴 owner 지시(2026-08-04): 「간단하게 카카오·네이버·구글 아이콘으로 · 깔끔하게」
      그전에는 가로로 꽉 찬 글자 버튼이 세로로 셋 쌓여 있었다.
   🔴 **색과 심볼은 그대로다.** 형태만 아이콘형으로 바꿨다 (위 색 규정 주석 참고).
   🔴 세 개가 **같은 크기**여야 한다. 구글 규정: "다른 로그인 수단과
      최소한 같은 정도로 눈에 띄게" — 하나만 작게 만들면 위반이다.

   🔴 `.social-list` 는 지우지 않는다 — /my/ 가 저희 버튼 두 개를 세로로 쌓는 데 쓴다.
      소셜 아이콘 줄은 `.social-row` 다. */
.social-list{display:flex;flex-direction:column;gap:var(--tap-gap);margin:0 0 var(--s5)}

/* 🔴 `flex-wrap` 이 있어야 한다. 글씨를 키우신 분(200%)에게는 이름표가 타일보다 넓어져
   한 줄에 셋이 안 들어간다. 그때 넘치는 대신 **접힌다** — 가로 스크롤이 생기면
   폰에서 화면 밖으로 밀려나 아예 못 누르게 된다. */
.social-row{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s5);margin:0 0 var(--s5)}
.social-cell{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  min-width:64px}

/* 누르는 자리 = 타일. 64px 은 owner 가 정한 편한 크기(48px)보다 넉넉하다.
   🔴 `height` 가 아니라 `min-height` 다. 높이를 못으로 박으면 「구글만 작게 만들면」
      같은 변이 시험(ops/audit-login-mut.sh ⑥)이 아무 일도 안 일으켜, 검사가
      고장난 것을 못 잡는다. */
.social{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:64px;min-height:64px;
  border:1px solid transparent;border-radius:18px;
  text-decoration:none;cursor:pointer;
  transition:filter var(--m-base) var(--m-ease),transform var(--m-fast) var(--m-ease)}
/* 🔴 색을 안 바꾸고 반응을 만든다 — brightness 는 브랜드 색조를 유지한다.
   그리고 **색만** 바꾸지 않는다 (WCAG 1.4.1): 살짝 떠오르는 움직임을 함께 준다. */
.social:hover{filter:brightness(.94);transform:translateY(-2px)}
.social:active{transform:scale(var(--m-press))}
.social:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px}

/* 🔴 제공자 규정 문구를 **지우지 않고 눈에서만 치운다.**
   `display:none` 이면 읽어 주는 기계에서도 사라져 버튼 이름이 없는 버튼이 된다.
   잘라내기(clip)로 감추면 눈에는 안 보이고 이름은 남는다. */
.social .t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* 타일 밑 이름표 — 아이콘만 보고 못 알아보시는 분을 위해. 장식이라 누르는 자리가 아니다. */
.social-cell .cap{color:var(--c-text-sub);font-size:var(--t-cap);line-height:1.25;
  font-weight:600;text-align:center;overflow-wrap:anywhere}

/* 🔴 심볼 크기는 제공자마다 다르게 준다. 네이버 N 은 네모를 **꽉 채우는** 글자라
   카카오·구글과 같은 px 로 두면 혼자 커 보인다. 눈에 같은 크기로 맞춘다. */
.social svg{flex:0 0 auto}
.social--kakao  svg{width:30px;height:30px}
.social--naver  svg{width:23px;height:23px}
.social--google svg{width:28px;height:28px}

.social--kakao {background:#FEE500;color:#262200}              /* 12.52:1 */
.social--naver {background:#03C75A;color:#FFFFFF}              /*  2.25:1 🔴 승인 예외 */
.social--google{background:#FFFFFF;color:#1F1F1F;border-color:#747775}  /* 16.48:1 */

/* ── 「내 정보」의 연결 표시 — 2026-08-04 owner 지시 「연결된 건 아이콘으로 표기」 ──
   🔴 **색과 심볼은 한 획도 안 바꾼다.** 위 규정 그대로 쓰고 **크기만** 줄인다
      (제공자 규정은 최소 크기를 정할 뿐 축소를 막지 않는다. 색을 바꾸면 심사 반려다).
   🔴 이건 **표시**지 단추가 아니다. 그래서 hover 로 떠오르지도, 초점이 잡히지도 않는다 —
      `<span aria-hidden>` 으로 그리고 이름은 옆의 글자가 갖는다. 아이콘만 두면
      읽어 주는 기계에는 아무 말도 안 들린다. */
.social--sm{width:32px;min-height:32px;border-radius:10px;pointer-events:none}
.social--sm.social--kakao  svg{width:18px;height:18px}
.social--sm.social--naver  svg{width:14px;height:14px}
.social--sm.social--google svg{width:17px;height:17px}

/* ── 공용 팝업 안의 내용 (ui-modal.js) ────────────────────
   🔴 로그인 팝업과 **같은 껍데기(.lg-back/.lg-box)** 를 쓴다. 두 팝업이 다르게 생기면
      손님은 다른 기능인 줄 안다.
   🔴 폼이 길어 상자를 넘칠 수 있다. 상자는 이미 max-height 가 있으니 **안쪽만** 굴린다 —
      상자째 굴리면 닫기(✕)가 같이 올라가 사라진다. */
/* 🔴🔴 여기가 이 팝업에서 제일 잘 깨지는 자리다 (2026-08-04 실측으로 잡음).
   처음에는 안쪽에 `overflow-y:auto` 만 주었는데, **높이 제한이 없으니 굴러가지 않았다.**
   그 결과 폰 390×844 에서 「저장」 단추가 화면 밖(y=947)에 나가 **아예 못 눌렀다.**
   → 상자를 세로 flex 로 만들고, 제목·✕ 는 고정, **안쪽만** 굴린다.
   🔴 `min-height:0` 이 없으면 flex 자식이 안 줄어들어 또 안 굴러간다. 지우지 말 것.
   🔴 상자 자신의 overflow 는 hidden 이다 — 둘 다 굴러가면 ✕ 가 같이 올라가 사라진다. */
/* 🔴 owner 지시(2026-08-04) — 「백그라운드에 이런 식으로 그라데이션 주면 좋겠다」
   (도움말 창을 가리키심). **그 창이 쓰는 그라데이션을 그대로** 가져온다 —
   여기서 새 색을 지어내면 두 창이 갈라진다. 원본은 help.css 의 .help-panel 이다:
     위 30% 브랜드 핑크 → 58% 지점에서 바탕색 → 아래는 바탕색
   🔴 값을 고칠 일이 생기면 **두 곳을 함께** 고쳐야 한다.
   🔴🔴 2026-08-05 정정 — 여기에 「로그인 팝업(.lg-box)에는 안 건다. 소셜 버튼 색과
      부딪힌다」고 적혀 있었다. 사장님이 로그인 팝업에도 넣으라고 하셔서 **넣었다**(위쪽 참고).
      부딪힘 걱정은 색을 포기하는 대신 **구조로** 풀었다 — 버튼을 흰 카드(.lg-card) 위에
      올려 핑크에 닿지 않게 했다. 버튼 색은 한 픽셀도 안 건드렸다.
      두 팝업은 머리글 줄 수가 달라 **px 값이 다르다** (여기 64px · 로그인 팝업 118px). */
.lg-box.ui-modal{display:flex;flex-direction:column;overflow:hidden;
  /* 🔴 owner 지시(2026-08-04) — 「그라데이션을 좀 더 작게」.
     🔴 %가 아니라 **px** 로 잡는다. %는 팝업이 길어질수록 핑크가 같이 길어져서,
        칸이 많은 창(주소 추가)에서는 화면 절반이 핑크가 된다. px 로 두면 창 길이와
        상관없이 **제목 줄만** 핑크로 남는다. */
  background:linear-gradient(180deg,
    var(--c-btn-point-bg) 0, var(--c-btn-point-bg) 64px,
    var(--c-bg) 150px, var(--c-bg) 100%)}
/* 🔴 위쪽이 핑크가 되었으니 **제목과 닫기(✕)는 흰 글자**여야 한다.
   먹색 그대로 두면 핑크 위 먹색이라 잘 안 읽힌다 (실측: 대비 2.4:1 — 기준 미달). */
.ui-modal .lg-h{color:#FFFFFF}
.ui-modal .lg-x{color:#FFFFFF}
/* 🔴🔴 내용은 **흰 카드 위**에 얹는다 (2026-08-04 실측으로 잡음).
   그라데이션만 깔았더니 위쪽 칸들의 글자가 **핑크 위 먹색**이 되어 잘 안 읽혔다.
   사장님이 가리키신 도움말 창도 **제목만 핑크, 내용은 흰 카드**다 — 그 구조가 맞다.
   🔴 글자 색을 흰색으로 바꾸는 방법은 못 쓴다. 아래로 갈수록 바탕이 흰색이 되므로
      같은 글자가 어디에 있느냐에 따라 안 보이게 된다. 카드로 나누는 것이 유일하게
      모든 위치에서 읽히는 방법이다. */
.ui-modal .ui-modal-body{background:var(--c-bg);border-radius:16px;
  padding-top:var(--s4);padding-bottom:var(--s4)}
/* ── 주문조회 팝업의 목록 (owner 지시 2026-08-24 「팝업 디자인 좀 정렬해줘」) ──
   🔴 날짜 머리글: 본문 글보다 작고 흐리게 — 머리글이 줄보다 크면 눈이 머리글에서
      멈춘다. 손님이 찾는 것은 날짜가 아니라 그 밑의 주문이다.
      첫 머리글만 위 여백을 접는다 — 카드 패딩과 겹쳐 이중 여백이 됐었다(실측). */
.ui-modal .odate{margin:var(--s5) 0 var(--s1);font-size:.85rem;font-weight:700;
  color:var(--c-text-sub);letter-spacing:.02em}
.ui-modal .odate:first-child{margin-top:0}
/* 🔴 금액은 오른쪽 제 칸 — 줄마다 같은 자리에 서야 훑어 내려가며 비교가 된다.
   nowrap: 「19,800원」이 좁은 폰에서 두 줄로 꺾이면 정렬이 무너진다. */
.ui-modal .my-list .oamt{margin-left:auto;font-weight:700;white-space:nowrap;
  color:var(--c-text-strong)}
.ui-modal .my-list .arw{margin-left:0}
/* 🔴 끝난 주문(취소·환불)은 **색과 취소선**으로 가라앉힌다 — 지우지는 않는다.
   기록은 손님 것이다. 흐림(opacity)은 못 쓴다: 보조줄 대비가 3.18:1 까지 떨어져
   (감사 실측) 기준 미달이었다. 여기 쓰는 색은 전부 이미 승인된 토큰이다. */
.ui-modal .my-list .odim b{color:var(--c-text-sub)}
.ui-modal .my-list .odim .oamt{color:var(--c-text-sub);font-weight:400;
  text-decoration:line-through}
/* 🔴 왼쪽 덩이가 길어도 금액을 밀어내지 않는다 — 단, 줄임표는 **줄마다 따로** 건다.
   덩이 전체에 nowrap 을 걸었더니 320px 폰에서 번호·선물이 통째로 잘렸다(감사 실측).
   .l1(상태·선물)·.l2(번호·요약)가 각자 제 줄에서 꼬리만 접는다. */
.ui-modal .my-list .grow{flex:1;min-width:0}
.ui-modal .my-list .grow .l1,.ui-modal .my-list .grow .l2{display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 🔴 hover 의 translateX(2px)가 커서 밑 줄의 금액만 밀어 오른칸 끝선을 깨뜨렸다
   (감사 실측 — owner 가 콕 집은 「정렬」이 목적이므로 이 목록에서는 끈다).
   🔴 이 규칙의 특이도가 사이트 공통 :active scale 까지 삼켰다 (감사 2회차 실측) —
      누름 피드백은 유지할 가치가 있어 아래에서 명시로 되살린다. scale 은 중심 기준이라
      누르는 그 순간 말고는 끝선을 안 움직인다. */
.ui-modal .my-list a:hover{transform:none}
.ui-modal .my-list a:active{transform:scale(var(--m-press))}
/* 🔴 제목과 ✕ 를 한 줄에 양쪽으로 세운다 (owner 지시 2026-08-04).
   🔴 `.lg-x` 는 원래 `position:absolute` 다(로그인 팝업용). 여기서는 흐름에 되돌려
      놓아야 양쪽 정렬이 먹는다 — 안 그러면 제목만 왼쪽으로 가고 ✕ 는 구석에 그대로 뜬다. */
/* 🔴 owner 지적(2026-08-04) — 「상단 간격이 너무 크다」.
   .lg-box 는 위 여백이 --s7 이다. 로그인 팝업은 ✕ 가 **구석에 절대좌표로** 떠 있어서
   제목이 그 아래로 내려가야 안 겹쳤다. 이 팝업은 제목과 ✕ 가 **한 줄**이라 그 자리가
   필요 없다 — 그만큼 위가 비어 보였다. 이 팝업만 줄인다(로그인 팝업은 그대로). */
/* 🔴🔴 2026-08-05 — 여기부터는 **두 팝업이 함께 쓰는** 규칙이다.
   사장님 지적: 「모든 로그인창 디자인이 통일 안 된 것 같다」. 감사 2회로 잰 결과
   두 팝업이 핑크 색까지 달랐다(실측 픽셀: 로그인 rgb(233,66,131) · 내 정보 rgb(229,21,102)).
   원인은 사장님이 두 창에 **서로 다른 지시**를 주셨고 각각 그대로 따랐기 때문이다.
   → 사장님이 「내 정보 팝업 쪽으로」 정하셨다. 그래서 선택자를 `.ui-modal` 이 아니라
     **`.lg-box`** 로 넓혀 로그인 팝업도 같은 옷을 입는다.
   🔴 다시 갈라뜨리지 말 것: 여기 값을 한쪽 팝업만 다르게 하고 싶어지면, 그건 두 창이
      또 달라진다는 뜻이다. 그때는 이 주석을 먼저 읽고 사장님께 여쭙는다. */
.lg-box .ui-modal-head{flex:0 0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.lg-box .ui-modal-head .lg-h{flex:1 1 auto;margin:0;text-align:left}
/* 🔴🔴 제목에 **검은 네모 테두리**가 그려지던 것을 없앤다 (2026-08-05 실측으로 잡음).
   두 팝업 다 창을 열면 초점을 제목으로 보낸다 — ✕ 로 보내면 「닫기가 눌린 것」처럼
   보이기 때문이다. 그런데 크롬은 그렇게 옮긴 초점에도 :focus-visible 을 켜서
   제목 둘레에 outline rgb(43,5,20) 2px 을 그렸다. 핑크 위 검은 네모라 눈에 확 띈다.
   🔴 지워도 안전한 이유: 이 제목은 tabindex="-1" 이라 **Tab 으로는 닿을 수 없다.**
      초점이 오는 길은 우리가 코드로 보내는 것 하나뿐이니, 키보드로 쓰는 분이
      「지금 어디 있는지」를 잃지 않는다. 읽어 주는 기계는 제목을 그대로 읽는다.
   🔴 단추·입력칸의 테두리는 **절대 이렇게 지우지 말 것.** 저기는 Tab 으로 닿는다.
   🔴 내가 이걸 오래 못 본 이유를 적어 둔다 — 확인할 때마다 ✕ 에 마우스를 먼저
      올렸는데, 그 순간 크롬이 focus-visible 을 꺼서 링이 사라진 화면만 봤다.
      → 앞으로 팝업을 확인할 때는 **아무것도 건드리지 않은 첫 화면**을 먼저 찍는다. */
.lg-box .lg-h:focus{outline:none}
.lg-box .ui-modal-head .lg-x{position:static;flex:0 0 auto;margin:0}
/* 🔴 owner 지시(2026-08-05): 「✕ 는 흰색으로 두고, 마우스 올리면 반투명 검정 30% 원」
   원래 규칙(.lg-x:hover)은 **커지기(scale 1.12)** 로만 표시했다. 흰 ✕ 가 핑크 위에
   있으면 커져도 티가 잘 안 난다 — 색이 안 바뀌기 때문이다. 원을 깔면 확실히 보인다.
   🔴 폰에서 :hover 가 눌린 채 남는 문제(터치 기기의 고질병)는 **여기서는 안 생긴다** —
      이 ✕ 는 누르는 순간 팝업이 통째로 사라져서 남을 요소 자체가 없다.
      그래서 `@media (hover:hover)` 로 감싸지 않는다. 감싸면 검사가 이 규칙을 **못 본다** —
      헤드리스 크롬은 (hover:hover) 를 false 로 답한다(2026-08-05 실측, CDP 로 흉내내도
      안 바뀜). 확인 못 하는 규칙을 화면에 두지 않는다.
   🔴 색은 rgba 로 직접 쓴다. 이 원은 핑크 위에만 앉으므로 밝기/어둡기 토큰이 없다.
   🔴 아래쪽 `.lg-x:hover`(커지기)보다 이 줄이 이긴다 — 클래스 셋(0,3,0) 대 둘(0,2,0)
      이라 **순서와 무관하게** 이긴다. 옮겨도 안전하다. */
.lg-box .lg-x:hover{background:rgba(0,0,0,.3);color:#FFFFFF;transform:none}
.lg-box .lg-x:focus-visible{background:rgba(0,0,0,.3)}
.lg-box .lg-x{transition:color var(--m-fast) var(--m-ease),
  background-color var(--m-fast) var(--m-ease),transform var(--m-fast) var(--m-ease)}
.ui-modal .ui-modal-body{flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* 🔴🔴 좌우 여백 6px 은 **장식이 아니다** (2026-08-04 owner 지적 「클릭하면 디자인이 이상해」).
     칸에 초점이 가면 3px 테두리가 2px 띄워져 그려지는데(shop.css focus-visible),
     이 상자가 굴러가는 상자라 **좌우가 잘려** 위아래 검은 막대 두 개로만 보였다.
     실측: 테두리 3 + 띄움 2 = 5px 이 필요하다. 6px 을 주고 그만큼 안쪽으로 당긴다 —
     칸 너비는 그대로 두면서 테두리만 들어갈 자리를 만든다.
     🔴 테두리를 없애면 안 된다. 키보드로 쓰는 분이 지금 어디에 있는지 잃는다. */
  padding-inline:6px;margin-inline:-6px}
.ui-modal-body .field:last-of-type{margin-bottom:var(--s3)}
/* 팝업 안에서는 칸 사이를 조금 좁힌다 — 한 화면에 더 들어와야 다 보인다 */
.ui-modal-body .field{margin-bottom:var(--s3)}
.ui-modal-body h3{font-size:var(--t-prod);margin:var(--s5) 0 var(--s2)}

/* 연결된 계정 한 줄 — 아이콘 · 이름 · (해제 단추 또는 안내) */
.linked{display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--c-border)}
.linked:first-of-type{border-top:0}
/* 🔴 하나뿐일 때의 「해제할 수 없어요」는 줄 안에서 **오른쪽 끝**으로 민다.
   왼쪽에 붙여 두면 이름과 한 덩어리로 읽혀 무엇에 대한 말인지 흐려진다. */
.linked .why{margin-left:auto;text-align:right}
/* 추가로 연결할 수 있는 것들 — 로그인 화면과 같은 타일을 그대로 쓴다.
   🔴 왼쪽 정렬이다. 로그인 화면은 가운데(고르는 자리)지만 여기는 목록에 딸린 줄이다. */
.link-more{justify-content:flex-start;gap:var(--s4);margin:var(--s3) 0 0}

@media (max-width:359px){
  /* 🔴 320px 폰 실측 자리 — 팝업 안 쓸 수 있는 폭은 240px 이다
     (화면 320 − 뒤배경 여백 16×2 − 상자 여백 24×2). 타일 셋이 192px 이니
     사이 간격을 24px 로 두면 240px 로 **딱 맞아** 여유가 0 이 된다. 12px 로 줄인다. */
  .social-row{gap:var(--s3)}
  /* 🔴 모바일 3회감사 — 「가입 없이 주문하기」만 그대로면 어긋나 보인다. 같이 줄인다. */
  .guest{font-size:var(--t-body);padding-left:var(--s4);padding-right:var(--s4)}
}

/* ── 「또는」 구분선 ──────────────────────────────────────────── */
.or{display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0;
  color:var(--c-text-sub);font-size:var(--t-cap)}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--c-border)}

/* ── 🔴 「가입 없이 주문하기」 — 원칙 1-1. 항상 있고, 눈에 띄어야 한다 ──
   작은 글씨 링크로 숨기지 않는다. 소셜 버튼과 같은 높이의 버튼으로 둔다.

   🔴 처음 만들었을 때 **구글 버튼과 거의 똑같이 보였다** (둘 다 흰 바탕 + 회색 테두리).
      찍어 놓고 보고서야 알았다. 로그인 수단이 네 개인 것처럼 읽힌다.
      → 테두리를 **먹색 2px** 로 바꿔 「우리 버튼」 임을 분명히 한다.
        (먹색 테두리 대비 17.29:1 — 구글 규정 회색 #747775 4.53:1 과 확실히 구분된다) */
.guest{width:100%;min-height:52px;font-size:var(--t-btn);font-weight:var(--t-btn-w);
  border-width:2px;border-color:var(--c-text)}
.guest:hover{background:var(--c-surface-alt);transform:translateY(-1px)}

.auth .terms{margin-top:var(--s5);color:var(--c-text-mute);font-size:var(--t-cap);
  line-height:var(--t-cap-lh)}
.auth .terms a{color:inherit}

/* 준비된 제공자가 하나도 없을 때 — 흰 화면 대신 사람 말로 알린다 */
.auth .notice{margin-bottom:var(--s5)}

/* ── 전화번호 확인 화면 ───────────────────────────────────────── */
.code-row{display:flex;gap:var(--s3);align-items:flex-start}
.code-row .field{flex:1;margin-bottom:0}
.code-row .btn{flex:0 0 auto;white-space:nowrap}
/* 🔴 16단계 실측: 나란히 놓았을 때 버튼이 입력 상자보다 **26.1px 떠 있었다.**
   버튼 윗변이 라벨(「휴대전화 번호」) 윗변에 맞춰져, 정작 입력 상자와는 어긋난 것이다.
   → 아랫변을 맞춘다. 그러면 입력칸과 버튼이 한 줄로 읽힌다. */
.code-row .btn{align-self:flex-end}
/* 🔴 글자 200% 에서는 두 칸이 나란히 못 들어간다. 세로로 접는다. */
@media (max-width:400px){
  .code-row{flex-direction:column}
  .code-row .btn{width:100%}
  /* 🔴 세로로 접었는데 입력칸만 **최대 324px** 에서 멈춰 버튼보다 최대 44px 좁았다
     (357~400px 구간. 390px 에서 34px, 400px 에서 44px). 폭을 꽉 채우게 한다. */
  .code-row .field{width:100%}
  .code-row .btn{align-self:stretch}
}
.timer{font-variant-numeric:tabular-nums;color:var(--c-text-sub);font-size:var(--t-cap)}

/* ── 내 정보 ─────────────────────────────────────────────────── */
/* 🔴 16단계 실측: /my/ 는 tokens·shop·login 세 장만 싣는데 `.menu-who` 규칙이
   **home.css 에만** 있었다. 그래서 손님 이름이 16px/400 으로 **스타일 없이** 그려지고
   바로 아래 안내문과 간격이 0px 이었다. 서랍(home.css)에서는 19px/700 로 나온다 —
   같은 이름이 화면마다 다르게 보였다.
   🔴 규칙 1-7: 한 곳을 고칠 때 **같은 부류를 전부 센다.** 이름을 두 곳에서 그리면
      스타일도 두 곳에 있어야 한다. */
.menu-who{display:block;margin:0 0 var(--s3);font-weight:700;
  font-size:var(--t-lg);line-height:var(--t-lg-lh);color:var(--c-text-strong);
  overflow-wrap:anywhere}
/* ── 내 정보 카드 (my.js 의 내정보카드) ─────────────────────
   🔴 owner 지시(2026-08-05): 「이쪽 디자인 배열이 이상한데 깔끔하게 합쳐줄 수 있을까?
      필수항목 넣어서」. 그전에는 이름 줄·번호 줄·노란 경고 상자가 따로 놀았다.
   🔴 노란 경고(.notice--warn)를 안 쓴다. 안 채운 칸은 **잘못이 아니다** —
      경고 색은 손님이 무언가 틀렸다고 읽는다.
   🔴 좁은 폰에서 이름이 길면 단추와 부딪힌다. 그래서 값과 단추를 flex 로 두고
      값에 min-width:0 을 준다 — 없으면 flex 자식이 안 줄어들어 단추가 밀려 나간다. */
/* 🔴🔴 2026-08-05 두 번째 판. 첫 판은 사장님이 「완전 개구리다」 하셨고, 재 보니 맞았다:
   낱말이 겹치고(김종원×2·아직×3·없어요×3·넣기×2), 이름이 같은 단추가 둘이고,
   단추 오른쪽 끝이 283/309px 로 안 맞았다. 별표를 넷 다 붙여 우선순위도 사라졌다.
   → 채운 것은 **값만 요약**으로, 안 한 것은 **목록 하나**로. 줄 전체가 누르는 자리다. */
.info-card{border:1px solid var(--c-border);border-radius:16px;
  padding:var(--s4);margin:0 0 var(--s5);background:var(--c-surface)}
/* 채워진 값 — 읽기만 한다. 고치는 곳은 [기본 정보] 하나뿐이라 여기에 단추를 안 단다. */
.info-sum{margin:var(--s2) 0 0;color:var(--c-text-sub);
  font-size:var(--t-cap);line-height:var(--t-cap-lh);overflow-wrap:anywhere}
/* 값 줄 — 이름은 왼쪽 고정, 값은 남는 자리 전부. 단추가 없으므로 끝이 저절로 맞는다. */
.info-row{display:flex;align-items:baseline;gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--c-border)}
.info-row .info-k{flex:0 0 auto;min-width:5.2em;color:var(--c-text-sub);
  font-size:var(--t-cap);line-height:var(--t-cap-lh)}
.info-row .info-v{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.info-row .info-none{color:var(--c-text-sub)}
/* 🔴🔴 네 번째 판 — 줄 **자체**가 누르는 자리다 (owner: 「편의성이 구리다」).
   세 번째 판은 단추를 없애 중복은 지웠지만, 그 자리에서 할 수 있는 일도 같이 지웠다.
   폰 설정 화면이 쓰는 모양으로 바꾼다: 줄 전체 + 오른쪽 꺾쇠.
   🔴 min-height 48px — 손가락으로 눌리는 최소 크기.
   🔴 단추지만 **네모 테두리를 안 두른다.** 목록 안에서 테두리가 셋 이상 겹치면
      화면이 시끄러워진다. 대신 꺾쇠(›)와 누를 때 배경으로 「눌린다」를 알린다. */
.info-row.info-go{width:100%;border:0;border-top:1px solid var(--c-border);
  background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  min-height:var(--tap);border-radius:0}
/* 🔴 owner 지시(2026-08-05): 「백그라운드 없애 줄래, 통일감이 없잖아 — 기본 정보
   고치기처럼」. 회색 바탕이 깔리면 그 줄만 다른 부품처럼 보인다. 이름 줄(.info-head)은
   글자 색만 바뀌는데 이 줄들만 바탕이 생겨 규칙이 갈렸다.
   → **바탕을 안 쓴다.** 이름 줄과 똑같이 글자·꺾쇠 색으로만 알린다. */
.info-go:focus-visible{outline:3px solid var(--c-focus);outline-offset:-3px}
.info-row .chev{flex:0 0 auto;color:var(--c-text-sub);font-size:20px;line-height:1}
.info-go:hover .chev,.info-go:hover .info-v{color:var(--c-btn-point-bg)}

/* 이름 줄 — 아래 세 줄과 **같은 규칙**으로 눌린다 */
.info-head{display:flex;align-items:center;gap:var(--s3);width:100%;
  min-height:var(--tap);padding:0 0 var(--s3);border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.info-head .menu-who{flex:0 0 auto;margin:0}
.info-head .head-s{flex:1 1 auto;min-width:0;color:var(--c-text-sub);
  font-size:var(--t-cap);line-height:var(--t-cap-lh);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info-head:hover .head-s{color:var(--c-btn-point-bg)}
.info-head:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:8px}

.my-list{list-style:none;margin:0;padding:0}
.my-list li + li{border-top:1px solid var(--c-border)}
.my-list a,.my-list button{display:flex;align-items:center;gap:var(--s3);width:100%;
  min-height:var(--tap);padding:var(--s3) 0;background:none;border:0;font:inherit;
  color:var(--c-text);text-align:left;text-decoration:none;cursor:pointer;
  transition:color var(--m-base) var(--m-ease),transform var(--m-fast) var(--m-ease)}
.my-list a:hover,.my-list button:hover{color:var(--c-text-strong);transform:translateX(2px)}
.my-list a:active,.my-list button:active{transform:scale(var(--m-press))}
.my-list .arw{margin-left:auto;color:var(--c-text-sub)}
.linked{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0}
.linked + .linked{border-top:1px solid var(--c-border)}
.linked .grow{flex:1;min-width:0}
.linked .mark{width:24px;height:24px;flex:0 0 auto;border-radius:var(--r-sm)}
/* 위험한 것은 마지막에, 그리고 다르게 보이게 */
.danger{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--c-border)}

/* ══ 로그인 팝업 — 16단계 (owner: "로그인은 팝업이 좋아보이고") ══
   mixtiles 실측(390px 폰): 흰 상자가 화면 가운데, 뒤는 어두워진다.
   페이지를 안 옮기므로 **보던 자리를 잃지 않는다** — 그게 팝업을 쓰는 이유다.
   🔴 서랍(z-index 121/120)보다 위에 떠야 한다. 서랍에서 여는 버튼이기 때문이다.
      「열렸다 ≠ 보인다」 — 서랍이 팝업을 덮으면 아무 소용이 없다. */
/* 🔴 16단계 실측 — 320×640 짧은 화면에서 팝업이 **상단바 밑으로 파고들어**
   로고가 반쯤 잘려 보였다. 위쪽에 상단바(57px)만큼 안전선을 둔다. */
.lg-back{position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:calc(57px + var(--s3)) var(--s4) var(--s4);
  background:rgba(0,0,0,.55);opacity:0;
  transition:opacity var(--m-base) var(--m-ease)}
.lg-back.is-on{opacity:1}
/* 🔴 owner 지시(2026-08-05) — 「로그인창 팝업도 도움말 창처럼 핑크 그라데이션」

   🔴🔴 값은 help.css(%) 가 아니라 **px** 로 잡는다 — 아래 `.lg-box.ui-modal` 과 같은 방식이다.
      사장님이 2026-08-04 에 「그라데이션을 좀 더 작게」라고 하셔서 그 창을 px 로 바꿨다.
      %로 두면 팝업이 길어질수록 핑크가 같이 길어져, 소셜 버튼 줄까지 핑크에 잠긴다.
      px 로 두면 창 길이와 상관없이 **머리글만** 핑크로 남는다.

   🔴🔴 2026-08-05 정정 — 여기에 「저 창은 64px 이면 되지만 여기는 제목+안내문 두 줄이라
      118px 이 필요하다」고 적혀 있었다. **지금은 아니다.** 안내문(.lg-lead)이 흰 카드
      **안**으로 들어갔기 때문이다 (modal.js). 실측(390×844, 옮긴 뒤):
        제목   상자 위에서 48~76px  · 흰 글자 · 핑크 위      ← 핑크에 앉는 글자는 이것뿐
        안내문 상자 위에서 108~128px · 먹색   · **카드 안**
        카드   상자 위에서 84px 부터
      → 핑크 띠는 제목만 덮으면 된다. 그래서 내 정보 팝업과 **같은 64px** 로 맞춘다.
      → 값을 고칠 때는 **글자가 어디에 앉는지 재고** 고칠 것 (눈으로 보면 못 잡는다).

   🔴 예전 주석은 「로그인 팝업에는 안 건다 — 소셜 버튼 색과 부딪힌다」였다. 그 걱정 자체는
      맞다. 그래서 색을 포기하는 대신 **부딪히지 않게 구조를 바꿨다** — 버튼은 흰 카드
      (.lg-card) 위에 올라가므로 카카오 노랑·네이버 초록이 핑크에 닿지 않는다.
      버튼 색은 한 픽셀도 안 건드렸다 (제공자 규정 · 고치면 심사 반려). */
.lg-box{position:relative;width:100%;max-width:420px;
  /* 🔴🔴 2026-08-05 감사에서 잡은 결함 — 팝업이 화면 **아래로 11px 잘렸다.**
     원인: 뒤판(.lg-back)은 위를 69px 비워 두는데(상단바 자리 = 57 + --s3),
       여기 한도는 그 69px 을 **안 세고** --s6(32px = 좌우 16+16 몫)만 뺐다.
       실측(390×844): 남는 세로 759px < 한도 812px → 상자가 아래로 10.5px 밀려 나갔다.
       저장 단추는 화면 안이라 못 누르지는 않았지만 아래 둥근 모서리가 잘려 보였다.
     → 뒤판이 실제로 비우는 값(위 69 + 아래 --s4)을 그대로 뺀다. 뒤판 padding 을
       고치면 **여기도 같이** 고쳐야 한다 (두 줄이 한 짝이다). */
  max-height:calc(100dvh - 57px - var(--s3) - var(--s4));overflow-y:auto;
  /* 🔴🔴 2026-08-05 — 사장님 지시로 **내 정보 팝업과 같은 핑크**로 되돌린다.
     그전에는 「핑크를 80% 정도 흐리게」 지시를 받아 rgb(233,66,131) 를 여기만 썼다.
     그 결과 두 팝업의 핑크가 실제로 달라졌고(실측 픽셀로 확인), 사장님이
     「모든 로그인창 디자인이 통일 안 됐다」고 지적하셨다 → 「내 정보 팝업 쪽으로」 결정.
     🔴 이제 색을 **지어내지 않는다.** 브랜드 토큰 하나만 본다 — 토큰이 바뀌면 두 창이
        같이 바뀐다. 예전처럼 섞은 값을 손으로 적어 두면 조용히 갈라진다.
     🔴 대비도 이쪽이 낫다: 흰 글자 기준 3.77:1 → **4.53:1**.
     🔴 띠 길이(64px/150px)도 내 정보 팝업과 같은 값이다. 위 주석의 실측 참고. */
  background:linear-gradient(180deg,
    var(--c-btn-point-bg) 0, var(--c-btn-point-bg) 64px,
    var(--c-bg) 150px, var(--c-bg) 100%);
  border-radius:20px;   /* mixtiles 실측: 큰 둥근 모서리 */
  /* 🔴 위 여백도 내 정보 팝업과 같다. 예전 --s7(48px)은 ✕ 가 **구석에 따로** 떠 있어
     제목이 그 아래로 내려가야 했던 시절의 값이다. 이제 한 줄이라 그 자리가 필요 없다. */
  padding:var(--s5);
  transform:translateY(10px);transition:transform var(--m-base) var(--m-ease)}
.lg-back.is-on .lg-box{transform:none}
@supports not (height:100dvh){
  .lg-box{max-height:calc(100vh - 57px - var(--s3) - var(--s4))} }

/* 🔴 2026-08-05 — 닫기(✕)도 핑크 위에 앉는다. 회색(--c-text-sub)으로 두면
   핑크 위 회색이라 **닫는 단추가 안 보인다** — 팝업에서 제일 나쁜 결함이다. */
.lg-x{position:absolute;top:var(--s2);right:var(--s2);
  width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--c-btn-point-fg);cursor:pointer;border-radius:var(--r-pill);
  transition:color var(--m-fast) var(--m-ease),transform var(--m-fast) var(--m-ease)}
.lg-x:hover{color:var(--c-btn-point-fg);transform:scale(1.12)}
.lg-x:active{transform:scale(var(--m-press))}

/* mixtiles 는 제목이 **가운데**다 (실측 스샷) */
/* 🔴 2026-08-05 — 위쪽이 핑크가 되었으므로 제목·안내문은 **흰 글자**다.
   먹색(--c-text-strong)을 그대로 두면 핑크 위 먹색이라 안 읽힌다.
   흰색은 지어낸 값이 아니라 이 짝을 위해 정해 둔 토큰이다 (tokens.css: 대비 5.14). */
.lg-h{margin:0 0 var(--s2);text-align:center;
  font-size:var(--t-prod);line-height:var(--t-prod-lh);color:var(--c-btn-point-fg)}
/* 🔴 안내문은 흰 카드 **안**에 있으므로 먹색 그대로다 (modal.js 주석 참고).
   핑크 위에 두면 사장님이 정하신 농도(80%)에서 3.77:1 로 기준 미달이다. */
.lg-lead{margin:0 0 var(--s5);text-align:center;
  color:var(--c-text-sub);font-size:var(--t-cap);line-height:var(--t-cap-lh)}

/* ── 🔴 흰 카드 — 내용은 전부 여기 위에 올린다 ─────────────────────────
   그라데이션만 깔면 위쪽 글자가 「핑크 위 먹색」이 되어 안 읽힌다.
   도움말 창도 **제목만 핑크, 내용은 흰 카드**다 (help.css). 같은 구조를 쓴다.
   🔴 소셜 버튼이 이 카드 위에 앉는 것이 핵심이다 — 카카오 노랑·네이버 초록이
      핑크에 닿지 않으므로 버튼 색을 하나도 안 바꾸고 규정을 지킬 수 있다. */
.lg-card{background:var(--c-bg);border-radius:16px;
  padding:var(--s5) var(--s4) var(--s4)}
.lg-terms{margin:var(--s4) 0 0;text-align:center;
  color:var(--c-text-mute);font-size:var(--t-cap);line-height:var(--t-cap-lh)}
.lg-terms a{color:inherit}
.lg-social .notice{margin-bottom:var(--s4)}
/* 팝업 안에는 아이콘 줄 밑에 큰 버튼이 없다 — 「또는」 구분선도 없앴다. */
.lg-box .social-row{margin-bottom:0}

/* ── 🔴 「가입 없이 주문하기」 — 팝업에서는 작은 글씨 한 줄 ──────────
   owner 지시(2026-08-04): 「그냥 시작하기 버튼 삭제」
   버튼은 지웠지만 **길은 남긴다.** /start/ 에서 카드를 누르면 이 팝업이 뜨는데,
   여기서 나가는 길이 없으면 로그인 안 하실 손님은 ×로 닫아도 /start/ 로 돌아올 뿐
   **갇힌다** (원칙 1-1 · owner 결정 「로그인 / 그냥 시작 둘 다」).
   🔴 `.guest` 는 페이지의 큰 버튼용(폭 100% · 52px · 19px 글씨)이다. 여기서는 다 덮는다.
   🔴 글씨는 작아도 **누르는 자리는 작지 않다** — 48px 을 지킨다. */
.lg-skip{margin:var(--s4) 0 0;text-align:center}
.lg-skip .guest{display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-height:var(--tap);padding:var(--s2) var(--s3);
  border:0;background:none;border-radius:var(--r-lg);
  color:var(--c-text-sub);font-size:var(--t-cap);font-weight:400;
  text-decoration:underline;text-underline-offset:3px}
.lg-skip .guest:hover{background:none;color:var(--c-text-strong);transform:none}

/* 🔴 모바일 3회감사 — 가로 모드에서 팝업이 화면 **아래로 10.5px 잘렸다.**
   위쪽 안전선(57px)만 주고 아래를 안 봐서 그렇다. 짧은 화면에서는 위아래를 같이 줄인다. */
@media (max-height:520px){
  .lg-back{padding:8px var(--s4)}
  .lg-box{max-height:calc(100dvh - 16px);padding:var(--s5) var(--s4) var(--s4)}
}
@supports not (height:100dvh){
  @media (max-height:520px){ .lg-box{max-height:calc(100vh - 16px)} }
}

@media (prefers-reduced-motion:reduce){
  .lg-back,.lg-box{transition:none}
}

/* 🔴 팝업이 열린 동안 뒤 화면 잠금. 서랍(body.menu-open)과 같은 방법이다 —
   `overflow:hidden` 만으로는 iOS 사파리에서 안 막히고 보던 자리도 잃는다.
   top 값은 modal.js 가 넣는다. */
body.lg-open{overflow:hidden;position:fixed;left:0;right:0;width:100%}

/* ── 받는 분 주소록 (owner 지시 2026-08-04) ────────────────
   🔴 한 줄에 「내용」과 「고치기·삭제」가 함께 선다. 좁은 화면에서는 단추가 아래로 내려간다 —
      390px 에서 나란히 두면 주소가 두 글자씩 끊긴다 (실측). */
.addr{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-start;
  padding:var(--s3) 0;border-top:1px solid var(--c-border)}
.addr:first-child{border-top:0}
.addr .grow{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.addr .badge{margin-left:var(--s2)}
.addr-btns{display:flex;gap:var(--s2);flex:0 0 auto}

/* 🔴 카카오 우편번호 창(.addr-box) 규칙은 **/addr-find.css 로 옮겼다** (2026-08-05).
   여기 두었더니 로그인 팝업이 없는 화면(선물 받는 분 화면)에서는 규칙이 안 걸려
   창 높이가 0px 이 됐다 — 「눌렀는데 아무것도 안 뜬다」.
   이제 addr-find.js 가 자기 CSS 를 스스로 싣는다. 여기에 다시 적지 말 것 —
   두 벌이 되면 한쪽만 고쳐서 화면마다 다르게 보인다. */

/* 2026-09-12: login-only surface. Account tiles and ui-modal forms keep their own styles. */
body.login-page{padding-bottom:0;background:var(--c-bg)}
.login-page .login-shell{max-width:528px;padding:40px 24px 56px}
.login-page .login-panel{border:1px solid var(--c-border);border-radius:20px;overflow:hidden;background:var(--c-surface)}
.login-page .login-page-head{padding:28px 28px 24px;background:var(--brand-paper);border-bottom:1px solid var(--c-border)}
.login-page .login-page-body{padding:28px}
.login-page .login-eyebrow,#login-modal .login-eyebrow{margin:0 0 10px;font-size:13px;font-weight:600;line-height:1.5;color:var(--c-text-sub)}
.login-page .auth h1,#login-modal .lg-h{margin:0;font-size:28px;font-weight:750;line-height:1.35;letter-spacing:-.03em;color:var(--c-text);text-align:left}
.login-page .auth .lead,#login-modal .lg-lead{margin:0 0 24px;font-size:15px;line-height:1.75;color:var(--c-text-sub);text-align:left}
#login-modal.lg-back{padding:16px;background:rgba(var(--brand-ink-rgb),.35)}
#login-modal .login-dialog{display:flex;flex-direction:column;max-width:480px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:0;overflow:hidden;background:var(--c-surface);border:1px solid var(--c-border);border-radius:20px;box-shadow:0 20px 64px rgba(var(--brand-ink-rgb),.15)}
#login-modal .ui-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;margin:0;padding:24px 28px;background:var(--brand-paper);border-bottom:1px solid var(--c-border)}
#login-modal .login-heading{min-width:0}
#login-modal .lg-x{position:static;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text);border-radius:50%;transform:none}
#login-modal .lg-x:hover{background:var(--c-surface-point);color:var(--c-text);border-color:var(--c-btn-point-bg);transform:none}
#login-modal .lg-card{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding:20px;margin:0;padding:24px 28px 20px;border-radius:0;background:var(--c-surface);scrollbar-width:thin;scrollbar-color:rgba(var(--brand-ink-rgb),.25) transparent}
.login-page #social,#login-modal .lg-social{min-width:0}
.login-page #social .social-row,#login-modal .lg-social .social-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0}
.login-page #social .social-cell,#login-modal .lg-social .social-cell{display:block;min-width:0;width:100%}
.login-page #social .social-cell>.cap,#login-modal .lg-social .social-cell>.cap{display:none}
.login-page #social .social,#login-modal .lg-social .social{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;gap:12px;width:100%;min-height:56px;height:auto;padding:14px 18px;border-radius:10px;transform:none;font-size:15px;line-height:1.6}
.login-page #social .social .t,#login-modal .lg-social .social .t{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;text-align:center;font:inherit;font-weight:600;letter-spacing:0}
.login-page #social .social svg,#login-modal .lg-social .social svg{justify-self:center;width:22px;height:22px}
.login-page #social .social--naver svg,#login-modal .lg-social .social--naver svg{width:18px;height:18px}
.login-page #social .social:hover,#login-modal .lg-social .social:hover{transform:none}
.login-page .or,#login-modal .login-divider{margin:20px 0;color:var(--c-text-sub);font-size:13px;line-height:1.5}
#login-modal .lg-skip{margin:0}
.login-page .guest,#login-modal .lg-skip .guest{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;width:100%;margin:0;padding:12px 18px;border:1px solid var(--c-btn-point-bg);border-radius:10px;background:var(--c-surface);color:var(--c-text);font-size:15px;font-weight:600;line-height:1.6;text-decoration:none;white-space:normal;transform:none}
.login-page .guest:hover,#login-modal .lg-skip .guest:hover{background:var(--c-surface-point);color:var(--c-text);transform:none}
.login-page .terms,#login-modal .lg-terms{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--c-border);text-align:left;font-size:12px;line-height:1.75;color:var(--c-text-sub)}
.login-page .login-policy-links,#login-modal .login-policy-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px}
.login-page .login-policy-links a,#login-modal .login-policy-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-text);font-size:13px;line-height:1.6;text-decoration:underline;text-underline-offset:4px}
.login-page :is(a,button):focus-visible,#login-modal :is(a,button):focus-visible{outline:2px solid var(--c-btn-point-bg);outline-offset:3px}
#login-modal .lg-h:focus{outline:none}
@media(max-width:600px){
 .login-page .login-shell{padding:24px 16px 36px}
 .login-page .login-page-head{padding:24px 20px 20px}
 .login-page .login-page-body{padding:24px 20px 20px}
 #login-modal.lg-back{padding:12px}
 #login-modal .login-dialog{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
 #login-modal .ui-modal-head{padding:20px;gap:12px}
 #login-modal .lg-card{padding:20px}
 .login-page .auth h1,#login-modal .lg-h{font-size:26px}
 .login-page #social .social,#login-modal .lg-social .social{padding-inline:14px;gap:8px}
}
@media(max-height:520px){
 #login-modal.lg-back{padding:8px 12px}
 #login-modal .login-dialog{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
 #login-modal .ui-modal-head{padding:14px 20px}
 #login-modal .login-eyebrow{margin-bottom:4px}
 #login-modal .lg-card{padding:20px}
}