@charset "utf-8";
/* ============================================================
   TOUN28-AIX Team | 2.0_login.css (로그인 · 시작하기)
   20260826 최초 작성 / 20260827 시안 A·B 확정본 이관

   한 파일에 시안 두 개가 함께 산다. 고르기 전까지 둘 다 살아 있어야 하므로
   이름을 아래 세 갈래로 나눠 서로 부딪히지 않게 한다.

     lg_   : 두 시안이 함께 쓰는 것(머리 바 · 하단 링크 · 유도 문구 스팬 · 토스트)
     lga_  : 시안 A · 브랜드 시트 전용   → login_00start_A.html (body class="lga")
     lgb_  : 시안 B · 얼굴 우선 전용     → login_00start_B.html (body class="lgb")

   공용 이름이라도 시안마다 색이 다른 것은 body.lga / body.lgb 로 스코프를 걸어
   한쪽을 고쳐도 다른 쪽이 흔들리지 않게 한다.
   시안이 확정되면 진 쪽 블록과 body 클래스를 통째로 지우면 된다.

   ※ 미디어쿼리 하단 일괄
   ============================================================ */

/* ===== 유틸 ===== */
.is_hidden {display:none !important;}
/* hidden 속성이 display 선언에 덮이지 않게 */
[hidden] {display:none !important;}
.sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
/* 기기별 노출 — 지금은 화면 폭으로 가르지만, 실제로는 기기·카메라 지원 여부로 갈라야 한다.
   (데스크톱 창을 좁혔을 때 얼굴 버튼이 되살아나면 안 된다.)
   그때는 하단 미디어쿼리의 규칙을 body 클래스(예: body.is_pc)로 옮기면 된다 */
.lg_only_pc {display:none;}

/* ===== 글자 확대 배율 — 이 화면만 끈다 =====
   2.0_layout.css 는 body 에 -webkit-text-size-adjust:120% 를 걸어 모바일에서 글자를 1.2배로 키운다.
   로그인 시작하기는 시안에서 정한 px 그대로가 확정 크기여서(브랜드 카피·버튼·혜택 판의 균형이
   그 값에서 잡혀 있다) 배율이 얹히면 시안과 어긋난다. 이 화면에서만 100% 로 되돌린다.
   ※ 로그인 뒤 다른 화면으로 넘어가면 그쪽은 120% 라 글자가 커진다 — 의도된 차이다 */
body {-webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100%;}

/* ===== 뼈대 — 두 시안 공용 =====
   하단 링크 한 줄이 늘 바닥에 붙도록 html 부터 본문까지 세로 flex 를 한 줄로 잇는다 */
#wrap {display:flex; flex-direction:column; min-height:100%;}
#container {flex:1 1 auto; display:flex; flex-direction:column;}
#contents {flex:1 1 auto; display:flex; flex-direction:column;}
#footer {flex:0 0 auto;}

/* ===== 머리 바 — 두 시안 공용(색만 시안별) ===== */
.lg_header {position:relative; z-index:2; flex:0 0 auto; background:transparent;}
.lg_header .inner {width:100%; padding:0 26px; box-sizing:border-box;}
.lg_bar {position:relative; display:flex; align-items:center; justify-content:center; height:56px; margin:0 -8px;}
.lg_bar_title {margin:0; font-size:15.5px; font-weight:600; letter-spacing:-0.01em;}
.lg_ico_btn {position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; background:transparent; text-decoration:none; cursor:pointer;}
.lg_ico_btn.is_back {left:-8px;}
.lg_ico_btn.is_home {right:-8px;}
.lg_ico_btn svg {display:block; width:21px; height:21px;}

/* ===== 하단 링크 — 두 시안 공용 =====
   하나는 왼쪽, 하나는 오른쪽 — 성격이 다른 링크라 붙여 두지 않는다 */
.lg_links {display:flex; align-items:center; justify-content:space-between; margin:20px 0 0;}
.lg_links a {padding:6px 2px; font-size:12.5px; font-weight:500; letter-spacing:-0.01em; text-decoration:none;}

/* ===== 로그인 유도 문구(AD) — 두 시안 공용 =====
   열 때마다 다섯 개 중 하나가 뜬다. 세 줄로 읽힌다.
     lg_ad_l1 굵은 질문 / lg_ad_l2 얇은 문장(핵심 어구만 굵게) / lg_ad_d 회색 설명 한 줄
   크기와 색은 자리마다 다르므로 각 시안 블록에서 정한다 */
.lg_ad_l1 {display:block;}
.lg_ad_l2 {display:block;}
.lg_ad_d {display:block;}

/* ===== 자주 묻는 질문 팝업 — 두 시안 공용 =====
   '도움이 필요하신가요?' 를 누르면 뜬다. 문항이 열둘이라 바텀시트로는 다 담기지 않아
   마이페이지의 전체화면 시트(.buyWrap.is_full) 와 같은 결로 화면을 덮는다.
   답이 길어 처음부터 다 펼치면 목록이 보이지 않으므로 질문만 세워 두고 눌러서 편다 */
body.lg_pop_open {overflow:hidden;}
.lg_pop {display:none; position:fixed; inset:0; z-index:1300; background:rgba(17,17,17,.5);}
.lg_pop.is_open {display:block;}
.lg_pop_inner {display:flex; flex-direction:column; width:100%; height:100%; background:#f1f2f4; color:#1b1b1b;
               opacity:0; transform:translateY(18px); transition:opacity .24s ease, transform .28s cubic-bezier(.22,.61,.36,1);}
