/* ===== LOGIN MODAL (common across all pages) ===== Mirrors the inquiry-widget approach: the markup is appended straight to , outside the x-dc-managed subtree, so an async re-render never wipes it. Palette follows the site system — cream #fbfaf8, navy #0e2440, gold #bf8e5a, Noto Serif KR for the Korean title. */ /* ===== 헤더 로그인 상태 (person 아이콘 자리) ===== .nav-right 안, person 아이콘 바로 뒤에 삽입된다. 7개 페이지 헤더가 모두 크림 배경 + #0e2440 텍스트라 한 벌로 충분하다. */ .lm-account{ position:relative;display:flex;align-items:center;flex-shrink:0; font-family:'Manrope',system-ui,sans-serif; } .lm-account-btn{ display:flex;align-items:center;gap:7px;height:34px;padding:0 11px 0 10px; border-radius:999px;border:1px solid rgba(14,36,64,.18); background:rgba(255,255,255,.35);color:#0e2440;cursor:pointer; font:600 12.5px/1 'Manrope',system-ui,sans-serif;transition:.25s; } .lm-account-btn:hover{background:#fff;border-color:rgba(191,142,90,.5)} .lm-account-btn > svg{width:15px;height:15px;flex-shrink:0;opacity:.65} .lm-account-name{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lm-account-caret{width:11px;height:11px;opacity:.45;transition:transform .25s} .lm-account.is-open .lm-account-caret{transform:rotate(180deg)} .lm-account-menu{ position:absolute;top:calc(100% + 10px);right:0;z-index:41;min-width:198px; padding:8px;border-radius:12px; background:rgba(251,250,250,.97); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(14,36,64,.08); box-shadow:0 26px 54px -22px rgba(14,36,64,.4); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .25s ease,visibility .25s ease,transform .25s ease; } .lm-account.is-open .lm-account-menu{opacity:1;visibility:visible;transform:translateY(0)} .lm-account-email{ padding:7px 11px 10px;margin-bottom:6px; border-bottom:1px solid rgba(14,36,64,.08); font:400 11.5px/1.5 'Manrope',system-ui,sans-serif; color:rgba(14,36,64,.5);word-break:break-all; } .lm-account-logout{ width:100%;display:flex;align-items:center;gap:9px; padding:10px 11px;border:none;border-radius:8px;background:none;cursor:pointer; font:600 12.5px/1 'Manrope',system-ui,sans-serif;color:#0e2440; text-align:left;transition:.22s; } .lm-account-logout:hover{background:rgba(201,162,75,.12);color:#a8763f} .lm-account-logout svg{width:15px;height:15px;flex-shrink:0} @media (max-width:480px){ .lm-account-name{max-width:70px} .lm-account-btn{padding:0 9px 0 8px;font-size:12px} } .lm-overlay{ position:fixed;inset:0;z-index:10000; display:flex;align-items:center;justify-content:center;padding:24px; background:rgba(14,36,64,.42); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,visibility .28s ease; font-family:'Manrope',system-ui,sans-serif; } .lm-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto} .lm-card{ position:relative;width:100%;max-width:404px; max-height:calc(100vh - 48px);overflow:hidden; border-radius:24px; border:1px solid rgba(14,36,64,.08); background:linear-gradient(180deg,#fbfaf8 0%,#fff 42%); box-shadow:0 46px 90px -30px rgba(14,36,64,.45),0 2px 10px rgba(14,36,64,.06); color:#0e2440; display:flex;flex-direction:column; transform:translateY(18px) scale(.97); transition:transform .3s cubic-bezier(.22,1,.36,1); } .lm-overlay.is-open .lm-card{transform:translateY(0) scale(1)} /* Header stays put; only the form body scrolls, so the title and tabs remain reachable once the 회원가입 panel outgrows the viewport. */ .lm-head{ flex-shrink:0;padding:38px 34px 0; display:flex;flex-direction:column;align-items:center; } .lm-body{ flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:0 34px 32px; display:flex;flex-direction:column;align-items:center; scrollbar-width:thin;scrollbar-color:rgba(14,36,64,.2) transparent; } .lm-body::-webkit-scrollbar{width:6px} .lm-body::-webkit-scrollbar-track{background:transparent} .lm-body::-webkit-scrollbar-thumb{background:rgba(14,36,64,.16);border-radius:3px} .lm-body::-webkit-scrollbar-thumb:hover{background:rgba(14,36,64,.28)} /* ---- close ---- */ .lm-close{ position:absolute;top:16px;right:16px; width:32px;height:32px;border-radius:50%; display:grid;place-items:center; border:1px solid rgba(14,36,64,.1);background:rgba(255,255,255,.7); color:rgba(14,36,64,.5);cursor:pointer;padding:0;transition:.25s; } .lm-close:hover{background:rgba(14,36,64,.06);color:#0e2440} .lm-close svg{width:15px;height:15px} /* ---- header ---- */ .lm-badge{ width:56px;height:56px;border-radius:18px; display:grid;place-items:center;margin-bottom:20px; background:#fff;border:1px solid rgba(191,142,90,.28); box-shadow:0 12px 26px -14px rgba(14,36,64,.4); color:#bf8e5a; } .lm-badge svg{width:26px;height:26px} .lm-title{ font:500 26px/1.3 'Noto Serif KR',serif; color:#0e2440;margin:0 0 8px;text-align:center;letter-spacing:-.01em; } .lm-sub{ font:400 13px/1.7 'Manrope',system-ui,sans-serif; color:rgba(14,36,64,.5);margin:0 0 20px;text-align:center; } /* ---- tabs (로그인 / 회원가입) ---- */ .lm-tabs{ width:100%;display:flex;gap:4px;margin-bottom:20px; padding:4px;border-radius:13px;background:rgba(14,36,64,.05); } .lm-tab{ flex:1;padding:9px 8px;border:1px solid transparent;border-radius:10px; background:none;cursor:pointer; font:600 13px/1 'Manrope',system-ui,sans-serif; color:rgba(14,36,64,.48);transition:.25s; } .lm-tab:hover{color:#0e2440} .lm-tab.is-active{ background:#fff;color:#0e2440; border-color:rgba(191,142,90,.3); box-shadow:0 6px 14px -8px rgba(14,36,64,.45); } /* ---- panels ---- */ .lm-panel{width:100%;display:none;flex-direction:column;align-items:center} .lm-panel.is-active{display:flex} /* ---- fields ---- */ .lm-fields{width:100%;display:flex;flex-direction:column;gap:10px} .lm-field{position:relative} .lm-field-ic{ position:absolute;left:13px;top:50%;transform:translateY(-50%); color:rgba(14,36,64,.34);display:grid;place-items:center;pointer-events:none; } .lm-field-ic svg{width:16px;height:16px} .lm-input{ width:100%;padding:12px 14px 12px 40px; border-radius:12px;border:1px solid rgba(14,36,64,.14); background:#fbfaf8;color:#0e2440; font:400 14px/1.4 'Manrope',system-ui,sans-serif; outline:none;transition:border-color .2s,box-shadow .2s,background .2s; } .lm-input::placeholder{color:rgba(14,36,64,.34)} .lm-input:focus{ background:#fff;border-color:#bf8e5a; box-shadow:0 0 0 3px rgba(191,142,90,.14); } /* ---- notice (error / 준비중) ---- */ .lm-notice{ width:100%;margin-top:10px;padding:10px 13px;border-radius:10px; font:500 12.5px/1.55 'Manrope',system-ui,sans-serif; display:none; } .lm-notice.is-shown{display:block} .lm-notice.is-error{background:rgba(190,60,60,.07);color:#a83a3a;border:1px solid rgba(190,60,60,.16)} .lm-notice.is-info{background:rgba(191,142,90,.09);color:#8a6234;border:1px solid rgba(191,142,90,.24)} /* ---- 주소 + 주소 검색 버튼 ---- */ .lm-field-row{width:100%;display:flex;gap:8px} .lm-field-row .lm-field{flex:1;min-width:0} .lm-addr-btn{ flex-shrink:0;padding:0 15px;border-radius:12px;cursor:pointer; border:1px solid rgba(191,142,90,.45);background:#fff;color:#a8763f; font:600 12.5px/1 'Manrope',system-ui,sans-serif;white-space:nowrap; transition:.22s; } .lm-addr-btn:hover{background:rgba(191,142,90,.09);border-color:#bf8e5a;color:#8a6234} .lm-input[readonly]{cursor:pointer;background:rgba(14,36,64,.03)} /* ---- 가입 유형 ---- */ .lm-group-label{ width:100%;margin:8px 0 0 3px; font:600 11.5px/1 'Manrope',system-ui,sans-serif; letter-spacing:.06em;color:rgba(14,36,64,.45); } .lm-seg{width:100%;display:flex;gap:8px} .lm-seg-opt{flex:1;display:block;cursor:pointer;position:relative} .lm-seg-opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .lm-seg-opt span{ display:flex;align-items:center;justify-content:center;text-align:center; min-height:46px;padding:10px 8px;border-radius:12px; border:1px solid rgba(14,36,64,.14);background:#fbfaf8; font:600 12.5px/1.35 'Manrope',system-ui,sans-serif;color:rgba(14,36,64,.55); transition:.22s; } .lm-seg-opt:hover span{border-color:rgba(191,142,90,.45);color:#0e2440} .lm-seg-opt input:checked + span{ background:#fff;border-color:#bf8e5a;color:#0e2440; box-shadow:0 0 0 3px rgba(191,142,90,.12); } .lm-seg-opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(191,142,90,.3)} /* ---- 다음 우편번호 embed layer ---- */ .lm-daum{ position:absolute;inset:0;z-index:6;background:#fff; border-radius:24px;overflow:hidden; display:none;flex-direction:column; } .lm-daum.is-shown{display:flex} .lm-daum-bar{ flex-shrink:0;display:flex;align-items:center;justify-content:space-between; padding:14px 16px;border-bottom:1px solid rgba(14,36,64,.08); } .lm-daum-bar strong{font:600 13.5px 'Manrope',system-ui,sans-serif;color:#0e2440} .lm-daum-close{ width:28px;height:28px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(14,36,64,.1);background:#fff; color:rgba(14,36,64,.5);cursor:pointer;padding:0;transition:.25s; } .lm-daum-close:hover{background:rgba(14,36,64,.06);color:#0e2440} .lm-daum-close svg{width:13px;height:13px} .lm-daum-box{flex:1;min-height:0} /* ---- per-field hint (비밀번호 확인 일치 여부) ---- */ .lm-hint{ display:none;margin:-2px 0 0 3px; font:500 11.5px/1.5 'Manrope',system-ui,sans-serif; } .lm-hint.is-shown{display:block} .lm-hint.is-bad{color:#a83a3a} .lm-hint.is-good{color:#3f7a4f} /* ---- forgot ---- */ .lm-forgot-row{width:100%;display:flex;justify-content:flex-end;margin-top:12px} .lm-forgot{ background:none;border:none;padding:0;cursor:pointer; font:500 12px 'Manrope',system-ui,sans-serif;color:rgba(14,36,64,.5); transition:color .2s; } .lm-forgot:hover{color:#bf8e5a;text-decoration:underline} /* ---- submit ---- */ .lm-submit{ width:100%;margin-top:18px;padding:13px 16px; border:none;border-radius:12px;cursor:pointer; background:#0e2440;color:#fff; font:600 14.5px/1 'Manrope',system-ui,sans-serif;letter-spacing:.01em; box-shadow:0 14px 30px -14px rgba(14,36,64,.7); transition:background .25s,transform .2s,box-shadow .25s; } .lm-submit:hover{background:#16304f;transform:translateY(-1px);box-shadow:0 18px 36px -14px rgba(14,36,64,.75)} .lm-submit:active{transform:translateY(0)} /* ---- divider ---- */ .lm-divider{width:100%;display:flex;align-items:center;margin:22px 0 16px} .lm-divider::before,.lm-divider::after{ content:'';flex:1;border-top:1px dashed rgba(14,36,64,.16); } .lm-divider span{ margin:0 12px;font:500 11px 'Manrope',system-ui,sans-serif; letter-spacing:.08em;color:rgba(14,36,64,.38);white-space:nowrap; } /* ---- social ---- */ .lm-social{width:100%;display:flex;gap:10px} .lm-social button{ flex:1;height:48px;border-radius:13px;cursor:pointer;padding:0; display:grid;place-items:center; border:1px solid rgba(14,36,64,.12);background:#fff; transition:transform .2s,box-shadow .25s,background .25s; } .lm-social button:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(14,36,64,.45)} .lm-social button:active{transform:translateY(0)} .lm-social svg{width:21px;height:21px;display:block} .lm-social .lm-kakao{background:#FEE500;border-color:rgba(0,0,0,.06);color:#3C1E1E} .lm-social .lm-kakao:hover{background:#f5dd00} /* ---- "이미 계정이 있으신가요? 로그인" ---- */ .lm-swap{ width:100%;margin-top:18px;text-align:center; font:400 12.5px/1.6 'Manrope',system-ui,sans-serif;color:rgba(14,36,64,.5); } .lm-swap button{ background:none;border:none;padding:0;margin-left:5px;cursor:pointer; font:600 12.5px 'Manrope',system-ui,sans-serif;color:#bf8e5a; text-decoration:underline;text-underline-offset:2px;transition:color .2s; } .lm-swap button:hover{color:#a8763f} @media (max-width:480px){ .lm-overlay{padding:16px} .lm-card{border-radius:20px} .lm-head{padding:34px 22px 0} .lm-body{padding:0 22px 26px} .lm-daum{border-radius:20px} .lm-title{font-size:23px} .lm-addr-btn{padding:0 12px;font-size:12px} .lm-social{gap:8px} .lm-social button{height:44px;border-radius:11px} .lm-social svg{width:19px;height:19px} }