/* ===== app.css ===== */ :root { --blue-900: #10458F; --blue-800: #1558B8; --blue-700: #1E6FE0; --blue-600: #2E82F0; --blue-500: #4A9BFF; --sky-700: #1E6FE0; --sky-600: #2E82F0; --sky-500: #4A9BFF; --sky-400: #6FB2FF; --sky-100: #E8F2FF; --sky-50: #F3F8FF; --gold-500: #FFC933; --gold-400: #FFD54F; --gold-300: #FFE38A; --bg: #F5F6FA; --surface: #FFFFFF; --surface-sunken: #E9EBF2; --border: #E8EAF0; --text: #0C2340; --text-secondary: #5A6377; --text-muted: #667085; --text-on-blue: #FFFFFF; --text-on-blue-dim: #D5E2F7; --tint-green: #E7F6EA; --tint-green-fg: #43A047; --tint-pink: #FDEAF3; --tint-pink-fg: #E0479B; --tint-blue: #E6F2FD; --tint-blue-fg: #1E88E5; --tint-red: #FDECEC; --tint-red-fg: #E53935; --tint-gold: #FFF4DC; --tint-gold-fg: #F9A825; --tint-indigo: #ECEEF8; --tint-indigo-fg: #5C6BC0; --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(22, 25, 43, .04), 0 2px 6px rgba(22, 25, 43, .04); --shadow-md: 0 2px 4px rgba(22, 25, 43, .04), 0 8px 20px rgba(22, 25, 43, .06); --shadow-lg: 0 4px 8px rgba(22, 25, 43, .05), 0 16px 36px rgba(22, 25, 43, .10); --shadow-blue: 0 8px 20px rgba(27, 42, 107, .22), 0 20px 44px rgba(27, 42, 107, .18); --shadow-gold: 0 4px 12px rgba(255, 199, 54, .38), 0 10px 24px rgba(255, 199, 54, .22); --app-max: 440px; --gutter: 13px; /* 원본 17.5px. 폰 한 화면에 다 들어오도록 여백을 줄임 */ /* 시작 단계 화면(기능동의·약관동의·전화번호)의 상하좌우 공통 여백 */ --ob-pad: 24px; /* 메뉴에서 들어가는 화면들의 상하좌우 공통 여백. 시작 화면과 같은 값으로 맞춘다. */ --pg-pad: 24px; --nav-h: 70px; /* 화면 하단 안전영역. 안드로이드 대형 폰은 이 값을 크게 보고해서 그대로 쓰면 푸터가 부풀고 아래가 비어 보인다. 상한을 두어 8px 을 넘지 않게 한다. */ --inset-b: min(env(safe-area-inset-bottom, 0px), 8px); --ui-scale: 1; /* 원본은 0.92 축소. 모바일에서 글씨가 작고 비율이 어긋나 해제함 */ --ease: cubic-bezier(.22, .61, .36, 1); } /* 아이폰은 홈 인디케이터 때문에 하단 인셋이 실제로 필요하다. 위 상한을 그대로 두면 버튼이 인디케이터에 너무 붙어 내려가 보이므로, iOS 에서만 인셋을 원래대로 쓴다. -webkit-touch-callout 은 iOS 사파리·웹뷰에서만 지원하는 속성이라 판별에 쓴다. */ @supports (-webkit-touch-callout: none) { :root { --inset-b: env(safe-area-inset-bottom, 0px); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; zoom: var(--ui-scale); } /* 화면 전환 애니메이션(@view-transition)은 넣지 않는다. 안드로이드 웹뷰에서 폼 전송(POST) 직후 빈 화면이 보이는 문제가 있어 제거했다. */ /* 홈 한 화면이 세로 812px 을 차지한다. 화면이 더 짧은 폰에서는 비율을 그대로 둔 채 전체를 축소해 스크롤 없이 한눈에 들어오게 한다. 축소하면 가로 여유가 생기므로 앱 최대폭도 함께 늘려 좌우 여백이 생기지 않게 한다. 주의: 여기서 @media (max-height:) 를 쓰면 안 된다. 입력창을 눌러 키보드가 올라오면 화면 높이가 확 줄어드는데, 그때마다 이 규칙이 발동해 화면 전체가 작아져 버린다(큰 안드로이드 폰에서 특히 심함). 그래서 높이 판정은 App.master 의 첫 스크립트가 '처음 한 번'만 하고, 그 결과를 로 남긴다. 키보드는 이 값을 바꾸지 못한다. */ html[data-short="1"] { --ui-scale: .96; --app-max: 520px; } html[data-short="2"] { --ui-scale: .92; --app-max: 520px; } html[data-short="3"] { --ui-scale: .88; --app-max: 520px; } html[data-short="4"] { --ui-scale: .84; --app-max: 520px; } html[data-short="5"] { --ui-scale: .80; --app-max: 520px; } html[data-short="6"] { --ui-scale: .76; --app-max: 520px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; } h1, h2, h3, h4, p { margin: 0; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } svg { display: block; flex: none; } :focus-visible { outline: 2.5px solid var(--blue-600); outline-offset: 3px; border-radius: 6px; } .pressable { transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease); } .pressable:active { transform: scale(.975); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .pressable:active { transform: none; } } .notfound { padding: 72px var(--gutter); text-align: center; } .notfound h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .notfound p { margin-top: 8px; font-size: 14px; color: var(--text-muted); } .notfound a { display: inline-block; margin-top: 22px; padding: 13px 24px; border-radius: var(--r-pill); background: var(--blue-700); color: #fff; font-size: 14.5px; font-weight: 700; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } ::-webkit-scrollbar { width: 0; height: 0; } #components-reconnect-modal { display: none; } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 2000; display: block; width: 100%; max-width: var(--app-max); padding: 0 var(--gutter); pointer-events: none; animation: offline-drop .24s var(--ease); } @keyframes offline-drop { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%); } } .offline-bar { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 13px; border-radius: var(--r-md); background: var(--surface); border: 1px solid rgba(229, 57, 53, .22); box-shadow: var(--shadow-lg); pointer-events: auto; } .offline-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--tint-red); color: var(--tint-red-fg); } .offline-text { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .offline-retry { flex: none; padding: 8px 14px; border-radius: var(--r-pill); background: var(--blue-800); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -0.03em; transition: transform .16s var(--ease); } .offline-retry:active { transform: scale(.95); } .ev-backdrop { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(10, 21, 56, .62); opacity: 0; transition: opacity .24s var(--ease); } .ev-backdrop.open { opacity: 1; } .ev { position: relative; width: 100%; max-width: 340px; border-radius: var(--r-xl); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); transform: translateY(14px) scale(.97); transition: transform .28s var(--ease); } .ev-backdrop.open .ev { transform: none; } .ev-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; } .ev-banner { display: block; line-height: 0; } .ev-banner img { width: 100%; height: auto; display: block; } .ev-foot { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; background: var(--surface); } .ev-btn { display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: var(--r-pill); font-size: 15.5px; font-weight: 800; letter-spacing: -0.03em; transition: transform .16s var(--ease); } .ev-btn:active { transform: scale(.97); } .ev-btn-ghost { background: var(--surface-sunken); color: var(--text-secondary); } .ev-btn-primary { background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); color: var(--blue-800); box-shadow: var(--shadow-gold); } .call-pop { max-width: 320px; } .call-pop-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 24px 22px; } .call-pop-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; box-shadow: 0 8px 22px rgba(30, 111, 224, .45); } .call-pop-title { margin-top: 16px; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .call-pop-sub { margin-top: 6px; font-size: 13.5px; color: var(--text-muted); } .call-pop-sub b { font-weight: 700; color: var(--sky-700); } .call-pop-num { margin-top: 14px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--sky-700); } #blazor-error-ui { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; padding: 14px 20px; background: #FFF4D6; color: #4A3A00; box-shadow: 0 -4px 20px rgba(0, 0, 0, .1); font-size: 14px; } #blazor-error-ui .dismiss { float: right; cursor: pointer; font-size: 18px; line-height: 1; } .slider { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .slider-track { display: flex; transition: transform .4s var(--ease); } .slide { flex: 0 0 100%; display: grid; place-items: center; height: 140px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: #fff; } .slide { position: relative; } .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .slide.s1 { background: #FBF5F4; } .slide.s2 { background: #3A1897; } .slide.s3 { background: #7FB1F6; } .slider-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: var(--r-pill); background: rgba(13, 27, 62, .42); } .slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: width .2s var(--ease), background-color .2s var(--ease); } .slider-dot.on { width: 20px; border-radius: var(--r-pill); background: #fff; } .ob { display: flex; flex-direction: column; flex: 1; min-height: 0; /* 상하좌우 같은 여백. 아래는 고정 푸터에 가려지는 만큼 따로 더한다. */ padding: var(--ob-pad); background: var(--surface); /* .content 는 하단 탭바 자리를 비워두는데, 시작 단계 화면에서는 탭바가 보이지 않는다. 그대로 두면 그 구간이 회색 배경으로 남아 고정 푸터 아래에 띠처럼 보인다. 흰 패널을 그 구간까지 끌어내리고 같은 크기만큼 아래 여백을 더해, 내용 위치는 그대로 두면서 배경만 화면 맨 아래까지 닿게 한다. */ margin-bottom: calc(-1 * (var(--nav-h) + var(--inset-b))); padding-bottom: calc(var(--nav-h) + var(--inset-b) + var(--ob-pad) + 17px); } .ob-progress { display: flex; justify-content: center; gap: 6px; /* 위쪽 여백은 .ob 가 이미 갖고 있으므로 여기서 더하지 않는다 */ padding: 0 0 22px; } .ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: width .2s var(--ease), background-color .2s var(--ease); } .ob-dot.on { width: 20px; border-radius: var(--r-pill); background: var(--sky-600); } .ob-title { /* 화면 폭에 따라 자연스럽게 커지고 줄바꿈이 예쁘게 떨어진다 */ font-size: clamp(24px, 6.6vw, 28px); text-wrap: pretty; font-weight: 800; line-height: 1.35; letter-spacing: -0.04em; color: var(--text); } .ob-sub { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; word-break: keep-all; } .ob-list { display: flex; flex-direction: column; /* 접근권한 목록 — 아래 여유가 많아 항목 간격을 넉넉히 준다 */ gap: 34px; margin: 42px 0 0; padding: 0; list-style: none; } .ob-item { display: flex; align-items: flex-start; gap: 13px; } .ob-item-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; } .ob-item-ic.loc { background: var(--tint-blue); color: var(--tint-blue-fg); } .ob-item-ic.bell { background: var(--tint-gold); color: var(--tint-gold-fg); } .ob-item-ic.call { background: var(--tint-green); color: var(--tint-green-fg); } .ob-item-body { display: flex; flex-direction: column; gap: 5px; } .ob-item-name { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .ob-item-desc { font-size: 15px; line-height: 1.5; color: var(--text-muted); word-break: keep-all; } .req, .opt { padding: 3px 9px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 800; } .req { background: var(--tint-blue); color: var(--tint-blue-fg); } .opt { background: var(--surface-sunken); color: var(--text-secondary); } .ob-terms { display: flex; flex-direction: column; margin: 12px 0 0; padding: 0; list-style: none; } .ob-term { display: flex; align-items: center; gap: 8px; } .ob-term-item { display: flex; flex-direction: column; } .ob-term-view { flex: none; padding: 8px 4px; border: 0; background: none; font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--text-muted); text-decoration: underline; cursor: pointer; } /* 보기를 누르면 펼쳐지는 약관 전문 */ .ob-doc { display: none; margin: 0 2px 12px; padding: 14px; max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sky-50); color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; } .ob-doc.open { display: block; } .ob-doc h4 { margin: 14px 0 4px; font-size: 13px; font-weight: 800; color: var(--text); } .ob-doc h4:first-child { margin-top: 0; } .ob-doc p { margin: 0; } .ob-doc-link { margin-top: 14px !important; } .ob-doc-link a { color: var(--sky-700); font-weight: 700; } .ob-field { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; } .ob-label { font-size: 15.5px; font-weight: 700; color: var(--text-secondary); } .ob-row { display: flex; gap: 8px; } .ob-input { width: 100%; padding: 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); outline: none; } .ob-input:focus { border-color: var(--sky-500); box-shadow: 0 0 0 3px rgba(74, 155, 255, .18); } .ob-input:disabled { background: var(--surface-sunken); color: var(--text-secondary); } .ob-input::placeholder { font-weight: 500; color: var(--text-muted); } .ob-input.code { text-align: center; letter-spacing: .3em; font-size: 22px; } .ob-send { flex: none; padding: 0 16px; border-radius: var(--r-md); background: var(--sky-100); color: var(--sky-700); font-size: 14.5px; font-weight: 800; white-space: nowrap; } .ob-send:disabled { opacity: .5; cursor: default; } /* 재요청 카운트다운 중에는 숫자 폭이 흔들리지 않게 고정폭 숫자를 쓴다 */ .ob-send { font-variant-numeric: tabular-nums; min-width: 96px; } .ob-error { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--tint-blue); color: var(--tint-blue-fg); font-size: 14px; font-weight: 700; line-height: 1.45; } /* 시작 단계 화면의 고정 푸터 — 내용이 길어도 항상 화면 하단에 붙어 있는다 */ .ob-foot { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: var(--app-max); padding: var(--ob-pad) var(--ob-pad) calc(var(--ob-pad) + var(--inset-b)); background: var(--surface); border-top: 1px solid var(--border); } .ob-btn { width: 100%; padding: 19px; border-radius: var(--r-md); font-size: 19px; font-weight: 800; letter-spacing: -0.03em; } .ob-btn.primary { background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; box-shadow: 0 6px 16px rgba(30, 111, 224, .3); } .ob-btn:disabled { opacity: .55; box-shadow: none; } .ob-guide { margin: 24px 0 0; padding: 16px 16px 16px 34px; border-radius: var(--r-md); background: var(--sky-50); border: 1px solid var(--sky-100); font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); } .ob-guide li { margin: 0; } .ob-all-wrap { margin-top: 24px; } .ob-all-chk, .ob-term-chk { display: block; } .ob-all-chk input[type="checkbox"], .ob-term-chk input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .ob-all-chk label, .ob-term-chk label { display: flex; align-items: center; gap: 11px; cursor: pointer; } .ob-all-chk label::before, .ob-term-chk label::before { content: ""; flex: none; display: block; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface) no-repeat center; transition: background-color .16s var(--ease), border-color .16s var(--ease); } .ob-term-chk label::before { width: 22px; height: 22px; } .ob-all-chk input:checked + label::before, .ob-term-chk input:checked + label::before { background-color: var(--sky-600); border-color: var(--sky-600); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5L19 7'/%3E%3C/svg%3E"); background-size: 14px 14px; } .ob-all-chk label { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--border); font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .ob-all-chk input:checked + label { border-color: var(--sky-500); background: var(--sky-50); } .ob-term-chk label { padding: 16px 4px; font-size: 16px; font-weight: 600; color: var(--text); } input.ob-btn, input.wd-submit, input.ob-send { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; } .no-chrome .content { padding-bottom: env(safe-area-inset-bottom); } .drawer-backdrop{will-change:opacity;position:fixed;inset:0;z-index:400;background:rgba(10,21,56,.55);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s var(--ease)} .drawer-backdrop.open{opacity:1;visibility:visible} .drawer{will-change:transform;contain:layout paint;display:flex;flex-direction:column;width:min(86%,340px);height:100%;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);background:var(--blue-800);color:#fff;box-shadow:8px 0 40px rgba(10,21,56,.35);transform:translateX(-100%);transition:transform .32s cubic-bezier(.32,.72,0,1)} .drawer-backdrop.open .drawer{transform:none} .drawer-head{display:flex;align-items:center;gap:13px;padding:18px 16px 16px;border-bottom:1px solid rgba(255,255,255,.1)} .drawer-logo{flex:none;width:46px;height:46px;border-radius:13px;object-fit:cover} .drawer-brand{display:flex;flex-direction:column;flex:1;min-width:0} .drawer-name{font-size:19px;font-weight:800;letter-spacing:-.03em} .drawer-tel{margin-top:2px;font-size:13px;color:rgba(255,255,255,.55)} .drawer-close{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;color:rgba(255,255,255,.7);background:none;border:0;cursor:pointer} .drawer-close:hover{background:rgba(255,255,255,.1);color:#fff} .drawer-body{flex:1;overflow-y:auto;padding:10px 0 14px} .drawer-group{padding:14px 18px 6px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.42)} .drawer-item{display:flex;align-items:center;gap:13px;padding:13px 18px;color:rgba(255,255,255,.92);text-decoration:none;transition:background-color .16s var(--ease)} .drawer-item:hover,.drawer-item:active{background:rgba(255,255,255,.09)} .drawer-icon{display:grid;place-items:center;flex:none;width:22px;height:22px;color:rgba(255,255,255,.8)} .drawer-label{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.03em} .drawer-label small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:rgba(255,255,255,.45)} .drawer-foot{border-top:1px solid rgba(255,255,255,.1);padding-top:4px} .drawer-copy{padding:6px 18px 16px;font-size:12px;color:rgba(255,255,255,.35)} html[data-app-inset="bottom"] .tabbar { height: var(--nav-h); padding-bottom: 0; } html[data-app-inset="bottom"] .content { padding-bottom: calc(var(--nav-h) + 10px); } html[data-app-inset="bottom"] .no-chrome .content { padding-bottom: 0; } .tabbar button.tab { background: none; border: 0; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; } .drawer-badge { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tint-red-fg); } /* ── 아이콘 ────────────────────────────────────────────────── 모든 아이콘은 App.master 의 스프라이트()를 로 불러 쓴다. 굵기·색·마감은 여기서 한 번만 정하고, 아이콘 하나하나에는 적지 않는다. (fill·stroke 는 상속 속성이라 안쪽까지 그대로 전달된다) */ .i { display: inline-block; flex: none; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* 뒤로가기처럼 혼자 크게 놓이는 아이콘만 살짝 굵게 — 다른 아이콘은 건드리지 않는다 */ .i-bold { stroke-width: 2.2; } .i-16 { width: 16px; height: 16px; } .i-19 { width: 19px; height: 19px; } .i-20 { width: 20px; height: 20px; } .i-21 { width: 21px; height: 21px; } .i-22 { width: 22px; height: 22px; } .i-24 { width: 24px; height: 24px; } .i-28 { width: 28px; height: 28px; } .i-32 { width: 32px; height: 32px; } .i-42 { width: 42px; height: 42px; } /* 스프라이트 자체는 화면에 나오지 않는다 */ .i-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* 메뉴가 열릴 때 항목이 위에서부터 차례로 들어온다 */ .drawer-body > * { opacity: 0; transform: translateX(-14px); transition: opacity .3s var(--ease), transform .34s cubic-bezier(.32, .72, 0, 1); } .drawer-backdrop.open .drawer-body > * { opacity: 1; transform: none; } .drawer-backdrop.open .drawer-body > *:nth-child(1) { transition-delay: 0.05s; } .drawer-backdrop.open .drawer-body > *:nth-child(2) { transition-delay: 0.072s; } .drawer-backdrop.open .drawer-body > *:nth-child(3) { transition-delay: 0.094s; } .drawer-backdrop.open .drawer-body > *:nth-child(4) { transition-delay: 0.116s; } .drawer-backdrop.open .drawer-body > *:nth-child(5) { transition-delay: 0.138s; } .drawer-backdrop.open .drawer-body > *:nth-child(6) { transition-delay: 0.16s; } .drawer-backdrop.open .drawer-body > *:nth-child(7) { transition-delay: 0.182s; } .drawer-backdrop.open .drawer-body > *:nth-child(8) { transition-delay: 0.204s; } .drawer-backdrop.open .drawer-body > *:nth-child(9) { transition-delay: 0.226s; } .drawer-backdrop.open .drawer-body > *:nth-child(10) { transition-delay: 0.248s; } .drawer-backdrop.open .drawer-body > *:nth-child(11) { transition-delay: 0.27s; } .drawer-backdrop.open .drawer-body > *:nth-child(12) { transition-delay: 0.292s; } .drawer-backdrop.open .drawer-body > *:nth-child(13) { transition-delay: 0.314s; } .drawer-backdrop.open .drawer-body > *:nth-child(14) { transition-delay: 0.336s; } .drawer-backdrop.open .drawer-body > *:nth-child(15) { transition-delay: 0.358s; } .drawer-backdrop.open .drawer-body > *:nth-child(16) { transition-delay: 0.38s; } .drawer-backdrop.open .drawer-body > *:nth-child(17) { transition-delay: 0.402s; } .drawer-backdrop.open .drawer-body > *:nth-child(18) { transition-delay: 0.424s; } .drawer-backdrop.open .drawer-body > *:nth-child(19) { transition-delay: 0.446s; } .drawer-backdrop.open .drawer-body > *:nth-child(20) { transition-delay: 0.468s; } .drawer-backdrop.open .drawer-body > *:nth-child(21) { transition-delay: 0.49s; } .drawer-backdrop.open .drawer-body > *:nth-child(22) { transition-delay: 0.512s; } /* 메뉴 머리말·바닥글도 같은 흐름으로 */ .drawer-head, .drawer-foot { opacity: 0; transition: opacity .26s var(--ease); } .drawer-backdrop.open .drawer-head { opacity: 1; transition-delay: .04s; } .drawer-backdrop.open .drawer-foot { opacity: 1; transition-delay: .2s; } /* 하위 화면에서 뒤로가기를 눌렀을 때 — 오른쪽으로 밀려 나가며 사라진다 */ .app.leaving { opacity: 0; transform: translateX(8px); transition: opacity .15s ease-out, transform .15s ease-out; } /* 움직임을 줄이도록 설정한 사용자에게는 애니메이션을 걸지 않는다 */ @media (prefers-reduced-motion: reduce) { .drawer, .drawer-body > * { transition: none; } } /* ── 화면 전환 ─────────────────────────────────────────────────────── 메뉴에서 항목을 누르면 화면이 왼쪽으로 밀려 나가고, 새 화면은 오른쪽에서 미끄러져 들어온다. 두 동작이 이어져 한 흐름으로 보인다. */ .content.going { opacity: 0; transform: translateX(-10px); transition: opacity .15s ease-in, transform .15s ease-in; } .content.entering { opacity: 0; transform: translateX(12px); } .content { transition: opacity .22s var(--ease), transform .26s cubic-bezier(.32, .72, 0, 1); } /* ── 메뉴에서 다녀온 항목 ──────────────────────────────────────────── 메뉴를 다시 열면 어디에 다녀왔는지 노란색으로 알려준다. 메뉴를 닫으면 표시는 사라진다(drawer.js 의 clearVisited). */ .drawer-item.visited { background: rgba(255, 213, 79, .1); } .drawer-item.visited .drawer-label { color: var(--gold-400); font-weight: 800; } .drawer-item.visited .drawer-icon { color: var(--gold-400); } @media (prefers-reduced-motion: reduce) { .content, .content.going, .content.entering { opacity: 1; transform: none; transition: none; } } /* ===== pages.css ===== */ .app { display: flex; flex-direction: column; max-width: var(--app-max); margin: 0 auto; min-height: calc(100dvh / var(--ui-scale)); background: var(--bg); box-shadow: 0 0 0 1px rgba(22, 25, 43, .05), 0 24px 60px rgba(22, 25, 43, .08); } .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 7px var(--gutter); padding-top: calc(7px + env(safe-area-inset-top)); background: #fff; border-bottom: 1px solid rgba(22, 25, 43, .06); } .brand-logo { display: block; height: 38px; width: auto; } .brand { display: flex; align-items: center; justify-content: center; } .brand-mark { width: 34px; height: 34px; border-radius: 11px; object-fit: cover; box-shadow: 0 2px 6px rgba(13, 27, 72, .28); } .brand-name { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .brand-name b { font-weight: 800; color: var(--sky-600); } .topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; } .icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--text-secondary); transition: background-color .16s var(--ease), color .16s var(--ease); } .icon-btn:hover { background: rgba(22, 25, 43, .05); color: var(--text); } .icon-btn:active { background: rgba(22, 25, 43, .09); } .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--tint-red-fg); box-shadow: 0 0 0 2px #fff; } .content { flex: 1; display: flex; flex-direction: column; min-height: 0; /* 탭바가 가리는 만큼만 비운다. 화면별 여백은 각 화면(.pg/.ob)이 따로 준다. */ padding-bottom: calc(var(--nav-h) + var(--inset-b)); } .tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: var(--app-max); height: calc(var(--nav-h) + var(--inset-b)); padding-bottom: var(--inset-b); /* 예전에는 backdrop-filter: blur(20px) 로 유리 느낌을 냈다. 탭바는 늘 화면에 떠 있어서, 스크롤하는 내내 뒤 배경을 매 프레임 다시 흐리게 만든다. 안드로이드 웹뷰에서 이게 뚝뚝 끊기는 주된 원인이라 걷어내고 불투명 배경으로 바꿨다. */ background: rgba(255, 255, 255, .97); border-top: 1px solid rgba(22, 25, 43, .07); } /* 시작 단계 화면 — 푸터는 남기되 화면에서만 감춘다 */ .tabbar.ghost { opacity: 0; pointer-events: none; } .tabbar .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; color: var(--text-muted); } .tabbar .tab-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); } .tabbar .tab-icon { background: var(--sky-100); color: var(--sky-700); } .tabbar .tab-label { font-size: 12px; font-weight: 700; letter-spacing: -0.02em; } .tabbar .tab.active .tab-icon { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .tabbar .tab.active .tab-label { color: var(--sky-700); font-weight: 700; } .alt { display: flex; flex-direction: column; gap: var(--gutter); padding: var(--gutter); } .alt-topcard { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: stretch; padding: var(--gutter) 0; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-md); } .alt-col { display: flex; flex-direction: column; align-items: flex-start; padding: 0 var(--gutter); } .alt-divider { background: var(--border); } .alt-col-head { display: flex; align-items: center; gap: 7px; font-size: 15.5px; font-weight: 600; color: var(--text-secondary); } .alt-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; } .alt-ic.pin { color: var(--sky-600); } .alt-ic.m { background: var(--sky-600); color: #fff; font-size: 12px; font-weight: 800; } .alt-col-value { margin-top: 6px; margin-bottom: 10px; font-size: 18px; word-break: keep-all; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .alt-col-btn { align-self: stretch; margin-top: auto; padding: 9px; text-align: center; border-radius: var(--r-pill); border: 1px solid var(--sky-100); background: var(--sky-50); font-size: 15.5px; font-weight: 700; color: var(--sky-700); } .alt-hero { position: relative; display: flex; align-items: center; min-height: 132px; padding: var(--gutter); border-radius: var(--r-xl); overflow: hidden; background: url('../img/hero-call-art.webp') right center / cover no-repeat, var(--sky-600); } .alt-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; } .alt-hero-eyebrow { font-size: 15.5px; font-weight: 700; color: var(--gold-300); } .alt-hero-title { margin-top: 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; color: #fff; text-shadow: 0 1px 8px rgba(13, 41, 92, .3); } .alt-hero-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 12px 20px; border-radius: var(--r-pill); background: #fff; color: var(--sky-700); font-size: 17.5px; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 6px 16px rgba(13, 41, 92, .28); } .alt-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; } .alt-svc-card { position: relative; display: flex; flex-direction: column; padding: 12px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .alt-svc-top { display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .alt-svc-icon { display: grid; place-items: center; height: 46px; margin: 6px 0; } .alt-svc-desc { font-size: 12px; word-break: keep-all; line-height: 1.45; color: var(--text-muted); text-align: center; } .sub { display: flex; flex-direction: column; flex: 1; min-height: 0; } .sub-bar { display: flex; align-items: center; gap: 6px; padding: 4px var(--gutter) 12px; } .sub-back { display: grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: -8px; border-radius: 12px; color: var(--text); transition: background-color .16s var(--ease); } .sub-back:active { background: var(--surface-sunken); } .sub-title { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.035em; color: var(--text); } .sub-trailing { flex: none; } .sub-body { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; padding: 0 var(--gutter) 16px; } .wd-balance { display: flex; align-items: baseline; justify-content: space-between; padding: 16px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; box-shadow: 0 6px 16px rgba(30, 111, 224, .28); } .wd-balance-label { font-size: 15px; font-weight: 700; } .wd-balance-amount { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; } .wd-balance-amount i { font-style: normal; margin-left: 3px; font-size: 16px; font-weight: 700; } .wd-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; } .wd-label { font-size: 14.5px; font-weight: 700; color: var(--text-secondary); } .wd-input { width: 100%; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 16px; font-weight: 600; color: var(--text); outline: none; } .wd-input:focus { border-color: var(--sky-500); box-shadow: 0 0 0 3px rgba(74, 155, 255, .18); } .wd-input::placeholder { font-weight: 500; color: var(--text-muted); } .wd-amount-row { display: flex; gap: 8px; } .wd-input-wrap { position: relative; flex: 1; min-width: 0; } .wd-input-amount { padding-right: 34px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; text-align: right; } .wd-suffix { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 700; color: var(--text-secondary); pointer-events: none; } .wd-all { flex: none; padding: 0 16px; border-radius: var(--r-md); background: var(--sky-100); color: var(--sky-700); font-size: 15px; font-weight: 800; } .wd-quick { display: flex; gap: 6px; } .wd-quick-btn { flex: 1; padding: 9px 0; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 700; color: var(--text-secondary); } .wd-quick-btn:active { background: var(--sky-50); border-color: var(--sky-100); color: var(--sky-700); } .wd-hint { font-size: 12.5px; color: var(--text-muted); } .wd-error { margin-top: 14px; padding: 11px 13px; border-radius: var(--r-md); background: var(--tint-red); color: var(--tint-red-fg); font-size: 14px; font-weight: 700; } .wd-submit { width: 100%; margin-top: 18px; padding: 17px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; box-shadow: 0 6px 16px rgba(30, 111, 224, .3); } .wd-note { margin-top: 10px; padding-bottom: 10px; text-align: center; font-size: 12.5px; color: var(--text-muted); } .wd-backdrop { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(10, 21, 56, .62); } .wd-dialog { width: 100%; max-width: 320px; padding: 22px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-lg); text-align: center; } .wd-dialog-title { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .wd-dialog-sub { margin-top: 8px; font-size: 14.5px; color: var(--text-secondary); } .wd-confirm { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 14px; border-radius: var(--r-md); background: var(--sky-50); text-align: left; } .wd-confirm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text-secondary); } .wd-confirm-row b { font-weight: 800; color: var(--text); word-break: break-all; text-align: right; } .wd-dialog-btns { display: flex; gap: 8px; margin-top: 18px; } .wd-btn { flex: 1; padding: 13px; border-radius: var(--r-pill); font-size: 15px; font-weight: 800; letter-spacing: -0.03em; } .wd-btn.ghost { background: var(--surface-sunken); color: var(--text-secondary); } .wd-btn.primary { background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; } .wd-btn:disabled { opacity: .6; } .wd-result { display: grid; place-items: center; width: 54px; height: 54px; margin: 4px auto 0; border-radius: 50%; background: var(--tint-green-fg); color: #fff; font-size: 28px; font-weight: 800; } /* ===== sub.css ===== */ /* 하위 화면(메뉴에서 들어가는 페이지) 전용 스타일. app.css 의 색·간격 토큰을 그대로 쓴다. */ /* 상단 바 — 뒤로가기 + 가운데 제목 */ .brand-wrap { display: flex; justify-content: center; width: 100%; } .subhead { display: flex; align-items: center; gap: 4px; width: 100%; } .subhead-back, .subhead-pad { display: grid; place-items: center; flex: none; /* 한 손으로 엄지만 뻗어 눌러도 빗나가지 않게 넉넉히 잡는다 */ width: 54px; height: 54px; border-radius: 16px; color: var(--text); } /* 버튼이 커진 만큼 화면 가장자리로 당겨, 제목과의 간격은 그대로 둔다 */ .subhead-back { margin-left: -10px; } .subhead-pad { margin-right: -10px; } .subhead-back:active { background: var(--surface-sunken); } .subhead-title { flex: 1; min-width: 0; text-align: center; font-size: 19px; font-weight: 800; letter-spacing: -0.035em; color: var(--text); } /* 본문 틀 */ .pg { display: flex; flex-direction: column; flex: 1; gap: 12px; /* 상하좌우 같은 여백 */ padding: var(--pg-pad); } /* 하단 고정 버튼이 있는 화면은 버튼 높이만큼 더 비운다 */ .pg-has-foot { padding-bottom: calc(var(--pg-pad) + 86px); } .pg-card { padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .pg-title { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .pg-note { font-size: 14px; line-height: 1.7; color: var(--text-secondary); word-break: keep-all; } .pg-note + .pg-note { margin-top: 10px; } .pg-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 0; color: var(--text-muted); font-size: 15px; } .pg-empty .ic { font-size: 42px; line-height: 1; } /* 파란 안내 배너 */ .pg-banner { display: flex; align-items: center; gap: 14px; padding: 18px 16px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; box-shadow: var(--shadow-md); } .pg-banner .ic { font-size: 30px; line-height: 1; } .pg-banner .t { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; } .pg-banner .d { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: #E1EDFF; word-break: keep-all; } .pg-banner .amt { margin-left: auto; font-size: 20px; font-weight: 800; white-space: nowrap; } /* 목록 */ .pg-list { display: flex; flex-direction: column; gap: 10px; } .pg-row { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .pg-row .body { flex: 1; min-width: 0; } .pg-row .date { font-size: 12.5px; color: var(--text-muted); } .pg-row .name { margin-top: 4px; font-size: 15.5px; font-weight: 700; color: var(--text); } .pg-row .desc { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); word-break: keep-all; } .pg-row .right { flex: none; text-align: right; } .pg-row .amt { font-size: 16px; font-weight: 800; color: var(--sky-700); white-space: nowrap; } .pg-row .amt.minus { color: #E53935; } .pg-row .sub { margin-top: 4px; font-size: 12px; color: var(--text-muted); white-space: nowrap; } .pg-badge { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 800; } .pg-badge.done { background: var(--tint-green); color: var(--tint-green-fg); } .pg-badge.cancel { background: var(--surface-sunken); color: var(--text-muted); } /* 접었다 펴는 목록 (공지·자주하는질문) */ .pg-acc { display: flex; flex-direction: column; gap: 10px; } .pg-acc-item { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .pg-acc-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px; text-align: left; } .pg-acc-head .t { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--text); word-break: keep-all; } .pg-acc-head .d { flex: none; font-size: 12px; color: var(--text-muted); } .pg-acc-head .chev { flex: none; color: var(--text-muted); transition: transform .2s var(--ease); } .pg-acc-item.open .pg-acc-head .chev { transform: rotate(180deg); } .pg-acc-body { display: none; padding: 0 16px 18px; font-size: 14px; line-height: 1.75; color: var(--text-secondary); word-break: keep-all; } .pg-acc-item.open .pg-acc-body { display: block; } /* 검색창 */ .pg-search { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text-muted); } .pg-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text); outline: none; } /* 표 */ .pg-table { width: 100%; border-collapse: collapse; font-size: 14px; } .pg-table th { padding: 13px 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 800; color: var(--text-secondary); text-align: left; } .pg-table td { padding: 14px 10px; border-bottom: 1px solid var(--border); color: var(--text); } .pg-table tr:last-child td { border-bottom: 0; } .pg-table .none { padding: 36px 10px; text-align: center; color: var(--text-muted); } /* 하단 고정 버튼 */ .pg-foot { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 70; width: 100%; max-width: var(--app-max); padding: 12px var(--pg-pad) calc(12px + var(--inset-b)); background: var(--surface); border-top: 1px solid var(--border); } .pg-btn { display: block; width: 100%; padding: 17px; border: 0; border-radius: var(--r-md); background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; text-align: center; box-shadow: 0 6px 16px rgba(30, 111, 224, .3); cursor: pointer; } .pg-btn.danger { background: linear-gradient(135deg, #FF7A7A, #E53935); box-shadow: 0 6px 16px rgba(229, 57, 53, .28); } .pg-btn:disabled { opacity: .55; box-shadow: none; } /* 나란한 두 버튼 */ .pg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pg-pair a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: var(--r-md); font-size: 16px; font-weight: 800; color: #fff; } .pg-pair .call { background: var(--sky-700); } .pg-pair .chat { background: #E53935; } /* 왼쪽 색띠 카드 */ .pg-side { position: relative; padding: 18px 16px 18px 21px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .pg-side::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sky-600); } .pg-side.warn::before { background: #F9A825; } .pg-side.bad::before { background: #E53935; } .pg-side-head { display: flex; align-items: center; gap: 11px; } .pg-side-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--tint-blue); color: var(--tint-blue-fg); } .pg-side.warn .pg-side-ic { background: var(--tint-gold); color: var(--tint-gold-fg); } .pg-side.bad .pg-side-ic { background: var(--tint-red); color: var(--tint-red-fg); } .pg-side-title { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .pg-side p { margin-top: 13px; font-size: 14px; line-height: 1.75; color: var(--text-secondary); word-break: keep-all; } .pg-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: var(--r-md); background: var(--tint-red); color: var(--tint-red-fg); font-size: 15px; font-weight: 800; } .pg-chip.warn { background: var(--tint-gold); color: var(--tint-gold-fg); } /* 스위치 */ .pg-switch { display: flex; align-items: center; gap: 12px; padding: 17px 16px; } .pg-switch .t { flex: 1; font-size: 15.5px; font-weight: 700; color: var(--text); } .pg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pg-switch label { flex: none; display: block; width: 52px; height: 30px; border-radius: var(--r-pill); background: var(--surface-sunken); cursor: pointer; transition: background-color .18s var(--ease); } .pg-switch label::after { content: ""; display: block; width: 24px; height: 24px; margin: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .18s var(--ease); } .pg-switch input:checked + label { background: var(--sky-600); } .pg-switch input:checked + label::after { transform: translateX(22px); } /* 링크 목록 */ .pg-links { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .pg-links a { display: flex; align-items: center; gap: 12px; padding: 17px 16px; border-bottom: 1px solid var(--border); font-size: 15.5px; font-weight: 700; color: var(--text); } .pg-links a:last-child { border-bottom: 0; } .pg-links a .ic { flex: none; color: var(--sky-600); } .pg-links a .go { margin-left: auto; flex: none; color: var(--text-muted); } /* 회사 정보 */ .pg-info { font-size: 13.5px; line-height: 2; color: var(--text-secondary); } .pg-info b { color: var(--text); font-weight: 700; } /* 쿠폰 적립판 */ .pg-goal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pg-goal-card { padding: 16px 8px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); text-align: center; } .pg-goal-card .ic { font-size: 26px; line-height: 1; } .pg-goal-card .n { margin-top: 9px; font-size: 15px; font-weight: 800; color: var(--text); } .pg-goal-card .d { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); } .pg-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .pg-stamp { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--border); font-size: 14px; font-weight: 700; color: var(--text-muted); } .pg-stamp.on { border: 0; background: var(--sky-600); color: #fff; } .pg-stamp.goal { border-style: solid; border-color: var(--sky-600); color: var(--sky-700); } .pg-sect { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 13.5px; font-weight: 800; color: var(--text-secondary); white-space: nowrap; } .pg-sect::before, .pg-sect::after { content: ""; flex: 1; height: 1px; background: var(--border); } .pg-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; } .pg-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--sky-600); } .pg-bar-legend { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); } /* 카드 입력 */ .pg-input { width: 100%; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font: inherit; font-size: 16px; color: var(--text); outline: none; } .pg-input:focus { border-color: var(--sky-500); box-shadow: 0 0 0 3px rgba(74, 155, 255, .18); } .pg-input::placeholder { color: var(--text-muted); font-weight: 500; } .pg-field { display: flex; flex-direction: column; gap: 8px; } .pg-field .lb { font-size: 14.5px; font-weight: 700; color: var(--text-secondary); } .pg-row2 { display: grid; grid-template-columns: 1fr 120px; gap: 10px; } /* 번호 매긴 안내 */ .pg-steps { display: flex; flex-direction: column; } .pg-step { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--border); } .pg-step:last-child { border-bottom: 0; } .pg-step .n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sky-600); color: #fff; font-size: 14px; font-weight: 800; } .pg-step .t { font-size: 15px; line-height: 1.5; color: var(--text); word-break: keep-all; } .pg-step .t b { color: var(--sky-700); font-weight: 800; } /* 점 목록 */ .pg-dots { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.85; color: var(--text-secondary); } .pg-dots li { word-break: keep-all; } /* 아이콘으로 바뀐 자리들의 색 보정 */ .pg-goal-card .ic { color: var(--sky-600); } .pg-empty .ic { color: var(--border); } /* ===== sub2.css ===== */ /* 하위 화면 마감 — sub.css 뒤에 읽혀 값을 덮어쓴다. 1) 인라인 style 을 대체하는 클래스 2) 2026 기준 다듬기: 큰 모서리, 숫자 정렬, 누름 반응, 붙는 검색창 */ /* ── 모서리를 키워 요즘 카드 느낌으로 ─────────────────────────── */ .pg-card, .pg-row, .pg-acc-item, .pg-links, .pg-goal-card, .pg-side, .pg-banner { border-radius: 18px; } /* ── 숫자는 자리를 고정해 목록에서 줄이 맞게 ──────────────────── */ .pg-row .amt, .pg-row .sub, .pg-stat-num, .pg-total, .pg-table td { font-variant-numeric: tabular-nums; } /* ── 누를 수 있는 것은 눌리는 느낌을 준다 ─────────────────────── */ .pg-links a, .pg-acc-head, .pg-row.tap { transition: background-color .16s var(--ease); } .pg-links a:active, .pg-acc-head:active, .pg-row.tap:active { background: var(--surface-sunken); } /* ── 검색창은 스크롤해도 위에 붙는다 ──────────────────────────── */ .pg-search { position: sticky; top: 52px; z-index: 20; } /* ── 인라인 style 대체용 ──────────────────────────────────────── */ /* 안쪽 여백 없는 카드(표·스위치를 담을 때) */ .pg-card.flat { padding: 0; } /* 카드 안 섹션 제목 */ .pg-sub { padding: 0 2px; font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } /* 값 + 오른쪽 버튼 한 줄 */ .pg-stat { display: flex; align-items: center; gap: 12px; } .pg-stat-body { flex: 1; min-width: 0; } .pg-stat-num { margin-top: 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--sky-700); } .pg-stat-num small { font-size: 16px; font-weight: 700; color: var(--text-muted); } .pg-chipbtn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 12px 16px; border-radius: var(--r-pill); background: var(--tint-green); color: var(--tint-green-fg); font-size: 14px; font-weight: 800; } /* 초록 알림 상자 */ .pg-ok { padding: 14px 16px; border-radius: 18px; background: var(--tint-green); color: var(--tint-green-fg); font-size: 14.5px; font-weight: 700; } /* 내가 보낸 말풍선 */ /* 표 좌우 여백 */ .pg-table th:first-child, .pg-table td:first-child { padding-left: 16px; } .pg-table th:last-child, .pg-table td:last-child { padding-right: 16px; } /* 적립판 */ .pg-stamps { margin-bottom: 14px; } .pg-stamps:last-child { margin-bottom: 0; } .pg-stamp.goal { box-shadow: 0 0 0 4px var(--sky-50); } .pg-total { margin-top: 10px; text-align: center; font-size: 14px; color: var(--text-muted); } /* 스위치 — asp:CheckBox 는 Text 가 없으면 label 을 만들지 않는다. 그래서 체크박스 자체를 스위치 모양으로 그린다. */ .pg-switch input[type="checkbox"] { position: static; flex: none; width: 52px; height: 30px; margin: 0; opacity: 1; -webkit-appearance: none; appearance: none; border: 0; border-radius: var(--r-pill); background: var(--surface-sunken); cursor: pointer; transition: background-color .18s var(--ease); } .pg-switch input[type="checkbox"]::after { content: ""; display: block; width: 24px; height: 24px; margin: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .18s var(--ease); } .pg-switch input[type="checkbox"]:checked { background: var(--sky-600); } .pg-switch input[type="checkbox"]:checked::after { transform: translateX(22px); } .pg-switch label { display: none; } /* 약관 전문 — 조항이 많아 스크롤로 읽는다 */ .pg-acc-body.pg-doc { max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 12px; } .pg-doc h4 { margin: 16px 0 6px; font-size: 14px; font-weight: 800; color: var(--text); } .pg-doc h4:first-child { margin-top: 0; } .pg-doc p { margin: 0; } /* 추천인 현황 — 성과 요약 */ .inv-sum { padding: 20px; border-radius: 18px; background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; box-shadow: var(--shadow-md); } .inv-sum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .inv-sum-label { font-size: 14px; color: #DCE9FF; } .inv-sum-amount { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; } .inv-sum-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .22); } .inv-sum-split > div { display: flex; flex-direction: column; gap: 3px; } .inv-sum-split .n { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; } .inv-sum-split .l { font-size: 12.5px; color: #DCE9FF; } /* 표 안의 추천 수 강조 */ .inv-count { display: inline-block; min-width: 42px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--sky-100); color: var(--sky-700); font-size: 13px; font-weight: 800; text-align: center; } /* ── 접이식 목록(공지·질문·약관) 공통 파란 강조 ────────────────── */ /* 왼쪽에 얇은 파란 띠. 안쪽 그림자라 글자가 밀리지 않는다. */ .pg-acc-item.open { box-shadow: inset 3px 0 0 var(--sky-600), var(--shadow-md); } .pg-acc-item.open .pg-acc-head .t { color: var(--sky-700); } .pg-acc-item.open .pg-acc-head .chev { color: var(--sky-600); } /* 제목 앞 아이콘 칩 */ .pg-acc-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--sky-100); color: var(--sky-700); } /* 질문/답변 표시 */ .pg-qa { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--sky-100); color: var(--sky-700); font-size: 13px; font-weight: 800; } .pg-qa.a { background: var(--surface-sunken); color: var(--text-secondary); } .pg-answer { display: flex; gap: 10px; } .pg-answer .body { flex: 1; min-width: 0; } /* ── 연한 파란 안내 상자 ──────────────────────────────────────── */ .pg-tip { display: flex; align-items: flex-start; gap: 11px; padding: 16px; border-radius: 18px; background: var(--sky-50); border: 1px solid var(--sky-100); } .pg-tip .ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--sky-100); color: var(--sky-700); } .pg-tip .body { flex: 1; min-width: 0; } .pg-tip .t { font-size: 15px; font-weight: 800; color: var(--text); } .pg-tip p { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); word-break: keep-all; } /* 스위치 줄 앞 아이콘 */ .pg-switch .ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--sky-100); color: var(--sky-700); } /* 카드관리 — 카드번호를 다 채우면 나타나는 이메일 칸 */ .card-email { display: none; } .card-email.on { display: flex; } .pg-field .hint { font-size: 13px; color: var(--text-muted); } /* ── 회원탈퇴 — 되돌릴 수 없음을 분명히 ──────────────────────── */ .warn-box { padding: 18px; border-radius: 18px; background: var(--tint-red); border: 1px solid rgba(229, 57, 53, .18); } .warn-head { display: flex; align-items: center; gap: 11px; } .warn-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #fff; color: #E53935; } .warn-title { font-size: 16.5px; font-weight: 800; letter-spacing: -0.03em; color: #B3261E; } .warn-list { margin: 14px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.9; color: #8C1D18; } .warn-list li { word-break: keep-all; } .warn-note { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(229, 57, 53, .18); font-size: 13px; line-height: 1.7; color: #8C1D18; word-break: keep-all; } .pg-note.danger { color: #B3261E; } .pg-switch.danger .t { color: #B3261E; } .pg-switch.danger input[type="checkbox"]:checked { background: #E53935; } .pg-textlink { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 800; color: var(--sky-700); text-decoration: underline; } /* ── 운행내역 — 출발·도착을 선으로 잇는다 ────────────────────── */ .ride { padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); } .ride-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ride-date { font-size: 13px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; } .ride-path { margin-top: 13px; } .ride-step { position: relative; display: flex; align-items: flex-start; gap: 11px; padding-left: 2px; } .ride-step + .ride-step { margin-top: 16px; } /* 두 점을 잇는 세로선 */ .ride-step:first-child::before { content: ""; position: absolute; left: 6px; top: 15px; bottom: -18px; width: 2px; background: var(--border); } .ride-step .ride-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; } .ride-step .ride-dot.from { background: var(--sky-600); } .ride-step .ride-dot.to { background: #fff; border: 2.5px solid var(--sky-600); } .ride-step .place { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text); word-break: keep-all; } .ride-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border); } .ride-pay { font-size: 14px; color: var(--text-secondary); } .ride-pay b { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .ride-receipt { flex: none; padding: 8px 14px; border-radius: var(--r-pill); background: var(--sky-50); border: 1px solid var(--sky-100); color: var(--sky-700); font-size: 13px; font-weight: 800; } .ride-receipt:active { background: var(--sky-100); } /* 간격 도우미 */ .mt-s { margin-top: 10px; } .mt-m { margin-top: 14px; } /* ===== chat.css ===== */ /* 고객센터 1:1 문의 화면. 말풍선·빠른질문·입력창을 요즘 메신저 형태로 구성한다. */ /* 아래 입력 영역이 가리지 않게 비워 둔다 */ .chat-pg { padding-bottom: 120px; } /* 날짜 구분선 */ .chat-day { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; } .chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--border); } .chat-day span { padding: 5px 13px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-muted); } .chat { display: flex; flex-direction: column; gap: 16px; } /* 한 사람의 말 묶음 */ .chat-line { display: flex; gap: 10px; } .chat-face { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; box-shadow: 0 4px 10px rgba(30, 111, 224, .28); } .chat-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .chat-who { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); } .chat-row { display: flex; align-items: flex-end; gap: 7px; } .chat-bubble { max-width: 74vw; padding: 13px 15px; border-radius: 18px; border-top-left-radius: 6px; background: var(--surface); border: 1px solid var(--border); font-size: 14.5px; line-height: 1.65; color: var(--text); word-break: keep-all; } .chat-time { flex: none; font-size: 11px; color: var(--text-muted); white-space: nowrap; } /* 내가 보낸 말 — 파란 말풍선, 오른쪽 정렬 */ .chat-line.mine { justify-content: flex-end; } .chat-line.mine .chat-bubble { border: 0; border-radius: 18px; border-top-right-radius: 6px; background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; box-shadow: 0 4px 12px rgba(30, 111, 224, .22); } /* 하단 입력 영역 */ .chat-foot { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 70; width: 100%; max-width: var(--app-max); padding: 10px var(--pg-pad) calc(10px + var(--inset-b)); background: var(--surface); border-top: 1px solid var(--border); } /* 입력칸 + 보내기 */ .chat-send { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 24px; background: var(--surface-sunken); } .chat-send textarea { flex: 1; min-width: 0; max-height: 118px; padding: 10px 0; border: 0; background: none; font: inherit; font-size: 15px; line-height: 1.5; color: var(--text); resize: none; outline: none; overflow-y: auto; } .chat-send textarea::placeholder { color: var(--text-muted); } .chat-send a { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); color: #fff; box-shadow: 0 4px 10px rgba(30, 111, 224, .3); }