.lg_pop.is_shown .lg_pop_inner {opacity:1; transform:translateY(0);}
/* 머리는 늘 보이게 두고 본문만 구른다 */
.lg_pop_head {position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:clamp(52px,14vw,56px); padding:0 52px; border-bottom:1px solid #e6e8ec; background:#ffffff; box-sizing:border-box;}
.lg_pop_title {margin:0; color:#1b1b1b; font-size:clamp(15.5px,2.4vw,17px); font-weight:700; line-height:1;}
.lg_pop_close {position:absolute; top:50%; right:10px; width:36px; height:36px; margin-top:-18px; padding:0; border:0; background:transparent; cursor:pointer;}
.lg_pop_close:before, .lg_pop_close:after {content:''; position:absolute; top:50%; left:50%; width:17px; height:1.8px; border-radius:1px; background:#1b1b1b;}
.lg_pop_close:before {transform:translate(-50%,-50%) rotate(45deg);}
.lg_pop_close:after {transform:translate(-50%,-50%) rotate(-45deg);}
.lg_pop_body {flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px clamp(16px,4.4vw,20px) calc(28px + env(safe-area-inset-bottom));}

/* 갈래 버튼 — 문항이 많아 먼저 좁혀 보게 한다.
   여섯 갈래가 좁은 화면에서 두 줄로 접히면 목록이 밀려 내려가므로 한 줄로 두고 옆으로 굴린다.
   본문을 굴려도 갈래는 머리 아래에 붙어 따라온다 */
.lg_faq_tabs {position:sticky; top:-16px; z-index:1; display:flex; gap:5px; margin:-16px clamp(-20px,-4.4vw,-16px) 12px; padding:14px clamp(16px,4.4vw,20px) 11px; overflow-x:auto; background:#f1f2f4; scrollbar-width:none;}
.lg_faq_tabs::-webkit-scrollbar {display:none;}
.lg_faq_tab {flex:0 0 auto; height:clamp(30px,8vw,34px); padding:0 clamp(10px,2vw,14px); border:1px solid #e1e4e9; border-radius:999px; background:#ffffff; color:#5a6069; font-family:inherit; font-size:clamp(12.5px,1.9vw,13px); font-weight:600; letter-spacing:-0.015em; white-space:nowrap; cursor:pointer;}
.lg_faq_tab:hover {border-color:#c9cfdb;}
.lg_faq_tab.is_on {border-color:#1b43c8; background:#1b43c8; color:#ffffff;}

/* 문답 — 흰 카드 한 장에 줄로 잇는다 */
.lg_faq {border-radius:12px; overflow:hidden; background:#ffffff; box-shadow:0 2px 12px rgba(20,30,60,.05);}
.lg_faq_item + .lg_faq_item {border-top:1px solid #eef0f2;}
.lg_faq_q {display:flex; align-items:flex-start; gap:10px; width:100%; padding:clamp(13px,3.6vw,16px) clamp(15px,4vw,18px); border:0; background:transparent; color:#1b1b1b; font-family:inherit; font-size:clamp(14px,2.1vw,15px); font-weight:600; line-height:1.5; letter-spacing:-0.015em; text-align:left; word-break:keep-all; box-sizing:border-box; cursor:pointer;}
.lg_faq_q:hover {background:#f7f8fa;}
/* 화살표는 열리면 뒤집힌다 — 열림 여부를 글자 없이 알린다 */
.lg_faq_q:after {content:''; flex:0 0 auto; width:7px; height:7px; margin:5px 1px 0 auto; border-right:1.8px solid #b6bcc6; border-bottom:1.8px solid #b6bcc6; transform:rotate(45deg); transition:transform .2s ease;}
.lg_faq_q[aria-expanded="true"] {color:#1b43c8;}
.lg_faq_q[aria-expanded="true"]:after {margin-top:8px; border-color:#1b43c8; transform:rotate(-135deg);}
.lg_faq_a {padding:10px 15px; color:#1b1b1b; font-size:clamp(13px,1.9vw,13.5px); font-weight:400; line-height:1.68; letter-spacing:-0.01em; word-break:keep-all;}
.lg_faq_a strong {color:#1b1b1b; font-weight:600;}
/* 확인할 것을 세는 목록 — 번호를 파랑으로 세워 본문과 구분한다 */
.lg_faq_a ol {margin:10px 0; padding:0; list-style:none; counter-reset:faq;}
.lg_faq_a ol li {position:relative; padding:0 0 0 24px; counter-increment:faq;}
.lg_faq_a ol li + li {margin-top:6px;}
.lg_faq_a ol li:before {content:counter(faq); position:absolute; left:0; top:2px; display:flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; background:#eef1fb; color:#1b43c8; font-size:clamp(10.5px,1.6vw,11px); font-weight:700; line-height:1;}

/* ===== 토스트 알림 — 두 시안 공용 ===== */
.lg_toast {position:fixed; left:50%; top:70px; z-index:1200; max-width:calc(100% - 40px); padding:13px 18px; border-radius:12px; background:rgba(20,22,28,.94); color:#ffffff; font-size:13px; font-weight:500; line-height:1.45; text-align:center; word-break:keep-all; opacity:0; visibility:hidden; transform:translate(-50%,-8px); transition:opacity .2s, transform .2s, visibility .2s;}
.lg_toast.is_show {opacity:1; visibility:visible; transform:translate(-50%,0);}

/* ============================================================
   시안 A · 브랜드 시트
   위쪽 브랜드 면이 문을 열고, 아래 흰 시트에는 누를 것만 담는다
   ============================================================ */
/* 한 겹으로 칠하지 않는다. 밑색 위에 빛 세 덩이를 겹쳐 깊이를 만든다.
   머리 바와 브랜드 면이 한 면으로 이어져야 해서 배경은 #wrap 이 통째로 맡는다 */
body.lga {background:#0f1a3d;}
body.lga #wrap {position:relative; color:#ffffff;
                background:
                  radial-gradient(120% 80% at 88% 6%,  rgba(120,160,255,.38) 0%, rgba(120,160,255,0) 58%),
                  radial-gradient(110% 75% at 4% 92%,  rgba(60,110,255,.42)  0%, rgba(60,110,255,0)  62%),
                  radial-gradient(90%  60% at 50% 40%, rgba(28,60,180,.35)   0%, rgba(28,60,180,0)   70%),
                  linear-gradient(158deg,#16276b 0%,#1b3aa8 46%,#2a56e0 100%);
                overflow:hidden;}
/* 위쪽 가장자리를 살짝 밝혀 면이 평평해 보이지 않게 */
body.lga #wrap:before {content:''; position:absolute; left:0; right:0; top:0; height:180px; background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0));}
body.lga .lg_bar_title {color:rgba(255,255,255,.9);}
body.lga .lg_ico_btn {color:rgba(255,255,255,.92);}
body.lga .lg_links a {color:#7b818c;}

.lga_top {position:relative; z-index:1; flex:1 1 auto; display:flex; flex-direction:column; padding:0 26px 54px;}

/* 로그인 유도 문구(모바일) — 머리 바로 아래에 둔다.
   '이제 얼굴이면 돼요' 는 시트의 얼굴 버튼과 이어지는 말이라 그 사이를 끊으면 안 된다.
   위 카피와 성격이 다른 이야기라 유리 판에 올려 '브랜드 카피'가 아니라 '전할 말'로 읽히게 하고,
   왼쪽 점으로 시작을 알린다 */
.lga_ad {position:relative; margin:10px 0 0; padding:13px 16px 14px 30px; border-radius:14px;
         border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.09); backdrop-filter:blur(6px);}
.lga_ad:before {content:''; position:absolute; left:15px; top:19px; width:5px; height:5px; border-radius:50%; background:#8fb4ff;}
.lga_ad .lg_ad_l1 {font-size:15px; font-weight:600; line-height:1.45; letter-spacing:-0.015em; color:rgba(255,255,255,.95); word-break:keep-all;}
.lga_ad .lg_ad_l2 {margin-top:3px; font-size:13px; font-weight:300; line-height:1.5; letter-spacing:-0.02em; color:rgba(255,255,255,.82); word-break:keep-all;}
.lga_ad .lg_ad_l2 b {font-weight:700; color:rgba(255,255,255,.98);}
.lga_ad .lg_ad_d {font-size:13px; font-weight:400; line-height:1.5; letter-spacing:-0.01em; color:rgba(255,255,255,.70); word-break:keep-all;}

.lga_brand {position:relative; margin-top:auto;}
.lga_logo {display:block; margin:0 0 22px; font-size:12.5px; font-weight:700; letter-spacing:0.42em; color:rgba(255,255,255,.62);}
.lga_copy {margin:0; font-size:30px; font-weight:200; line-height:1.36; letter-spacing:-0.035em; color:rgba(255,255,255,.78); word-break:keep-all;}
.lga_copy b {font-weight:700; color:rgba(255,255,255,.98); letter-spacing:-0.04em;}
.lga_copy_sub {margin:13px 0 0; font-size:14.5px; font-weight:400; line-height:1.55; letter-spacing:-0.015em; color:rgba(255,255,255,.72); word-break:keep-all;}
/* PC 자리의 유도 문구 — 제목 두 줄(굵은 질문 + 얇은 문장) + 회색 설명 한 줄.
   얇은 줄에서는 핵심 어구만 굵게 세워 눈이 세 단계로 떨어지게 한다 */
.lga_copy_ad {font-size:26px; font-weight:700; color:rgba(255,255,255,.98);}
.lga_copy_ad .lg_ad_l2 {margin-top:8px; font-size:18.5px; font-weight:300; letter-spacing:-0.02em; color:rgba(255,255,255,.80);}
.lga_copy_ad .lg_ad_l2 b {font-weight:700; color:rgba(255,255,255,.98);}
.lga_copy_sub.lg_only_pc {margin-top:16px;}

/* 아래 흰 시트 */
.lga_sheet {position:relative; z-index:1; flex:0 0 auto; margin-top:-28px; padding:28px 26px 24px; border-radius:30px 30px 0 0; background:#ffffff; color:#14161c;
            box-shadow:0 -18px 40px rgba(9,18,54,.28);}
.lga_lead {margin:0 0 5px; color:#9aa0ab; font-size:12.5px; font-weight:500; line-height:1.5; letter-spacing:-0.01em; text-align:center; word-break:keep-all;}

.lga_btn {position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:58px; border:0; border-radius:16px;
          font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-0.02em; text-decoration:none; box-sizing:border-box; cursor:pointer; transition:transform .12s ease;}
.lga_btn:active {transform:scale(.988);}
/* 얼굴 다음에 오는 두 수단은 한 묶음이라 사이를 좁게, 얼굴과는 넓게 띄운다 */
.lga_btn + .lga_btn {margin-top:25px;}
.lga_btn + .lga_btn + .lga_btn {margin-top:10px;}
.lga_btn svg {display:block; width:20px; height:20px;}
/* 주 버튼은 브랜드 파랑 — 위쪽 면과 같은 계열로 이어 붙여 한 화면으로 읽히게 한다 */
.lga_btn_face {background:linear-gradient(180deg,#2a56e0 0%,#1b43c8 100%); color:#ffffff; box-shadow:0 10px 24px rgba(27,67,200,.30), inset 0 1px 0 rgba(255,255,255,.18);}
/* 전화번호는 잉크색 — 파랑 다음의 두 번째 무게 */
.lga_btn_phone {background:linear-gradient(180deg,#25282f 0%,#14161c 100%); color:#ffffff; box-shadow:0 8px 20px rgba(15,20,35,.24), inset 0 1px 0 rgba(255,255,255,.10);}
.lga_btn_kakao {background:#fee500; color:#191600;}

/* ============================================================
   시안 B · 얼굴 우선
   얼굴을 비추는 마크가 화면의 주인공이다
   ============================================================ */
/* 흰 바탕이 아니라, 위가 아주 옅게 밝은 바탕 */
body.lgb {background:#eef1f6;}
body.lgb #wrap {background:radial-gradient(120% 70% at 50% 0%, #ffffff 0%, #f4f6fa 46%, #eef1f6 100%);}
body.lgb .lg_header .inner {padding:0 24px;}
body.lgb .lg_bar_title {color:#14161c;}
body.lgb .lg_ico_btn {color:#14161c;}
body.lgb .lg_links {margin-top:26px;}
body.lgb .lg_links a {color:#8a8f99;}

.lgb_wrap {flex:1 1 auto; display:flex; flex-direction:column; padding:0 24px 22px;}
.lgb_stage {flex:1 1 auto; display:flex; flex-direction:column; align-items:stretch; justify-content:center; text-align:center;}

/* 얼굴 마크 — 틀을 두르지 않는다.
   마크 하나를 크게 두고, 뒤에 옅은 격자와 빛 · 위로 훑는 선만 얹는다 */
.lgb_face {position:relative; display:flex; align-items:center; justify-content:center; height:296px;}
/* 옅은 점 격자 — 가운데만 보이도록 원형으로 지운다. 기계가 읽는 면이라는 신호 */
.lgb_grid {position:absolute; width:300px; height:300px;
           background-image:radial-gradient(rgba(27,67,200,.16) 1px, transparent 1.1px); background-size:15px 15px;
           -webkit-mask-image:radial-gradient(circle, #000 34%, transparent 70%);
                   mask-image:radial-gradient(circle, #000 34%, transparent 70%);}
/* 뒤로 번지는 빛 */
.lgb_glow {position:absolute; width:300px; height:300px; border-radius:50%;
           background:radial-gradient(circle, rgba(60,110,255,.20) 0%, rgba(60,110,255,0) 62%);}
/* 아주 옅은 동심원 두 겹 — 초점만 잡아 준다 */
.lgb_ring {position:absolute; width:224px; height:224px; border:1px solid rgba(27,67,200,.13); border-radius:50%;}
.lgb_ring.is_out {width:278px; height:278px; border-color:rgba(27,67,200,.07);}
.lgb_mark {position:relative; width:206px; height:206px;}
.lgb_mark svg {display:block; width:100%; height:100%; filter:drop-shadow(0 12px 22px rgba(21,44,120,.16));}
/* 위에서 아래로 훑는 선 — 마크 폭 안에서만 움직인다 */
.lgb_scan {position:absolute; left:50%; width:214px; margin-left:-107px; top:22%; height:1.5px; border-radius:2px;
           background:linear-gradient(90deg,rgba(27,67,200,0),#1b43c8 42%,#6b8dff 58%,rgba(27,67,200,0));
           box-shadow:0 0 16px rgba(27,67,200,.55); animation:lgb_scan 2.8s cubic-bezier(.45,0,.55,1) infinite alternate;}
/* 잔광은 사방으로 흐려져야 한다 — 위아래로만 흐리면 옆면에 각진 자국이 남는다 */
.lgb_scan:after {content:''; position:absolute; left:0; right:0; top:1.5px; height:40px;
                 background:radial-gradient(ellipse at 50% 0%, rgba(27,67,200,.16) 0%, rgba(27,67,200,0) 72%);}
@keyframes lgb_scan {from {top:22%;} to {top:76%;}}
@media (prefers-reduced-motion:reduce) {.lgb_scan {animation:none;}}

.lgb_copy {margin:26px 0 0; font-size:29px; font-weight:200; line-height:1.34; letter-spacing:-0.035em; word-break:keep-all;}
.lgb_copy b {color:#1b43c8; font-weight:700; letter-spacing:-0.04em;}
.lgb_lead {margin:13px 0 0; color:#878d99; font-size:13.5px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; word-break:keep-all;}

.lgb_btn_face {display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:58px; margin-top:32px; border:0; border-radius:17px;
               background:linear-gradient(180deg,#2a56e0 0%,#1b43c8 100%); color:#ffffff; font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-0.02em; text-decoration:none;
               box-sizing:border-box; box-shadow:0 10px 24px rgba(27,67,200,.32), inset 0 1px 0 rgba(255,255,255,.18); cursor:pointer; transition:transform .12s ease;}
.lgb_btn_face:active {transform:scale(.988);}
.lgb_btn_face svg {display:block; width:20px; height:20px;}

/* 다른 방법은 테두리 없이 아주 조용히.
   모바일에서는 전화번호·카카오 둘 다 흰 버튼이다 —
   파란 주 버튼(얼굴)만 무게를 갖게 하고, 보조 두 개는 같은 무게로 나란히 선다 */
.lgb_other {display:flex; flex-direction:column; gap:10px; margin-top:12px;}
/* 세로로 쌓을 때는 flex-basis 0 이 높이를 눌러 버리므로 늘어나지 않게 둔다 */
.lgb_btn_sub {flex:0 0 auto; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; height:54px; border:0; border-radius:16px;
              background:rgba(255,255,255,.82); color:#3f444d; font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-0.015em; text-decoration:none;
              box-sizing:border-box; box-shadow:inset 0 0 0 1px rgba(20,30,60,.08); cursor:pointer;}
.lgb_btn_sub:hover {background:#ffffff;}
.lgb_btn_sub svg {display:block; width:18px; height:18px;}

/* PC 자리의 유도 문구 — 모바일에서는 자리를 잡지 않는다 */
.lgb_head {display:none; text-align:center;}
.lgb_tit {margin:0; font-size:26px; font-weight:700; line-height:1.34; letter-spacing:-0.035em; word-break:keep-all;}
.lgb_tit .lg_ad_l2 {margin-top:8px; font-size:18.5px; font-weight:300; letter-spacing:-0.02em; color:#5a6069;}
.lgb_tit .lg_ad_l2 b {font-weight:700; color:#14161c;}
.lgb_sub {margin:16px 0 30px; color:#878d99; font-size:13.5px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; word-break:keep-all;}


/* ============================================================
   얼굴 인식 — login_01face_recognition.html (body class="lgf")
   '얼굴로 시작하기' 를 누르면 오는 화면이다. 들어오면 바로 카메라를 켜고,
   통과하면 다음 화면으로 넘어간다. 실패했을 때만 결과 화면이 선다.
     0 막힘(PC 처럼 카메라 없는 자리)  ·  1 촬영(진입 즉시)  ·  2 결과(실패한 경우)

   바탕은 검정이다 — 주변이 밝을 때 눈이 원 안으로 모인다.
   다만 주변이 어두우면 얼굴이 묻히므로 프레임 밝기를 재서 어두울 때는
   바탕을 흰색으로 올려 화면빛을 조명처럼 쓴다(body.lgf.is_light · 촬영 단계에서만).
   촬영 판정(정면 유지 · 4연사 · 얼굴 크롭)은 알체라 POC(alchera-api2.blade.php)의
   기준을 그대로 옮겼고, 모양만 2.0 언어로 다시 입혔다.
   ============================================================ */
/* 어두운 화면 — 내용이 한 화면보다 길어지면 body 상자를 늘려야 검은 바탕이 끝까지 따라온다.
   html 이 흰 바탕을 깔고 있어서 height:100% 로 묶어 두면 넘친 만큼 흰 띠가 생긴다 */
body.lgf {height:auto; min-height:100%; background:#0e1013; color:#ffffff; transition:background-color .45s ease, color .3s ease;}
body.lgf #wrap {background:none;}
body.lgf .lg_header .inner {padding:0 24px;}
body.lgf .lg_bar_title {color:rgba(255,255,255,.92);}
body.lgf .lg_ico_btn {color:rgba(255,255,255,.92);}
/* 어두운 곳에서 — 바탕을 흰색으로 올려 얼굴에 빛을 준다 */
body.lgf.is_light {background:#ffffff; color:#14161c;}
body.lgf.is_light .lg_bar_title, body.lgf.is_light .lg_ico_btn {color:#14161c;}

.lgf_wrap {flex:1 1 auto; display:flex; flex-direction:column; padding:0 24px 22px;}
/* 단계는 한 번에 하나만 선다. hidden 속성으로 여닫으므로 display 를 들고 있으면 안 된다 */
.lgf_step {flex:1 1 auto; display:flex; flex-direction:column;}
.lgf_step[hidden] {display:none;}
/* 촬영 단계는 원이 주인공이라 위아래 남는 자리를 나눠 갖고 가운데에 선다 */
.lgf_mid {flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;}

/* ── 1 촬영 — 들어오면 바로 이 화면이다 ──────────── */
/* 스테이지는 정사각이어야 링과 렌즈가 어긋나지 않는다 */
.lgf_stage {position:relative; width:clamp(288px,85vw,348px); height:clamp(288px,85vw,348px); margin:0 auto;}
.lgf_ring {position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
/* 링 트랙 — 아직 차지 않은 자리. 바탕이 검정일 때와 흰색일 때 밝기를 달리한다 */
.lgf_track {stroke:rgba(255,255,255,.15);}
.lgf_track.is_seg {stroke:rgba(255,255,255,.10);}
body.lgf.is_light .lgf_track {stroke:#e2e7f2;}
body.lgf.is_light .lgf_track.is_seg {stroke:#dceae1;}
/* 바깥 큰 원: 정면을 유지한 시간이 차오른다. 다 차면 파랑에서 초록으로 */
.lgf_prog {transition:stroke-dashoffset .08s linear, stroke .2s;}
/* 안쪽 네 칸: 연사 네 장이 한 칸씩 채워진다.
   비어 있을 때 끝을 둥글게 두면 길이 0 인 선에도 둥근 끝이 그려져 점 네 개가 남는다 —
   그래서 대기 중에는 butt 로 두고, 채우기 시작할 때만 round 로 바꾼다 */
.lgf_seg {stroke-linecap:butt; transition:stroke-dasharray .12s linear;}
.lgf_seg.is_on {stroke-linecap:round;}
/* 카메라는 이 원 안에만 보인다 */
.lgf_lens {position:absolute; inset:14%; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#1a1e26;}
body.lgf.is_light .lgf_lens {background:#dfe4ef;}
/* 거울처럼 좌우를 뒤집어 보여 준다(보내는 사진에는 영향이 없다) */
.lgf_video {width:100%; height:100%; object-fit:cover; transform:scaleX(-1.28) scaleY(1.28);}
.lgf_ph {width:58%; height:auto;}

/* 지금 무엇을 해야 하는지 한 줄로 — 촬영 중에는 초록으로 바뀐다 */
.lgf_pill {display:block; width:max-content; max-width:100%; margin:0 auto clamp(14px,4vw,18px); padding:9px 16px; border-radius:999px; background:rgba(107,141,255,.16); color:#8fb0ff; font-size:13px; font-weight:700; line-height:1.3; letter-spacing:-0.01em; text-align:center; word-break:keep-all;}
.lgf_pill.is_good {background:rgba(18,134,74,.22); color:#4ade9b;}
.lgf_pill.is_warn {background:rgba(217,83,79,.20); color:#ff8b87;}
body.lgf.is_light .lgf_pill {background:#eef1fb; color:#1b43c8;}
body.lgf.is_light .lgf_pill.is_good {background:#e9f7ee; color:#12864a;}
body.lgf.is_light .lgf_pill.is_warn {background:#fdeeee; color:#d9534f;}
.lgf_note {margin:12px 0 0; color:rgba(255,255,255,.52); font-size:12px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; text-align:center; word-break:keep-all;}
body.lgf.is_light .lgf_note {color:#9aa0ab;}
.lgf_err {margin:0 0 10px; color:#ff8b87; font-size:12.5px; font-weight:500; line-height:1.5; text-align:center; word-break:keep-all;}
body.lgf.is_light .lgf_err {color:#d9534f;}
.lgf_err:empty {display:none;}
/* 동의 표기 — 얼굴 정보 수집·이용은 이용약관에 이미 담겨 있고,
   이 화면은 들어오는 즉시 카메라를 켜므로 따로 받지 않고 들어온 것으로 갈음한다 */
.lgf_consent {display:flex; align-items:center; justify-content:center; gap:5px; margin:10px 0 0; color:rgba(255,255,255,.46); font-size:11.5px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; text-align:center; word-break:keep-all;}
.lgf_consent_ico {flex:0 0 auto; display:block; width:13px; height:13px; color:#4ade9b;}
.lgf_consent_ico svg {display:block; width:100%; height:100%;}
body.lgf.is_light .lgf_consent_ico {color:#12864a;}
body.lgf.is_light .lgf_consent {color:#9aa0ab;}

/* 동의를 원치 않을 때 나갈 길을 한 줄로 알려 준다 */
.lgf_consent_sub {margin:0 0 10px; color:rgba(255,255,255,.34); font-size:11px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; text-align:center; word-break:keep-all;}
body.lgf.is_light .lgf_consent_sub {color:#b6bcc6;}

/* ── 0 막힘 · 2 결과 — 가운데에 한 덩이로 세운다 ─── */
.lgf_res {flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; text-align:center;}
.lgf_res_ico {display:flex; align-items:center; justify-content:center; width:clamp(64px,18vw,72px); height:clamp(64px,18vw,72px); margin:0 auto; border-radius:50%; background:rgba(18,134,74,.18); color:#4ade9b;}
.lgf_res_ico svg {display:block; width:48%; height:48%;}
.lgf_res.is_fail .lgf_res_ico {background:rgba(217,83,79,.16); color:#ff8b87;}
.lgf_res_tit {margin:clamp(16px,5vw,20px) 0 0; font-size:clamp(20px,5.2vw,23px); font-weight:700; line-height:1.34; letter-spacing:-0.03em; word-break:keep-all;}
.lgf_res_sub {margin:10px 0 0; color:rgba(255,255,255,.6); font-size:13px; font-weight:400; line-height:1.6; letter-spacing:-0.01em; word-break:keep-all;}
/* 판별 값은 검토용이라 조용히 둔다 — 운영에서는 감출 수 있게 한 덩이로 묶었다 */
.lgf_rows {margin:clamp(18px,5vw,24px) 0 0; padding:4px clamp(15px,4vw,18px); border-radius:14px; background:rgba(255,255,255,.06); text-align:left;}
.lgf_row {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; color:rgba(255,255,255,.5); font-size:12.5px; font-weight:500; letter-spacing:-0.01em;}
.lgf_row + .lgf_row {border-top:1px solid rgba(255,255,255,.08);}
.lgf_row b {color:rgba(255,255,255,.92); font-weight:700;}

/* ── 버튼 — 시작하기 화면의 무게를 잇는다 ───────── */
.lgf_btns {flex:0 0 auto; margin-top:auto; padding-top:clamp(18px,5vw,28px);}
.lgf_btn {display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:58px; border:0; border-radius:17px;
          background:linear-gradient(180deg,#2a56e0 0%,#1b43c8 100%); color:#ffffff; font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-0.02em; text-decoration:none;
          box-sizing:border-box; box-shadow:0 10px 24px rgba(27,67,200,.32), inset 0 1px 0 rgba(255,255,255,.18); cursor:pointer; transition:transform .12s ease;}
.lgf_btn:active {transform:scale(.988);}
.lgf_btn svg {display:block; width:20px; height:20px;}
.lgf_btn:disabled {background:rgba(255,255,255,.14); color:rgba(255,255,255,.5); box-shadow:none; cursor:default;}
/* 물러날 버튼은 무게를 낮춘다 — 앞으로 갈 길이 주 동작이다 */
.lgf_btn.is_ghost {height:50px; border-radius:14px; background:rgba(255,255,255,.10); color:rgba(255,255,255,.86); font-size:13.5px; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.lgf_btn.is_ghost:hover {background:rgba(255,255,255,.16);}
/* 잠겨 있는 동안은 눌러도 되지 않는다는 것이 보이게 */
.lgf_btn.is_ghost:disabled {background:rgba(255,255,255,.05); color:rgba(255,255,255,.34); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); cursor:default;}
body.lgf.is_light .lgf_btn.is_ghost:disabled {background:#f4f6f9; color:#c3c6cc; box-shadow:inset 0 0 0 1px #eceef1;}
body.lgf.is_light .lgf_btn.is_ghost {background:#ffffff; color:#4b5059; box-shadow:inset 0 0 0 1px #e1e4e9;}
body.lgf.is_light .lgf_btn.is_ghost:hover {background:#f4f6f9;}
body.lgf.is_light .lgf_btn:disabled {background:#c9cfdb; color:#ffffff;}

/* 왜 등록하는지 — 선택 정보 · 얼굴 등록에서 원 아래에 크게 둔다.
   원 위에 두면 원이 아래로 밀려 작아지므로, 원을 먼저 보여 주고 이유를 그 아래에서 읽게 한다 */
.lgf_why {margin:clamp(18px,5vw,24px) 0 0; color:rgba(255,255,255,.94); font-size:clamp(17px,4.6vw,20px); font-weight:700;
          line-height:1.45; letter-spacing:-0.02em; text-align:center; word-break:keep-all;}
.lgf_why b {color:#8aa4ff; font-weight:700;}
body.lgf.is_light .lgf_why {color:#14161c;}
body.lgf.is_light .lgf_why b {color:#1b43c8;}
.lgf_why + .lgf_note {margin-top:clamp(8px,2.4vw,10px);}

/* 동의 문구가 버튼 묶음 안으로 들어오면 위 여백은 필요 없다 — 아래로만 띄운다.
   버튼과 너무 붙으면 같이 눌릴 것처럼 보여 한 뼘 띄운다 */
.lgf_btns .lgf_consent {margin:0 0 clamp(10px,2.0vw,19px);}

/* 동의는 눌러서 풀 수 있다(얼굴 등록 화면) — 버튼으로 만든 자리라 생김새만 되돌린다 */
button.lgf_consent {width:100%; padding:4px 0; border:0; background:none; font-family:inherit; cursor:pointer;}
/* 푸시면 체크가 사라지고 빈 네모만 남는다 — 지금 상태가 눈에 보여야 한다 */
.lgf_consent.is_off {color:rgba(255,255,255,.34);}
.lgf_consent.is_off .lgf_consent_ico {color:transparent; border-radius:4px; box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.34);}
body.lgf.is_light .lgf_consent.is_off {color:#b6bcc6;}
body.lgf.is_light .lgf_consent.is_off .lgf_consent_ico {box-shadow:inset 0 0 0 1.4px #c9cfdb;}

/* 얼굴 등록 화면에서는 두 버튼이 나란히 서므로 크기·글자를 맞춘다
   (얼굴 인식 화면의 물러나는 버튼은 작은 그대로 둔다) */
body.lgf.is_reg .lgf_btn.is_ghost, body.lgf.is_gate .lgf_btn.is_ghost {height:58px; border-radius:17px; font-size:16px; font-weight:700;}
/* 얼굴 인식(로그인) — 버튼이 둘로 늘어 사이를 조금 띄운다 */
body.lgf.is_gate .lgf_go {margin-bottom:15px;}

/* 동의 줄과 [내용보기] — 한 줄에 나란히 두고, 자세한 내용은 접었다 편다 */
.lgf_agree {display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:0 0 clamp(10px,2.6vw,13px);}
.lgf_agree .lgf_consent {width:auto; margin:0;}
.lgf_more {flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; padding:4px 2px; border:0; background:none;
           color:#8fb0ff; font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:-0.01em; cursor:pointer;}
.lgf_more_t {display:block;}
.lgf_more svg {display:block; width:11px; height:11px; transition:transform .18s;}
.lgf_more[aria-expanded="true"] svg {transform:rotate(180deg);}
body.lgf.is_light .lgf_more {color:#1b43c8;}
/* 펼친 내용 — display 를 가진 상자라 [hidden] 을 따로 적는다 */
.lgf_agree_d {margin:0 0 clamp(10px,2.6vw,13px); padding:11px 13px; border-radius:12px; background:rgba(255,255,255,.06); text-align:left;}
.lgf_agree_d[hidden] {display:none;}
.lgf_agree_d p {margin:0; color:rgba(255,255,255,.62); font-size:12px; line-height:1.6; letter-spacing:-0.01em; word-break:keep-all;}
body.lgf.is_light .lgf_agree_d {background:#f4f6f9;}
body.lgf.is_light .lgf_agree_d p {color:#6b7280;}

/* 동의를 푸시면 두 버튼의 무게가 뒤바뀐다 —
   카메라는 검게 가라앉고(누를 수 없다), 건너뛰는 길이 파랑이 된다 */
.lgf_btn.is_mute {background:#14161c; color:rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); cursor:default;}
.lgf_btn.is_mute:active {transform:none;}
body.lgf.is_light .lgf_btn.is_mute {background:#14161c; color:rgba(255,255,255,.62); box-shadow:none;}
.lgf_btn.is_ghost.is_key, body.lgf.is_light .lgf_btn.is_ghost.is_key {background:linear-gradient(180deg,#2a56e0 0%,#1b43c8 100%); color:#ffffff; font-weight:700;
                          box-shadow:0 10px 24px rgba(27,67,200,.30), inset 0 1px 0 rgba(255,255,255,.18);}

/* 카메라를 켜는 버튼 — 건너뛰는 버튼 바로 위에 둔다(주 동작이 아래에 모여 있어야 손이 간다).
   display 를 가진 상자라 [hidden] 이 안 먹으므로 따로 적어 둔다 */
.lgf_go {display:block; margin:0 0 9px;}
.lgf_go[hidden] {display:none;}


/* ============================================================
   얼굴 로그인 · 전화번호 입력 — login_01face_phoneNumber.html (body class="lgp")
   얼굴을 확인한 바로 다음 화면이다. 앞 화면(검정 바탕)에서 그대로 이어지도록 같은 결로 둔다.
   번호는 010 을 고정으로 세워 두고 뒤 여덟 자리만 받는다 — 오타가 날 자리를 줄인다.
   ============================================================ */
body.lgp {background:#0e1013; color:#ffffff;}
body.lgp #wrap {background:none;}
body.lgp .lg_header .inner {padding:0 24px;}
body.lgp .lg_bar_title {color:rgba(255,255,255,.92);}
body.lgp .lg_ico_btn {color:rgba(255,255,255,.92);}

.lgp_wrap {flex:1 1 auto; display:flex; flex-direction:column; padding:0 24px 22px;}

/* 앞 화면에서 넘어온 결과를 한 번 더 확인시켜 준다 — 얼굴은 이미 끝났다는 신호 */
.lgp_head {flex:0 0 auto; padding:clamp(12px,4vw,22px) 0 0; text-align:center;}
/* 얼굴 마크를 둥근 면에 앉히고 그 위에 체크를 얹는다 — 무엇이 끝났는지가 한눈에 읽히게 */
.lgp_check {position:relative; display:inline-flex; align-items:center; justify-content:center; width:clamp(84px,23vw,96px); height:clamp(84px,23vw,96px); border-radius:50%; background:#1b43c8; color:#ffffff; box-shadow:0 10px 24px rgba(27,67,200,.34);}
.lgp_check_face {display:block; width:56%; height:56%;}
/* 배지는 파란 면 위에 서므로 색을 뒤집는다 — 흰 원에 파란 체크 */
.lgp_check_ok {position:absolute; right:-2px; bottom:-2px; display:flex; align-items:center; justify-content:center; width:clamp(28px,7.6vw,32px); height:clamp(28px,7.6vw,32px); border-radius:50%; background:#ffffff; color:#1b43c8; box-shadow:0 0 0 3px #0e1013;}
.lgp_check_ok svg {display:block; width:58%; height:58%;}
.lgp_tit {margin:clamp(14px,4.4vw,18px) 0 0; font-size:clamp(20px,5.2vw,23px); font-weight:700; line-height:1.34; letter-spacing:-0.03em; word-break:keep-all;}

/* 번호 입력 — 키패드가 올라오면 아래쪽이 가려지므로 위쪽에 붙여 둔다 */
.lgp_form {flex:0 0 auto; margin-top:clamp(26px,8vw,36px);}
.lgp_label {margin:0 0 12px; color:rgba(255,255,255,.62); font-size:13px; font-weight:600; letter-spacing:-0.01em; word-break:keep-all;}
.lgp_tel {display:flex; align-items:center; gap:8px; height:clamp(56px,15vw,64px); border-bottom:1.5px solid rgba(255,255,255,.22); transition:border-color .2s;}
.lgp_tel:focus-within {border-bottom-color:#6b8dff;}
.lgp_pre, .lgp_sep {flex:0 0 auto; font-size:clamp(22px,6.4vw,28px); font-weight:700; letter-spacing:0.04em; line-height:1;}
.lgp_pre {color:rgba(255,255,255,.55);}
.lgp_sep {color:rgba(255,255,255,.28);}
.lgp_input {flex:1 1 auto; min-width:0; height:100%; padding:0; border:0; background:transparent; color:#ffffff; font-family:inherit; font-size:clamp(22px,6.4vw,28px); font-weight:700; letter-spacing:0.06em; text-align:left;}
/* 자리 안내 — 별표는 숫자보다 가늘어 보이니 굵기와 자간만 맞춘다 */
.lgp_input::placeholder {color:rgba(255,255,255,.24); font-weight:700; letter-spacing:.1em;}
.lgp_input:focus {outline:none;}
/* 지우기 — 한 글자씩 지우게 두지 않는다. 숫자가 하나라도 있을 때만 나타난다 */
.lgp_clear {display:none; flex:0 0 auto; align-items:center; justify-content:center; width:clamp(26px,7vw,30px); height:clamp(26px,7vw,30px); margin-left:6px; padding:0;
            border:0; border-radius:50%; background:rgba(255,255,255,.14); color:rgba(255,255,255,.72); cursor:pointer;}
.lgp_clear.is_on {display:flex;}
.lgp_clear svg {display:block; width:52%; height:52%;}
.lgp_clear:hover {background:rgba(255,255,255,.22); color:#ffffff;}
.lgp_clear:active {transform:scale(.94);}
.lgp_err {margin:12px 0 0; color:#ff8b87; font-size:12.5px; font-weight:500; line-height:1.5; word-break:keep-all;}
.lgp_err:empty {display:none;}
.lgp_note {margin:14px 0 0; color:rgba(255,255,255,.42); font-size:12px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; word-break:keep-all;}

/* 로그인 실패 알림 — 되돌아갈 두 길을 함께 준다.
   자동으로 로그인까지 가는 화면이라, 어긋났을 때 어디로 갈지가 분명해야 한다 */
body.lgp_pop_open {overflow:hidden;}
.lgp_pop {display:none; position:fixed; inset:0; z-index:1300; align-items:center; justify-content:center; padding:24px; background:rgba(6,8,12,.66);}
.lgp_pop.is_open {display:flex;}
.lgp_pop_card {width:100%; max-width:340px; padding:clamp(24px,7vw,28px) clamp(20px,5.6vw,24px) clamp(18px,5vw,22px); border-radius:20px; background:#ffffff; color:#14161c; text-align:center;
               box-shadow:0 24px 60px rgba(0,0,0,.34); opacity:0; transform:translateY(14px) scale(.98); transition:opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1);}
.lgp_pop.is_shown .lgp_pop_card {opacity:1; transform:translateY(0) scale(1);}
/* 실패 표시 — 앞 화면의 '얼굴을 확인했어요' 마크와 짜임을 맞춘다.
   원 안에 열쇠, 오른쪽 아래에 X 배지. 색만 파랑 -> 빨강으로 바꿔 결과가 뒤집힌 것을 보여 준다 */
.lgp_pop_ico {position:relative; display:flex; align-items:center; justify-content:center; width:clamp(64px,17vw,72px); height:clamp(64px,17vw,72px); margin:0 auto; border-radius:50%;
              background:#d9534f; color:#ffffff; box-shadow:0 8px 20px rgba(217,83,79,.26);}
.lgp_pop_ico > svg {display:block; width:52%; height:52%;}
.lgp_pop_x {position:absolute; right:-2px; bottom:-2px; display:flex; align-items:center; justify-content:center; width:clamp(26px,7vw,29px); height:clamp(26px,7vw,29px); border-radius:50%;
            background:#ffffff; color:#d9534f; box-shadow:0 0 0 3px #ffffff;}
.lgp_pop_x svg {display:block; width:52%; height:52%;}
/* 처음 오신 분 — 같은 짜임에 색만 브랜드 블루로. 실패가 아니라 맞이하는 자리다 */
.lgp_pop_ico.is_new {display:none; background:#1b43c8; box-shadow:0 8px 20px rgba(27,67,200,.28);}
.lgp_pop_ico.is_new .lgp_pop_x {color:#1b43c8;}
.lgp_pop.is_new .lgp_pop_ico.is_fail {display:none;}
.lgp_pop.is_new .lgp_pop_ico.is_new {display:flex;}
.lgp_pop_tel {color:#1b43c8; font-weight:700; letter-spacing:0.01em;}
.lgp_pop_tit {margin:clamp(13px,4vw,16px) 0 0; font-size:clamp(17px,4.4vw,19px); font-weight:700; line-height:1.35; letter-spacing:-0.025em; word-break:keep-all;}
.lgp_pop_sub {margin:9px 0 0; color:rgba(20,22,28,.62); font-size:13px; font-weight:400; line-height:1.6; letter-spacing:-0.01em; word-break:keep-all;}
/* 되돌아갈 두 길은 나란히 — 어느 쪽도 뒤로 밀리지 않게 폭을 반씩 나눈다 */
.lgp_pop_btns {display:flex; flex-direction:row; gap:9px; margin:clamp(18px,5vw,22px) 0 0;}
.lgp_pop_btn {display:flex; flex:1 1 0; min-width:0; align-items:center; justify-content:center; height:52px; padding:0 8px; border:0; border-radius:14px; white-space:nowrap;
              background:linear-gradient(180deg,#2a56e0 0%,#1b43c8 100%); color:#ffffff; font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-0.02em; text-decoration:none; box-sizing:border-box; cursor:pointer;}
.lgp_pop_btn.is_ghost {background:#ffffff; color:#1f2430; box-shadow:inset 0 0 0 1px #d8dde7;}
.lgp_pop_btn.is_ghost:hover {background:#f5f7fb;}
/* 세 번 이어서 어긋나면 — 같은 자리를 맴돌지 않도록 로그인 홈으로 나가는 길을 앞에 둔다 */
.lgp_pop_btn.is_home {display:none;}
.lgp_pop.is_limit .lgp_pop_btn.is_home {display:flex;}
.lgp_pop.is_limit .lgp_pop_btn.is_face {display:none;}
/* 나가는 길을 앞세우는 자리라 이때만 위아래로 세운다 */
.lgp_pop.is_limit .lgp_pop_btns {flex-direction:column;}
.lgp_pop.is_limit .lgp_pop_btn {flex:0 0 auto;}   /* 세로로 세울 때는 높이를 나눠 갖지 않게 */
.lgp_pop.is_limit .lgp_pop_btn.is_retry {background:#ffffff; color:#1f2430; box-shadow:inset 0 0 0 1px #d8dde7;}
.lgp_pop.is_limit .lgp_pop_btn.is_retry:hover {background:#f5f7fb;}
/* 처음 오신 분에게는 가입으로 가는 두 길만 보인다 */
.lgp_pop_btn.is_back, .lgp_pop_btn.is_code {display:none;}
.lgp_pop.is_new .lgp_pop_btn.is_back, .lgp_pop.is_new .lgp_pop_btn.is_code {display:flex;}
.lgp_pop.is_new .lgp_pop_btn.is_face, .lgp_pop.is_new .lgp_pop_btn.is_retry {display:none;}
.lgp_pop.is_new .lgp_pop_btn {padding:0 8px; font-size:clamp(13px,3.6vw,14px); line-height:1.3; text-align:center;
                              white-space:normal; word-break:keep-all;}   /* 좁은 화면에서는 두 줄로 접히게 둔다 */

/* 버튼 — 앞 화면과 같은 무게 */
.lgp_btns {flex:0 0 auto; margin-top:auto; padding-top:clamp(18px,5vw,28px);}
.lgp_btn {display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:58px; border:0; border-radius:17px;
          background:linear-gradient(180deg,#2a56e0 0%,#1b43c8 100%); color:#ffffff; font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-0.02em; text-decoration:none;
          box-sizing:border-box; box-shadow:0 10px 24px rgba(27,67,200,.32), inset 0 1px 0 rgba(255,255,255,.18); cursor:pointer; transition:transform .12s ease;}
.lgp_btn:active {transform:scale(.988);}
.lgp_btn svg {display:block; width:20px; height:20px;}
.lgp_btn:disabled {background:rgba(255,255,255,.12); color:rgba(255,255,255,.42); box-shadow:none; cursor:default;}


/* ============================================================
   회원가입 · 약관 동의 — login_06signup_terms.html (body class="lgn is_terms")
   입력 화면(lgn_)의 뼈대를 그대로 쓰고, 동의 목록과 전문 시트만 lgt_ 로 둔다.
   ============================================================ */
/* 한 번에 동의하는 자리 — 목록 위에 크게 둔다 */
/* 카드가 아니라 목록의 머리줄로 둔다 — 아래 실선으로만 가른다(담당자 지시) */
.lgt_all {display:flex; align-items:flex-start; gap:10px; width:100%; box-sizing:border-box;
          margin:clamp(40px,5vw,50px) 0 0; padding:0 2px clamp(13px,3.2vw,15px);
          border:0; border-bottom:1px solid rgba(20,30,60,.10); border-radius:0; background:none;
          font-family:inherit; text-align:left; cursor:pointer;}
.lgt_ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:21px; height:21px; margin-top:1px;
         border-radius:50%; background:none; color:#c3c8d4; box-shadow:inset 0 0 0 1.6px #dde1e8;}
.lgt_ic svg {display:block; width:14px; height:14px;}
.lgt_all.is_on .lgt_ic, .lgt_chk.is_on .lgt_ic {background:#1b43c8; color:#ffffff; box-shadow:none;}
.lgt_all_t {flex:1 1 auto; min-width:0; display:block; color:#14161c; font-size:15.5px; font-weight:700; letter-spacing:-0.02em;}
.lgt_all_t em {display:block; margin:4px 0 0; color:#8a90a0; font-size:11px; font-weight:300; font-style:normal; letter-spacing:-0.01em;}
.lgt_all_t em b {color:#1b43c8; font-weight:700;}

/* 항목 넷 */
.lgt_list {margin:clamp(6px,1.6vw,9px) 0 0; padding:0 2px; list-style:none;}
.lgt_item {display:flex; align-items:flex-start; gap:6px;}
.lgt_item + .lgt_item {margin-top:2px;}
.lgt_chk {flex:1 1 auto; min-width:0; display:flex; align-items:flex-start; gap:10px; padding:11px 0; border:0; background:none;
          font-family:inherit; text-align:left; cursor:pointer;}
.lgt_chk .lgt_ic {width:21px; height:21px; margin-top:1px; background:none; color:#c3c8d4; box-shadow:inset 0 0 0 1.6px #dde1e8;}
.lgt_chk.is_on .lgt_ic {color:#ffffff; box-shadow:none;}
.lgt_chk_t {flex:1 1 auto; min-width:0; display:block; color:#3f444d; font-size:14px; font-weight:500; line-height:1.45; letter-spacing:-0.02em; word-break:keep-all;}
.lgt_chk.is_on .lgt_chk_t {color:#14161c;}
/* 필수·선택 꼬리표 — 항목 이름 바로 뒤에 붙인다 */
.lgt_tag {margin-left:5px; color:#9aa0ab; font-size:12.5px; font-weight:400; font-style:normal;}
.lgt_tag.is_need {color:#1b43c8;}
.lgt_desc {display:block; margin:5px 0 0; color:#9aa0ab; font-size:12px; font-weight:400; line-height:1.5; letter-spacing:-0.01em;}
/* 동의를 거부할 권리와 거부해도 불이익이 없다는 사실 — 선택 항목에는 반드시 문장으로 적는다 */
.lgt_desc.is_right {margin-top:4px; color:#7a808c; font-weight:500;}
/* 전문 보러 가는 자리 */
.lgt_view {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:34px; height:44px; margin-top:1px;
           border:0; background:none; color:#b5bac4; cursor:pointer;}
.lgt_view svg {display:block; width:16px; height:16px;}
.lgt_view:hover {color:#6b7280;}

/* 전문 시트 — 아래에서 올라온다. display 를 가진 상자라 [hidden] 을 따로 적는다 */
.lgt_sheet {position:fixed; left:0; top:0; right:0; bottom:0; z-index:1300; display:flex; align-items:flex-end; justify-content:center;}
.lgt_sheet[hidden] {display:none;}
.lgt_dim {position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(16,20,30,.44); opacity:0; transition:opacity .2s;}
.lgt_sheet.is_show .lgt_dim {opacity:1;}
.lgt_panel {position:relative; z-index:1; display:flex; flex-direction:column; width:100%; max-width:520px; height:88vh; max-height:88vh;
            border-radius:22px 22px 0 0; background:#ffffff; overflow:hidden; transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.8,.3,1);}
/* 끌고 있는 동안은 손끝을 그대로 따라가야 하므로 전환을 끈다 */
.lgt_panel.is_drag {transition:none;}
.lgt_sheet.is_show .lgt_panel {transform:none;}
/* 머리 — 닫기 버튼 대신 끌어내리는 손잡이를 둔다.
   손잡이와 제목줄 어디를 잡아도 끌리며, touch-action:none 이라야 세로 스크롤에 먹히지 않는다 */
.lgt_head {flex:0 0 auto; touch-action:none; cursor:grab; user-select:none; box-shadow:inset 0 -1px 0 rgba(20,30,60,.07);}
.lgt_head:active {cursor:grabbing;}
.lgt_grip {display:flex; align-items:center; justify-content:center; height:22px;}
.lgt_grip span {display:block; width:42px; height:4px; border-radius:99px; background:#d9dee6;}
.lgt_top {position:relative; display:flex; align-items:center; justify-content:center; height:42px; padding:0 20px;}
.lgt_top_t {margin:0; color:#14161c; font-size:15px; font-weight:700; letter-spacing:-0.02em;}
.lgt_body {flex:1 1 auto; padding:18px 20px 24px; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.lgt_doc[hidden] {display:none;}
.lgt_doc p {margin:0 0 9px; color:#4b5059; font-size:13px; line-height:1.68; letter-spacing:-0.01em; word-break:keep-all;}
.lgt_doc p.is_tit {margin-top:16px; color:#14161c; font-weight:700;}
.lgt_doc hr {margin:14px 0; border:0; border-top:1px solid rgba(20,30,60,.08);}
.lgt_btm {flex:0 0 auto; padding:12px 20px calc(14px + env(safe-area-inset-bottom)); box-shadow:inset 0 1px 0 rgba(20,30,60,.07);}
@media (prefers-reduced-motion: reduce) {
  .lgt_dim, .lgt_panel {transition:none;}
}
@media (min-width:1024px) {
  .lgt_sheet {align-items:center;}
  .lgt_panel {height:78vh; border-radius:22px;}
}

/* ============================================================
   반응형 — 하단 일괄

   기기별로 주인공을 바꾼다. 모바일은 얼굴 인증이, PC 는 크루 혜택이 주인공이다.
   PC 에는 얼굴 인증이 아예 없으므로 버튼뿐 아니라 얼굴을 가리키는 문구도 한 줄도 남기지 않는다 —
   쓸 수 없는 기능을 설명해 두면 찾다가 헤맬 뿐이다.
   ============================================================ */
/* ============================================================
   전화번호로 시작하기 · 전화번호 입력 — lgn_
   login_02phone_numberEntry.html (body class="lgn")

   운영 화면은 밑줄 한 줄에 010-****-**** 를 얹는 방식이다.
   2.0 은 로그인 홈(B안)에서 쓰는 규칙 — 얇고 큰 카피 · 핵심만 파랑 볼드 ·
   옅은 격자와 빛 · 판(카드)으로 세운 입력 — 을 그대로 이어 받는다.
   별표 대신 여덟 칸을 두어 채워지는 모습이 그대로 보이고,
   지금 들어갈 자리는 파란 밑줄이 깜빡여 알려 준다(투명 입력 칸이라 커서가 안 보이는 것도 이것으로 해결된다).
   ============================================================ */
body.lgn {background:#f4f6fa; color:#14161c;}
body.lgn .lg_header .inner {padding:0 24px;}
body.lgn .lg_bar_title {color:#14161c;}
body.lgn .lg_ico_btn {color:#14161c;}

.lgn_wrap {position:relative; flex:1 1 auto; display:flex; flex-direction:column; padding:0 24px 22px;}
.lgn_stage {position:relative; z-index:1; flex:1 1 auto; display:flex; flex-direction:column;}

/* 카피 — 얇게 크게, 핵심만 파랑 볼드.
   ※ 단계 표시(STEP 1/2)는 두지 않는다 — 이 화면은 로그인과 회원가입이 함께 쓰므로 단계 수가 고정되지 않는다 */
.lgn_copy {margin:clamp(20px,6vw,30px) 0 0; font-size:clamp(25px,6.9vw,29px); font-weight:200; line-height:1.34; letter-spacing:-0.035em; word-break:keep-all;}
.lgn_copy b {color:#1b43c8; font-weight:700; letter-spacing:-0.04em;}
/* 두 줄에 담아야 하는 긴 문구용 — 생년월일 입력처럼 둘째 줄이 긴 화면에서 쓴다 */
.lgn_copy.is_sm {font-size:clamp(22px,6.1vw,26px);}

/* 입력 — 판을 두르지 않는다. 번호 자체가 화면의 주인공이 되게 한 줄로 크게 세우고,
   아래 선 하나만 둔다. 커서는 숨기고(표시와 두 번 겹치지 않게) 파란 막대로 지금 자리를 알려 준다 */
.lgn_field {position:relative; margin:clamp(28px,8vw,42px) 0 0;}
/* 번호를 가운데 세우되, 오른쪽 지우기 버튼 쪽에 여백을 더 준다.
   좌우를 똑같이 두면 좁은 화면에서 번호 끝이 버튼에 닿는다 —
   정확한 가운데보다 안 닿는 것이 낫다(담당자 확인) */
.lgn_row {position:relative; display:flex; align-items:baseline; justify-content:center; gap:7px;
          padding:0 clamp(46px,13vw,56px) 0 clamp(16px,5vw,24px);}
.lgn_pre {flex:0 0 auto; color:#a8aeb9; font-size:clamp(26px,7.4vw,32px); font-weight:700; letter-spacing:0.01em; line-height:1.1;}
.lgn_num {flex:0 1 auto; min-width:0; display:flex; align-items:baseline; gap:1px; height:clamp(29px,8.2vw,36px);
          font-size:clamp(28px,8vw,35px); font-weight:700; letter-spacing:0.02em; line-height:1.1;}
.lgn_num i {font-style:normal;}
/* 두 하이픈(010 뒤 · 네 자리 뒤)은 크기가 같아야 한다.
   번호 줄 안에 있는 것은 숫자 크기를 물려받지만, 010 뒤의 것은 줄에서 물려받아 작아지므로 여기서 못 박는다 */
.lgn_hy {flex:0 0 auto; padding:0 4px; color:#b7bdc8; font-size:clamp(28px,8vw,35px); font-weight:700; line-height:1.1;}
/* 지금 들어갈 자리 — 커서 대신 이 막대가 깜빡인다 */
.lgn_caret {flex:0 0 auto; display:inline-block; width:2.5px; height:clamp(26px,7.4vw,32px); margin-left:2px; border-radius:2px; background:#1b43c8;
            align-self:center; animation:lgn_caret 1.05s steps(2,end) infinite;}
@keyframes lgn_caret {50% {opacity:.16;}}
@media (prefers-reduced-motion:reduce) {.lgn_caret {animation:none;}}
.lgn_line {height:1.5px; margin:14px 0 0; border-radius:2px; background:#d5dae2; transition:background-color .2s;}
.lgn_field.is_focus .lgn_line {background:#1b43c8;}
.lgn_field.is_err .lgn_line {background:#d9534f;}
/* 실제 입력 칸 — 번호 줄 위를 투명하게 덮어 어디를 눌러도 초점이 온다 */
.lgn_input {position:absolute; left:0; top:-6px; z-index:1; width:100%; height:calc(100% + 12px); margin:0; padding:0; border:0; border-radius:0;
            background:transparent; color:transparent; caret-color:transparent; font-family:inherit; font-size:16px;
            -webkit-appearance:none; appearance:none;}
.lgn_input::placeholder {color:transparent;}
.lgn_input:focus {outline:none;}
/* 지우기 — 번호 줄 오른쪽 끝. 숫자가 있을 때만 나타나고, 입력 칸보다 위에 있어야 눌린다 */
.lgn_clear {position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:2; display:none; align-items:center; justify-content:center;
            width:28px; height:28px; padding:0; border:0; border-radius:50%; background:#e4e8ef; color:#6b7280; cursor:pointer;}
.lgn_clear.is_on {display:flex;}
.lgn_clear svg {display:block; width:52%; height:52%;}
.lgn_clear:hover {background:#d7dce5; color:#2c313a;}
.lgn_clear:active {transform:translateY(-50%) scale(.94);}

.lgn_err {margin:12px 2px 0; color:#d64541; font-size:12.5px; font-weight:500; line-height:1.5; word-break:keep-all;}
.lgn_err:empty {display:none;}
.lgn_note {margin:13px 2px 0; color:#9aa0ab; font-size:12px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; word-break:keep-all;}

/* 하단 — 로그인 홈의 주 버튼과 같은 무게 */
.lgn_foot {position:relative; z-index:1; flex:0 0 auto; margin-top:auto; padding-top:26px;}
/* 고르신 뒤에는 건너뛰는 버튼을 감춘다 — 이미 답을 주셨는데 '다음에 할게요' 가 남아 있으면 헷갈린다.
   자리는 그대로 두고 보이기만 지워 화면이 덜컥 움직이지 않게 한다 */
.lgn_foot.is_hide {opacity:0; visibility:hidden;}
.lgn_foot {transition:opacity .18s, visibility .18s;}
@media (prefers-reduced-motion: reduce) {
  .lgn_foot {transition:none;}
}
.lgn_btn {display:flex; align-items:center; justify-content:center; width:100%; height:58px; border:0; border-radius:17px;
          background:linear-gradient(180deg,#2a56e0 0%,#1b43c8 100%); color:#ffffff; font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-0.02em;
          box-sizing:border-box; box-shadow:0 10px 24px rgba(27,67,200,.32), inset 0 1px 0 rgba(255,255,255,.18); cursor:pointer; transition:transform .12s ease;}
.lgn_btn:active {transform:scale(.988);}
.lgn_btn:disabled {background:#e4e7ee; color:#a9b0bc; box-shadow:none; cursor:default;}
.lgn_btn:disabled:active {transform:none;}
.lgn_other {display:block; margin:14px auto 0; padding:6px 4px; border:0; background:transparent; color:#8a8f99; font-family:inherit; font-size:12.5px; font-weight:500;
            letter-spacing:-0.01em; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.lgn_other:hover {color:#5b616c;}

/* ============================================================
   전화번호로 시작하기 · 인증번호 입력/확인 — lgv_
   login_02phone_verificationCode.html (body class="lgn lgv")

   앞 화면(전화번호 입력)과 한 쌍이라 뼈대·번호 줄·버튼은 lgn_ 을 그대로 쓰고,
   이 화면에만 있는 것(보낸 번호 · 남은 시간 · 재전송 · 알림)만 여기에 둔다.

   ※ 인증번호 칸을 여섯 개로 쪼개지 않는다 —
     쪼개면 iOS 의 문자 자동 채우기(autocomplete="one-time-code")가 동작하지 않는다.
     한 칸으로 받고 화면에만 여섯 자리로 나눠 보여 준다.
   ============================================================ */
.lgv_sent {margin:12px 0 0; color:#6b7280; font-size:13.5px; font-weight:500; line-height:1.55; letter-spacing:-0.01em;}
.lgv_sent b {color:#14161c; font-weight:700; letter-spacing:0.01em;}

/* 여섯 자리 — 오른쪽에 남은 시간과 지우기가 함께 서므로 번호 화면보다 조금 작게 잡는다.
   그러지 않으면 좁은 화면에서 숫자가 그 둘과 맞닿는다 */
.lgn_num.is_code {font-size:clamp(28px,8.6vw,36px); gap:clamp(2px,0.8vw,4px); letter-spacing:0.01em;}
.lgn_num.is_code .lgn_caret {height:clamp(25px,7.6vw,32px);}
/* 오른쪽 묶음(남은 시간 + 지우기)만큼 양쪽을 비워 가운데를 맞춘다 */
.lgn_row.is_code {padding:0 92px;}
/* 생년월일 여덟 자리 — 앞자리(010) 가 없어 좌우가 대칭이다.
   1990 - 05 - 21 처럼 하이픈 둘이 끼므로 인증번호보다 글자를 조금 줄인다 */
.lgn_row.is_date {padding:0 clamp(44px,12vw,54px);}
.lgn_num.is_date {font-size:clamp(24px,6.8vw,31px); gap:0;}
.lgn_num.is_date .lgn_hy {font-size:clamp(24px,6.8vw,31px); padding:0 3px;}
/* 입력 칸 위 라벨 — 무엇을 넣는 자리인지 한 줄로 */
.lgn_label {display:block; margin:clamp(26px,7vw,34px) 0 0; color:#636975; font-size:13px; font-weight:500; letter-spacing:-0.01em; text-align:center;}
.lgn_label + .lgn_field {margin-top:clamp(12px,3.5vw,16px);}
/* 아직 안 넣으셨을 때 보이는 자리 안내 */
.lgn_ph {color:#c3c8d4; font-weight:700; letter-spacing:0.01em;}

/* ── 둘 중 고르기 ─────────────────────────────
   성별처럼 값을 쓰지 않고 고르기만 하는 자리. 라벨·안내문은 입력 화면과 같은 것을 쓴다.
   고르면 그 자리에서 저장되고 인사 팝업(.lgn_pop)이 잠깐 떴다가 다음 화면으로 넘어간다 */
.lgn_pick {display:flex; flex-direction:column; gap:9px; margin:clamp(12px,3.5vw,16px) 0 0;}
.lgn_pick_b {position:relative; flex:0 0 auto; width:100%; min-width:0; display:flex; align-items:center; justify-content:center;
             height:58px; padding:0; box-sizing:border-box; border:0; border-radius:14px;
             background:#ffffff; color:#3f444d; font-family:inherit; font-size:clamp(15px,4.2vw,16px); font-weight:700; letter-spacing:-0.015em;
             box-shadow:inset 0 0 0 1px rgba(20,30,60,.10), 0 6px 16px rgba(15,25,60,.04);
             transition:box-shadow .15s, color .15s;}
.lgn_pick_b:hover {box-shadow:inset 0 0 0 1px rgba(20,30,60,.18), 0 6px 16px rgba(15,25,60,.06);}
.lgn_pick_b:active {transform:scale(.99);}
.lgn_pick_b.is_on {color:#1b43c8; box-shadow:inset 0 0 0 1.6px #1b43c8, 0 8px 20px rgba(27,67,200,.12);}
.lgn_pick_t {display:block;}
/* 고른 표시 — 오른쪽 끝 작은 체크 */
.lgn_pick_c {position:absolute; right:14px; top:50%; transform:translateY(-50%); display:none; width:17px; height:17px; color:#1b43c8;}
.lgn_pick_b.is_on .lgn_pick_c {display:block;}

/* ── 고맙다는 인사 팝업 ───────────────────────
   고르시면 그대로 저장되므로 [확인] 버튼을 두지 않았다.
   인사만 1.4초 띄우고 스스로 사라지며 다음 화면으로 넘어간다.
   display 를 가진 상자라 [hidden] 이 안 먹으므로 보임/숨김은 opacity+visibility 로 다룬다 */
.lgn_pop {position:fixed; left:0; top:0; right:0; bottom:0; z-index:1300;
          display:flex; align-items:center; justify-content:center;
          /* 아래 여백을 20vh 더 줘서 판의 가운데가 화면 위에서 40% 자리에 온다(원래는 50%) */
          padding:20px 20px calc(20vh + 20px);
          background:rgba(16,20,30,.42); opacity:0; visibility:hidden;
          transition:opacity .18s, visibility .18s;}
.lgn_pop.is_show {opacity:1; visibility:visible;}
.lgn_pop_in {width:100%; max-width:262px; padding:26px 22px 24px; box-sizing:border-box;
             border-radius:20px; background:#ffffff; text-align:center;
             box-shadow:0 20px 44px rgba(10,18,40,.22);
             transform:translateY(8px) scale(.98); transition:transform .22s cubic-bezier(.2,.8,.3,1);}
.lgn_pop.is_show .lgn_pop_in {transform:none;}
.lgn_pop_ic {display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 auto;
             border-radius:50%; background:rgba(27,67,200,.08); color:#1b43c8;}
.lgn_pop_ic svg {width:26px; height:26px;}
.lgn_pop_t {margin:14px 0 0; color:#14161c; font-size:16px; font-weight:700; letter-spacing:-0.02em;}
.lgn_pop_d {margin:7px 0 0; color:#8a90a0; font-size:12.5px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; word-break:keep-all;}
@media (prefers-reduced-motion: reduce) {
  .lgn_pop, .lgn_pop_in {transition:none;}
}
/* 별표는 글자 윗쪽에 그려져 baseline 에 맞추면 떠 보인다 — 숫자 높이로 내려 준다.
   생년월일 자리 안내(YYYY.MM.DD)는 보통 글자라 그대로 둔다 */
.lgn_num .lgn_ph {display:inline-block; transform:translateY(.28em); letter-spacing:.08em;}
.lgn_num.is_date .lgn_ph {transform:none; letter-spacing:.01em;}
/* 묶음 안에 들어가면 절대배치가 필요 없다 */
.lgv_right .lgn_clear {position:static; transform:none; margin:0;}
.lgv_right .lgn_clear:active {transform:scale(.94);}

.lgv_timer {flex:0 0 auto; color:#d64541; font-size:13.5px; font-weight:700; letter-spacing:0.01em; font-variant-numeric:tabular-nums;}
.lgv_timer.is_over {color:#9aa0ab;}

/* 입력 줄 위 라벨 — 운영 화면의 "문자를 확인하세요!" 자리 */
/* 회색이지만 13px 안내라 대비를 지킨다(#f4f6fa 바탕에서 5.1:1) */
.lgv_label {display:block; margin:clamp(26px,7vw,36px) 0 0; color:#636975; font-size:13px; font-weight:500; letter-spacing:-0.01em; text-align:center;}
.lgv_label + .lgn_field {margin-top:clamp(10px,3vw,14px);}

/* 남은 시간과 지우기는 번호 줄 오른쪽에 나란히 */
.lgv_right {position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:8px; z-index:2;}

/* 재전송 — 문자가 늦게 오는 일이 흔하다. 늘 보이지만 몇 초 뒤부터 눌린다.
   시간이 지나면 이게 유일한 다음 행동이라 파랗게 도드라진다 */
.lgv_resend {display:flex; align-items:center; justify-content:center; gap:8px; margin:clamp(18px,5vw,24px) 0 0;}
.lgv_resend_t {color:#9aa0ab; font-size:12.5px; font-weight:400; letter-spacing:-0.01em;}
.lgv_resend_b {padding:6px 13px; border:0; border-radius:999px; background:#e8ebf2; color:#4b5059; font-family:inherit; font-size:12.5px; font-weight:700;
               letter-spacing:-0.01em; cursor:pointer;}
.lgv_resend_b:hover {background:#dde1ea; color:#2c313a;}
.lgv_resend_b:disabled {background:#f1f3f7; color:#b6bcc7; cursor:default;}
.lgv_resend_b.is_hot {background:#1b43c8; color:#ffffff; box-shadow:0 6px 16px rgba(27,67,200,.28);}
.lgv_resend_b.is_hot:hover {filter:brightness(1.05);}

/* 알림 — 처음 오신 분 안내 / 잠금. 전화번호 확인 화면(lgp_pop)과 같은 규격 */
/* 알림 — 여러 번 이어서 맞지 않았을 때 재전송으로 이끄는 안내.
   계정을 잠그지는 않는다 — 문자가 늦게 오거나 앞 번호를 넣는 일이 흔해서다 */
body.lgv_pop_open {overflow:hidden;}
.lgv_pop {display:none; position:fixed; inset:0; z-index:1300; align-items:center; justify-content:center; padding:24px; background:rgba(6,8,12,.5);}
.lgv_pop.is_open {display:flex;}
.lgv_pop_card {width:100%; max-width:340px; padding:clamp(24px,7vw,28px) clamp(20px,5.6vw,24px) clamp(18px,5vw,22px); border-radius:20px; background:#ffffff; color:#14161c; text-align:center;
               box-shadow:0 24px 60px rgba(20,30,60,.28); opacity:0; transform:translateY(14px) scale(.98); transition:opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1);}
.lgv_pop.is_shown .lgv_pop_card {opacity:1; transform:translateY(0) scale(1);}
.lgv_pop_ico {position:relative; display:flex; align-items:center; justify-content:center; width:clamp(64px,17vw,72px); height:clamp(64px,17vw,72px); margin:0 auto; border-radius:50%;
              background:#d9534f; color:#ffffff; box-shadow:0 8px 20px rgba(217,83,79,.26);}
.lgv_pop_ico > svg {display:block; width:52%; height:52%;}
.lgv_pop_x {position:absolute; right:-2px; bottom:-2px; display:flex; align-items:center; justify-content:center; width:clamp(26px,7vw,29px); height:clamp(26px,7vw,29px); border-radius:50%;
            background:#ffffff; color:#d9534f; box-shadow:0 0 0 3px #ffffff;}
.lgv_pop_x svg {display:block; width:52%; height:52%;}
.lgv_pop_tit {margin:clamp(13px,4vw,16px) 0 0; font-size:clamp(17px,4.4vw,19px); font-weight:700; line-height:1.35; letter-spacing:-0.025em; word-break:keep-all;}
.lgv_pop_sub {margin:9px 0 0; color:rgba(20,22,28,.62); font-size:13px; font-weight:400; line-height:1.6; letter-spacing:-0.01em; word-break:keep-all;}
.lgv_pop_btns {display:flex; flex-direction:row; gap:9px; margin:clamp(18px,5vw,22px) 0 0;}
.lgv_pop_btn {display:flex; flex:1 1 0; min-width:0; align-items:center; justify-content:center; height:52px; padding:0 8px; border:0; border-radius:14px;
              background:linear-gradient(180deg,#2a56e0 0%,#1b43c8 100%); color:#ffffff; font-family:inherit; font-size:clamp(13px,3.6vw,14px); font-weight:700; line-height:1.3;
              letter-spacing:-0.02em; text-align:center; white-space:normal; word-break:keep-all; box-sizing:border-box; cursor:pointer;}
.lgv_pop_btn.is_ghost {background:#ffffff; color:#1f2430; box-shadow:inset 0 0 0 1px #d8dde7;}
.lgv_pop_btn.is_ghost:hover {background:#f5f7fb;}

/* 보조 주버튼 — 주 버튼과 같은 크기에 흰 바탕. 두 갈래를 나란히 세울 때 쓴다 */
.lgn_btn.is_sub {margin-top:10px; background:#ffffff; color:#3f444d; box-shadow:inset 0 0 0 1px rgba(20,30,60,.12);}
.lgn_btn.is_sub:hover {background:#f5f7fb;}

/* ============================================================
   카카오로 시작하기 · 카카오 웹/로그인 — lgk_
   login_03kakaop_webJoin.html (body class="lgn")

   카카오 로그인 창 자체는 카카오가 띄우는 외부 화면이라 퍼블리싱할 것이 없다.
   이 화면은 그 앞뒤를 잇는 자리로, 돌아온 뒤 갈 두 갈래만 둔다.
   ============================================================ */
.lgk_stage {flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-bottom:clamp(20px,7vw,40px);}
.lgk_mark {display:flex; align-items:center; justify-content:center; width:clamp(80px,15vw,100px); height:clamp(80px,15vw,100px); border-radius:50%;
           background:#fee500; color:#191600; box-shadow:0 14px 34px rgba(196,178,0,.28);}
.lgk_mark svg {display:block; width:52%; height:52%;}
.lgk_copy {margin:clamp(22px,6vw,30px) 0 0; font-size:clamp(25px,6.9vw,29px); font-weight:200; line-height:1.34; letter-spacing:-0.035em; word-break:keep-all;}
.lgk_copy b {color:#1b43c8; font-weight:700; letter-spacing:-0.04em;}
.lgk_lead {margin:13px 0 0; color:#878d99; font-size:13.5px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; word-break:keep-all;}

/* ============================================================
   완료 화면 — lgc_
   login_05login_complete.html (로그인 완료)
   login_07signup_complete.html (회원가입 완료)

   앞 화면들과 뼈대(lgn_)를 함께 쓰고, 두 완료 화면이 같은 모습이도록
   마크·문구 규격을 여기 한곳에 둔다. 회원가입 쪽에만 붙는 혜택 판은 lgs_ 에 있다.
   ============================================================ */
.lgc_stage {flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-bottom:clamp(20px,7vw,40px);}
/* 완료 마크 — 얼굴 확인 마크와 같은 짜임(원 + 글리프 + 배지) */
.lgc_mark {position:relative; display:flex; align-items:center; justify-content:center; width:80px; height:80px; border-radius:50%;
           background:#1b43c8; color:#ffffff; box-shadow:0 14px 34px rgba(27,67,200,.30);}
.lgc_mark > svg {display:block; width:52%; height:52%;}
.lgc_copy {margin:clamp(22px,6vw,30px) 0 0; font-size:clamp(25px,6.9vw,29px); font-weight:200; line-height:1.34; letter-spacing:-0.035em; word-break:keep-all;}
.lgc_copy b {color:#1b43c8; font-weight:700; letter-spacing:-0.04em;}
.lgc_lead {margin:13px 0 0; color:#878d99; font-size:13.5px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; word-break:keep-all;}

/* ============================================================
   회원가입 완료 — lgs_
   login_07signup_complete.html (body class="lgn")

   화면 짜임은 로그인 완료와 같다(lgn_ 뼈대 + lgc_ 마크·문구).
   여기에는 회원가입에만 붙는 것 — 지급된 혜택 판 — 만 둔다.
   ============================================================ */
/* 혜택 판 — 밝은 바탕 위의 흰 카드. 지급이 '끝난 일'로 읽혀야 해서 완료 표시를 함께 둔다.
   회원가입 완료와 로그인 완료(오랜만에 오신 분) 두 화면이 함께 쓴다 */
.lgs_gift {width:100%; max-width:360px; margin:clamp(22px,7vw,28px) auto 0; padding:15px 17px 14px; box-sizing:border-box;
           border-radius:16px; background:#ffffff; text-align:left;
           box-shadow:inset 0 0 0 1px rgba(20,30,60,.07), 0 8px 22px rgba(15,25,60,.05);}
.lgs_gift_t {display:flex; align-items:center; gap:7px; margin:0 0 11px; color:#14161c; font-size:13.5px; font-weight:700; letter-spacing:-0.015em;}
.lgs_gift_t svg {flex:0 0 auto; display:block; width:16px; height:16px; color:#1b43c8;}
.lgs_gift_ul {margin:0; padding:0; list-style:none;}
.lgs_gift_li {display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:7px 0;}
.lgs_gift_li + .lgs_gift_li {border-top:1px solid #eef0f5;}
.lgs_gift_n {color:#6b7280; font-size:13px; font-weight:400; letter-spacing:-0.01em;}
.lgs_gift_v {color:#14161c; font-size:14px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap;}
/* 선물 판 안의 말풍선·버튼 — 권유 판 것을 그대로 쓰고 목록과의 간격만 준다.
   말풍선이 앞에 서면 그 아래 여백이 이미 있으므로 버튼은 붙인다 */
.lgs_gift .lgc_task_b {margin-top:14px;}
.lgs_gift .lgc_task_rw + .lgc_task_b {margin-top:0;}
/* 안내문 — 혜택 판 밖. 선물을 어디서 꺼내 쓰는지 알려 주는 말이라 판 아래에 가운데로 둔다 */
.lgs_note {width:100%; max-width:360px; margin:clamp(14px,4vw,18px) auto 0; color:#9aa0ac; font-size:12px; font-weight:400;
           line-height:1.65; letter-spacing:-0.01em; text-align:center; word-break:keep-all;}
/* '마이페이지' 강조 — 지금은 링크가 없어 색·굵기만. 주소가 붙으면 a 에도 같은 모습이 적용된다 */
.lgs_note b, .lgs_note a {color:#5b6474; font-weight:700;}
/* 권유 한 벌(판 + 판 밖 안내) — 판이 마크업에 다 있고 하나만 남는다.
   ※ 부모(.lgc_stage)가 align-items:center 인 세로 flex 라, 폭을 주지 않으면
     이 한 벌이 '내용 폭' 으로 쪼그라들어 안의 판까지 좁아진다 — width:100% 를 꼭 준다.
   display 를 들고 있으면 [hidden] 이 안 먹으므로 접는 규칙도 따로 적는다 */
.lgc_offer {display:block; width:100%;}
.lgc_offer[hidden] {display:none;}

/* ── 아직 안 해 두신 것 ─────────────────────
   로그인 완료에서 늘 오시는 분에게 보여 준다.
   여러 개를 늘어놓으면 숙제처럼 보이고 어느 것도 하지 않는다 — 한 번에 하나만 권하고,
   그것을 하면 무엇을 받는지(혜택)를 반드시 함께 적는다.
   판의 짜임은 회원가입 완료의 혜택 판과 같게 — 제목 앞에 작은 아이콘 하나 */
.lgc_task {width:100%; max-width:360px; margin:clamp(22px,7vw,28px) auto 0; padding:16px 17px 15px; box-sizing:border-box;
           border-radius:16px; background:#ffffff; text-align:left;
           box-shadow:inset 0 0 0 1px rgba(20,30,60,.07), 0 8px 22px rgba(15,25,60,.05);}
.lgc_task_t {display:flex; align-items:center; gap:7px; margin:0; color:#14161c; font-size:13.5px; font-weight:700; letter-spacing:-0.015em; word-break:keep-all;}
.lgc_task_t svg {flex:0 0 auto; display:block; width:16px; height:16px; color:#1b43c8;}
.lgc_task_d {margin:9px 0 0; color:#8a90a0; font-size:12.5px; font-weight:400; line-height:1.55; letter-spacing:-0.01em; word-break:keep-all;}
/* 혜택 — 버튼 바로 위에 뜬 말풍선. 가만히 있으면 그냥 문구지만,
   살짝 떠다니면 '지금 이걸 누르면 받는다' 는 말로 읽힌다.
   움직임을 반기지 않는 분에게는 아래 미디어쿼리에서 멈춰 둔다 */
.lgc_task_rw {position:relative; z-index:2; display:block; width:-moz-fit-content; width:fit-content; margin:16px auto 3px; padding:5px 11px;
              border-radius:10px; background:#14161c; color:rgba(255,255,255,.88); font-size:11.5px; font-weight:500;
              letter-spacing:-0.01em; text-align:center; white-space:nowrap;
              box-shadow:0 8px 18px rgba(15,20,35,.22);
              animation:lgc_float 2.6s ease-in-out infinite;}
.lgc_task_rw b {color:#ffffff; font-weight:700;}
/* 말풍선 꼬리 — 아래 가운데 */
.lgc_task_rw::after {content:""; position:absolute; left:50%; bottom:-4px; z-index:-1; width:10px; height:10px; margin-left:-5px;
                     background:#14161c; border-radius:2px; transform:rotate(45deg);}
/* 떠 있는 폭을 3px 로 둔다 — 이보다 크면 꼬리가 버튼에서 떨어져 보인다 */
@keyframes lgc_float {
  0%, 100% {transform:translateY(0);}
  50% {transform:translateY(-3px);}
}
@media (prefers-reduced-motion: reduce) {
  .lgc_task_rw {animation:none;}
}
/* 버튼 — 판이 흰 카드라 버튼도 흰색으로 두고 회색 테두리로만 구분한다 */
.lgc_task_b {display:flex; align-items:center; justify-content:center; width:100%; height:46px; margin:0; box-sizing:border-box;
             border-radius:13px; background:#ffffff; color:#14161c; font-size:14px; font-weight:700; letter-spacing:-0.015em; text-decoration:none;
             box-shadow:inset 0 0 0 1px rgba(20,30,60,.14); transition:background-color .15s;}
.lgc_task_b:hover {background:#f5f7fb;}
.lgc_task_b:active {transform:scale(.99);}

.lgs_note a {color:#1b43c8; text-decoration:underline; text-underline-offset:2.5px; text-decoration-thickness:1px;}

@media (min-width:1024px) {
  .lg_only_mo {display:none;}
  .lg_only_pc {display:block;}

  /* ── 자주 묻는 질문 팝업 ─────────────────────
     넓은 화면까지 통째로 덮으면 과하다 — 가운데 카드로 줄여 앉힌다 */
  .lg_pop {display:none; align-items:center; justify-content:center; padding:40px 24px;}
  .lg_pop.is_open {display:flex;}
  .lg_pop_inner {width:100%; max-width:640px; height:auto; max-height:100%; border-radius:20px; overflow:hidden; box-shadow:0 26px 60px rgba(6,14,45,.34);}
  .lg_pop_body {padding:16px 20px 24px;}

  /* ── 시안 A ─────────────────────────────────
     PC 는 위아래로 나눈 모바일 구조를 그대로 세우지 않는다.
     브랜드 면은 화면 전체 바탕으로 두고, 문구와 카드를 가운데에 띄운다 */
  body.lga #wrap {overflow:visible;}
  body.lga #contents {align-items:center; justify-content:center; padding:20px 24px 76px;}
  /* 머리는 화면 맨 위에 그대로 붙는다 */
  body.lga .lg_header {position:fixed; left:0; right:0; top:0;}
  /* 배경 노릇을 #wrap 이 가져갔으므로 이 면은 문구를 담는 그릇만 남는다 */
  .lga_top {flex:0 0 auto; width:420px; padding:0; text-align:center;}
  .lga_brand {margin-top:0;}
  /* 카드 — 화면 가운데에 떠 있게 */
  .lga_sheet {flex:0 0 auto; width:420px; margin:28px 0 0; padding:26px 26px 20px; border-radius:24px;
              box-shadow:0 26px 60px rgba(6,14,45,.40);}
  .lga_btn_face {display:none;}
  /* 얼굴 버튼이 빠지면 그 자리의 위 여백만 남아 카드 안이 붕 뜬다 — 첫 버튼은 붙여 둔다 */
  .lga_btn_face + .lga_btn {margin-top:0;}
  /* 전화번호는 PC 에서 흰 버튼 — 모바일의 잉크색과 반대로 간다 */
  .lga_btn_phone {background:#ffffff; color:#14161c; box-shadow:inset 0 0 0 1px #e4e6ec;}
  .lga_btn_phone:hover {background:#f4f6f9;}

  /* 얼굴 로그인 전화번호 입력도 같은 폭으로 */
  .lgp_wrap {max-width:468px; margin:0 auto;}

  /* ── 얼굴 인식 ─────────────────────────────
     넓은 화면에서 폭을 그대로 늘리면 원과 버튼이 팔뚝만큼 커진다 — 한 단으로 묶어 가운데 세운다 */
  .lgf_wrap {max-width:468px; margin:0 auto;}

  /* ── 시안 B ─────────────────────────────────
     얼굴이 주인공인 화면이라 마크 · 카피 · CTA 가 모두 얼굴 이야기다.
     PC 에서는 그 묶음을 통째로 내리고 PC 용 문구를 대신 세운다 */
  .lgb_face, .lgb_copy, .lgb_lead, .lgb_btn_face {display:none;}
  .lgb_head {display:block;}
  /* 남은 두 수단이 주 동작이 되므로 나란히 두지 않고 쌓아서 크게 */
  .lgb_other {flex-direction:column; gap:12px; margin-top:0;}
  /* 세로로 쌓을 때는 flex-basis 0 이 높이를 눌러 버리므로 늘어나지 않게 되돌린다 */
  .lgb_btn_sub {flex:0 0 auto; width:100%; height:58px; border-radius:16px; font-size:16px; font-weight:700; box-shadow:inset 0 0 0 1px rgba(20,30,60,.09);}
  .lgb_btn_sub svg {width:19px; height:19px;}
  /* 전화번호는 PC 에서도 흰 버튼, 카카오는 지정색으로 알아보게 */
  .lgb_btn_sub.is_phone {background:#ffffff; color:#14161c; box-shadow:inset 0 0 0 1px #e1e4e9;}
  .lgb_btn_sub.is_phone:hover {background:#f4f6f9;}
  .lgb_btn_sub.is_kakao {background:#fee500; color:#191600; box-shadow:none;}
  .lgb_btn_sub.is_kakao:hover {background:#f2da00;}
  /* 모바일 폭 화면을 그대로 늘리면 버튼이 팔뚝만큼 길어진다 — 한 단으로 묶어 가운데 세운다.
     폭은 A안의 문구 자리(420px)와 어긋나지 않게 잡는다 — 좁으면 문구가 한 줄에서 밀린다 */
  .lgb_wrap {max-width:468px; margin:0 auto;}
  /* 전화번호 입력은 번호 한 줄이 화면의 주인공이라 468px 은 좁다 — 한 단을 넓게 잡고 글자도 함께 키운다 */
  /* auto 마진이 남는 폭을 먹어 내용 폭으로 줄어드는 것을 막는다 — width:100% 를 함께 준다 */
  .lgn_wrap {width:100%; max-width:720px; margin:0 auto; padding:0 40px 30px; box-sizing:border-box;}
  .lgn_copy {font-size:34px;}
  .lgn_copy.is_sm {font-size:30px;}
  .lgn_field {margin-top:52px;}
  .lgn_row {gap:9px; padding:0 76px 0 32px;}
  .lgn_pre {font-size:38px;}
  .lgn_num {height:44px; font-size:42px;}
  .lgn_hy {padding:0 6px; font-size:42px;}
  .lgn_caret {width:3px; height:38px;}
  .lgn_line {margin-top:18px;}
  .lgn_clear {width:32px; height:32px;}
  .lgn_err, .lgn_note {font-size:13px;}
  .lgn_pick_b {height:64px; font-size:17px;}
  .lgn_foot {padding-top:34px;}
  .lgn_btn {height:62px; border-radius:18px; font-size:17px;}
  /* 인증번호 화면 */
  .lgn_row.is_code {padding:0 128px;}
  .lgn_row.is_date {padding:0 76px;}
  .lgn_num.is_date, .lgn_num.is_date .lgn_hy {font-size:38px;}
  .lgn_num.is_code {font-size:44px; gap:5px;}
  .lgv_sent {font-size:15px;}
  .lgv_timer {font-size:15px;}
  .lgv_label {font-size:14px;}
  /* 회원가입 완료 — 혜택 판도 완료 문구와 같은 폭으로 */
  .lgc_task {max-width:420px; padding:18px 20px 17px;}
  .lgc_task_t {font-size:15px;}
  .lgc_task_d {font-size:13px;}
  .lgc_task_rw {font-size:12.5px;}
  .lgc_task_b {height:50px; font-size:15px;}
  .lgs_gift {max-width:420px; padding:18px 20px 16px;}
  .lgs_gift_t {font-size:15px;}
  .lgs_gift_n {font-size:14px;}
  .lgs_gift_v {font-size:15px;}
  .lgs_note {max-width:420px; font-size:13px;}
  .lgk_copy {font-size:34px;}
  .lgk_lead {font-size:15px;}
  .lgc_copy {font-size:34px;}
  .lgc_lead {font-size:15px;}
  .lgv_resend_t, .lgv_resend_b {font-size:13.5px;}
}

/* 세로가 짧은 화면 — B안 버튼이 한 줄씩 서면서 자리가 모자란다.
   시안의 균형은 긴 화면에서 그대로 두고, 짧을 때만 얼굴 마크와 여백을 줄인다 */
@media (max-height:740px) {
  /* 얼굴 '등록' 화면만 — 이유 문구와 버튼이 하나씩 더 들어와 짧은 화면에서는 원과 여백을 함께 줄인다.
     얼굴 '인식' 화면(같은 lgf)은 그대로 둔다 */
  body.lgf.is_reg .lgf_stage, body.lgf.is_gate .lgf_stage {width:clamp(240px,72vw,300px); height:clamp(240px,72vw,300px);}
  body.lgf.is_reg .lgf_why {margin-top:14px; font-size:16px;}
  body.lgf.is_reg .lgf_pill, body.lgf.is_gate .lgf_pill {margin-bottom:12px;}
  body.lgf.is_reg .lgf_btns, body.lgf.is_gate .lgf_btns {padding-top:14px;}
  body.lgf.is_reg .lgf_btn, body.lgf.is_reg .lgf_btn.is_ghost,
  body.lgf.is_gate .lgf_btn, body.lgf.is_gate .lgf_btn.is_ghost {height:52px;}
  body.lgb .lgb_wrap {padding-bottom:16px;}
  body.lgb .lg_links {margin-top:16px;}
  body.lgb .lgb_face {height:212px;}
  body.lgb .lgb_grid, body.lgb .lgb_glow {width:222px; height:222px;}
  body.lgb .lgb_ring {width:166px; height:166px;}
  body.lgb .lgb_ring.is_out {width:206px; height:206px;}
  body.lgb .lgb_mark {width:152px; height:152px;}
  body.lgb .lgb_scan {width:158px; margin-left:-79px;}
  body.lgb .lgb_copy {margin-top:18px; font-size:26px;}
  body.lgb .lgb_lead {margin-top:10px;}
  body.lgb .lgb_btn_face {margin-top:22px;}
  body.lgb .lgb_other {margin-top:10px; gap:9px;}
  body.lgb .lgb_btn_sub {height:52px;}

  /* 완료 화면(로그인·회원가입) — 판과 안내문에 버튼 둘까지 얹혀 있어 세로가 짧으면 넘친다.
     마크와 여백을 조금씩 줄여 한 화면에 담는다 */
  body.is_done .lgc_mark {width:74px; height:74px;}
  body.is_done .lgc_copy {margin-top:20px; font-size:26px;}
  body.is_done .lgc_lead {margin-top:10px;}
  body.is_done .lgs_gift {margin-top:18px; padding:13px 16px 12px;}
  body.is_done .lgs_gift_t {margin-bottom:9px;}
  body.is_done .lgs_gift_li {padding:6px 0;}
  body.is_done .lgs_note {margin-top:12px;}
  body.is_done .lgc_stage {padding-bottom:10px;}
  body.is_done .lgn_foot {padding-top:16px;}
  /* 권유 판도 같이 줄인다 */
  body.is_done .lgc_task {margin-top:18px; padding:13px 15px 12px;}
  body.is_done .lgc_task_d {margin-top:7px;}
  body.is_done .lgc_task_rw {margin-top:11px;}
  body.is_done .lgc_task_b {height:44px;}
  body.is_done .lgn_btn {height:52px;}
  body.is_done .lgn_btn.is_sub {margin-top:8px;}
  body.is_done .lgn_wrap {padding-bottom:14px;}
}

/* 세로가 아주 짧은 화면(640px 급) — 완료 화면은 판·버튼이 많아 한 단 더 줄여야 담긴다 */
@media (max-height:660px) {
  body.is_done .lgc_mark {width:64px; height:64px;}
  body.is_done .lgc_copy {margin-top:16px; font-size:24px;}
  body.is_done .lgc_lead {margin-top:8px; font-size:12.5px;}
  body.is_done .lgc_task {margin-top:14px;}
  body.is_done .lgs_gift {margin-top:14px;}
  body.is_done .lgs_note {margin-top:10px;}
  body.is_done .lgn_foot {padding-top:12px;}
}

/* 아주 좁은 화면(320px 급) — 인증번호 여섯 자리와 오른쪽 묶음이 맞닿는다. 둘 다 조금씩 줄인다 */
@media (max-width:340px) {
  .lgn_row.is_code {padding:0 80px;}
  .lgn_row.is_date {padding:0 40px;}
  .lgn_num.is_date, .lgn_num.is_date .lgn_hy {font-size:22px;}
  .lgn_num.is_code {font-size:24px; gap:2px;}
  .lgn_num.is_code .lgn_caret {height:21px;}
  .lgv_timer {font-size:12px;}
  .lgv_right {gap:6px;}
}

/* 아주 좁은 화면에서만 — 여백은 시안 그대로 두고 토스트만 줄인다 */
@media (max-width:600px) {
  .lg_toast {top:60px; max-width:calc(100% - 32px); padding:12px 16px;}
}

/* ===== 얼굴 사진 수집·이용 동의 (2026-09-07 변호사 1차 의견 반영) =====
   고지사항을 '자세히' 뒤에 숨기지 않고 목적·수집항목·보유기간을 항목으로 펼쳐 둔다.
   체크박스는 반드시 미체크로 시작하므로, 켜지지 않은 상태가 기본 모습이다 */
.lgf_cons {margin-bottom:clamp(14px,3.6vw,20px); padding:clamp(15px,3.8vw,19px) clamp(15px,4vw,18px);
           border:1px solid #e6e8ec; border-radius:14px; background:#fafbfc; text-align:left;}
.lgf_cons_h {display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0;
             color:#1b1b1b; font-size:clamp(13px,2.1vw,14.5px); font-weight:700; letter-spacing:-0.02em;}
.lgf_cons_req {flex:0 0 auto; display:inline-flex; align-items:center; height:18px; padding:0 6px;
               border-radius:4px; background:#1b43c8; color:#ffffff;
               font-style:normal; font-size:10.5px; font-weight:700;}
/* 선택 동의는 파란 딱지가 아니라 회색으로 — 필수와 눈에 띄게 갈라 놓는다.
   시트 바탕(#f1f3f6)과 붙어 보이지 않게 한 톤 더 눌러 딱지로 읽히게 한다 */
.lgf_cons_req.is_opt {background:#dfe3ec; color:#4d5464;}
.lgf_cons_link {margin-left:auto; color:#8a8f98; font-size:clamp(11px,1.8vw,12.5px); font-weight:500;
                text-decoration:underline; text-underline-offset:2px; white-space:nowrap;}
.lgf_cons_link:hover {color:#1b43c8;}
.lgf_cons_dl {display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px clamp(10px,2.6vw,14px);
              margin:clamp(11px,2.8vw,14px) 0 0; padding:clamp(11px,2.8vw,14px) 0 0; border-top:1px solid #eef0f2;}
.lgf_cons_dl dt {color:#8a8f98; font-size:clamp(11.5px,1.85vw,12.5px); font-weight:500; white-space:nowrap;}
.lgf_cons_dl dd {margin:0; color:#444444; font-size:clamp(12px,1.95vw,13.5px); font-weight:500;
                 line-height:1.5; word-break:keep-all;}
/* ※ 뒤로 글이 두 줄 이상 갈 때 둘째 줄이 ※ 밑으로 내려가지 않게 걸어 준다 */
.lgf_cons_note {margin:clamp(11px,2.8vw,14px) 0 0; padding-left:1.05em; text-indent:-1.05em;
                color:#1b43c8;
                font-size:clamp(11.5px,1.85vw,12.5px); font-weight:600; line-height:1.6; word-break:keep-all;}
/* 거부해도 서비스를 쓰실 수 있다는 것을 문장으로 밝힌다(개인정보보호법 제22조 제5항) */
.lgf_cons_free {margin:5px 0 0; color:#8a8f98;
                font-size:clamp(11.5px,1.85vw,12.5px); font-weight:400; line-height:1.6; word-break:keep-all;}
/* 동의 체크 — 흰 카드 안이므로 어두운 화면용 색을 그대로 쓰면 글씨가 안 보인다.
   법으로 다투는 자리이니 '켜졌는지 꺼졌는지'가 눈에 또렷해야 한다 */
.lgf_cons .lgf_consent {justify-content:flex-start; gap:8px;
    margin:5px 0 0 0; padding:clamp(11px,2.8vw,13px) 0 0;
    border-top:1px solid #eef0f2;
    color:#1b1b1b; font-size:clamp(12.5px,2vw,14px); font-weight:600; text-align:left;}
.lgf_cons .lgf_consent_ico {width:20px; height:20px; border-radius:5px;
    background:#1b43c8; color:#ffffff; box-shadow:none;}
.lgf_cons .lgf_consent_ico svg {width:14px; height:14px; margin:3px auto 0;}
/* 미체크가 기본 모습이다 */
.lgf_cons .lgf_consent.is_off {color:#8a8f98;}
.lgf_cons .lgf_consent.is_off .lgf_consent_ico {background:#ffffff; color:transparent;
    box-shadow:inset 0 0 0 1.5px #c9cfdb;}
.lgf_cons .lgf_consent:focus-visible {outline:2px solid #1b43c8; outline-offset:3px; border-radius:4px;}

/* ── 동의 시트 ─────────────────────────────────────────────────────
   담당자 지시: 고지사항을 본 화면에 펼쳐 두면 화면이 밀려 스크롤이 생긴다.
   시트로 먼저 띄워 반드시 읽고 동의하게 하고, 본 화면에는 동의했다는 한 줄만 남긴다.
   법정 고지 네 가지(목적·수집항목·보유기간·필수 여부)는 시트 안에 그대로 있다 */
.lgf_sheet {position:fixed; left:0; top:0; right:0; bottom:0; z-index:1400; display:flex; align-items:flex-end; justify-content:center;}
.lgf_sheet[hidden] {display:none;}
.lgf_sdim {position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(8,10,14,.58); opacity:0; transition:opacity .2s;}
.lgf_sheet.is_show .lgf_sdim {opacity:1;}
.lgf_spanel {position:relative; z-index:1; display:flex; flex-direction:column; width:100%; max-width:520px; max-height:88vh;
             border-radius:20px 20px 0 0; background:#ffffff; transform:translateY(101%);
             transition:transform .26s cubic-bezier(.22,.68,.36,1);}
.lgf_sheet.is_show .lgf_spanel {transform:none;}
/* 손잡이나 제목줄을 잡고 끌어내리면 닫힌다 */
.lgf_shead {flex:0 0 auto; padding:0 clamp(18px,4.6vw,22px) clamp(3px,1vw,5px);
            touch-action:none; cursor:grab; user-select:none;}
.lgf_shead:active {cursor:grabbing;}
.lgf_sgrip {display:flex; align-items:center; justify-content:center; height:22px;}
.lgf_sgrip span {display:block; width:42px; height:4px; border-radius:99px; background:#d9dee6;}
.lgf_stit {display:flex; align-items:center; gap:7px; margin:5px 0 0; color:#14161c;
           font-size:clamp(15px,2.4vw,16.5px); font-weight:700; letter-spacing:-0.02em;}
/* 끄는 동안에는 손가락을 그대로 따라와야 한다 */
.lgf_spanel.is_drag {transition:none;}
.lgf_sbody {flex:1 1 auto; padding:clamp(13px,3.4vw,16px) clamp(18px,4.6vw,22px) clamp(11px,2.8vw,14px);
            overflow-y:auto; -webkit-overflow-scrolling:touch;}
.lgf_sbtm {flex:0 0 auto; display:grid; gap:8px;
           padding:clamp(11px,2.8vw,13px) clamp(18px,4.6vw,22px) calc(clamp(14px,3.6vw,18px) + env(safe-area-inset-bottom));
           box-shadow:inset 0 1px 0 rgba(20,30,60,.08);}
/* 시트 안에서는 카드 테두리를 벗긴다 — 시트 자체가 카드다 */
.lgf_cons.is_plain {margin:0; padding:0; border:0; border-radius:0; background:none;}
/* 시트 바탕은 옅은 회색으로 내리고 고지 네 가지를 흰 카드로 띄운다(담당자 선택 B안).
   덕분에 항목 사이 구분선이 필요 없어져 시트가 오히려 짧아진다 */
.lgf_spanel {background:#f1f3f6;}
.lgf_sbtm {background:#ffffff;}
.lgf_cons_box {padding:clamp(14px,3.6vw,16px) clamp(14px,3.8vw,16px);
               border-radius:14px; background:#ffffff; box-shadow:0 1px 2px rgba(20,30,60,.05);}
.lgf_cons_box .lgf_cons_dl {margin:0; padding:0; border-top:0;}
.lgf_cons_box .lgf_cons_note {margin:clamp(10px,2.6vw,13px) 0 0;}
.lgf_cons_box .lgf_cons_free {margin:5px 0 0;}
/* 카드 밖으로 나온 체크 줄은 구분선 없이 회색 바탕 위에 그대로 선다 */
.lgf_cons .lgf_consent {border-top:0;}
/* 체크 없이 CTA 를 눌렀을 때 — 체크 네모를 빨갛게 하고 글 옆에 한마디 붙인다.
   따로 한 줄을 세우는 것보다 눌러야 할 것에 바로 붙는 편이 눈에 든다 */
.lgf_cons_ask {margin-left:7px; color:#d9534f; font-style:normal; font-weight:700;
               letter-spacing:-0.01em; white-space:nowrap;}
.lgf_cons_ask[hidden] {display:none;}
.lgf_cons .lgf_consent.is_off.is_err .lgf_consent_ico {box-shadow:inset 0 0 0 1.6px #d9534f;}
/* 시트 아래 단추는 어두운 화면용 유령 단추가 아니라 흰 바탕에 맞춘 모습으로 */
/* 물러나는 길은 단추 상자가 아니라 글자 하나로 둔다 — [동의하기] 와 위계를 확실히 가른다
   (담당자 지시: border·box-shadow 없이 height 40px, font-weight 400) */
body.lgf .lgf_sbtm .lgf_btn.is_ghost {height:40px; border:0; border-radius:0;
    background:none; box-shadow:none; color:#8a8f98; font-size:14px; font-weight:400;}
body.lgf .lgf_sbtm .lgf_btn.is_ghost:hover {background:none; color:#4b5059; text-decoration:underline;}
body.lgf .lgf_sbtm .lgf_btn.is_ghost:active {transform:none;}
/* 본 화면의 물러나는 길도 시트와 같은 결로 — 단추 상자가 아니라 글자 하나(담당자 지시) */
body.lgf .lgf_btns .lgf_btn.is_ghost {height:40px; border:0; border-radius:0;
    background:none; box-shadow:none; font-size:14px; font-weight:400;}
body.lgf .lgf_btns .lgf_btn.is_ghost:hover {background:none; text-decoration:underline;}
body.lgf .lgf_btns .lgf_btn.is_ghost:active {transform:none;}
body.lgf.is_light .lgf_btns .lgf_btn.is_ghost {background:none; box-shadow:none;}
/* 체크하기 전에는 잠긴 모습이어야 한다 — 어두운 화면용 검정(#14161c)을 흰 시트에 쓰면
   눌러도 되는 단추처럼 보인다 */
.lgf_sbtm .lgf_btn.is_mute, body.lgf.is_light .lgf_sbtm .lgf_btn.is_mute {
    background:#eff1f4; color:#b3b8c2; box-shadow:none; cursor:default;}
.lgf_sbtm .lgf_btn[hidden] {display:none;}

/* 본 화면에 남는 동의 상태 한 줄 — 누르면 시트가 다시 열린다 */
.lgf_state {display:flex; align-items:center; gap:9px; width:100%; margin:0 0 clamp(10px,2.6vw,13px);
            padding:clamp(12px,3.2vw,14px) clamp(13px,3.4vw,15px); box-sizing:border-box;
            border:0; border-radius:13px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
            color:rgba(255,255,255,.9); font-size:clamp(12.5px,2vw,13.5px); font-weight:600;
            letter-spacing:-0.01em; text-align:left; font-family:inherit; cursor:pointer;}
.lgf_state:hover {background:rgba(255,255,255,.11);}
.lgf_state_ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:19px; height:19px;
               border-radius:50%; background:rgba(255,255,255,.16); color:transparent;}
.lgf_state_ic svg {width:12px; height:12px;}
.lgf_state.is_on .lgf_state_ic {background:#1b43c8; color:#ffffff;}
.lgf_state_t {flex:1 1 auto; min-width:0;}
.lgf_state_go {flex:0 0 auto; width:15px; height:15px; color:rgba(255,255,255,.46);}
.lgf_state:focus-visible {outline:2px solid #6f8bf0; outline-offset:2px;}
/* 촬영 중에는 동의했다는 표기만 남기고 누르지는 못하게 한다 — 시트를 열 수 없는 때다 */
.lgf_state.is_static {pointer-events:none; cursor:default;}
.lgf_state.is_static .lgf_state_go {display:none;}
body.lgf.is_light .lgf_state {background:#f4f6f9; box-shadow:inset 0 0 0 1px #e6e9ee; color:#14161c;}
body.lgf.is_light .lgf_state:hover {background:#eef1f5;}
body.lgf.is_light .lgf_state_ic {background:#dfe3ea;}
/* 흰 화면(촬영 중)에서도 켜진 표시는 파랑이어야 한다 — 위 규칙이 더 세서 덮어쓰고 있었다 */
body.lgf.is_light .lgf_state.is_on .lgf_state_ic {background:#1b43c8; color:#ffffff;}
body.lgf.is_light .lgf_state_go {color:#b6bcc6;}
@media (prefers-reduced-motion:reduce) {
  .lgf_sdim, .lgf_spanel {transition:none;}
}
@media all and (min-width:601px) {
  .lgf_sheet {align-items:center;}
  .lgf_spanel {border-radius:20px;}
}