/* ============================================ Design System ============================================ */:root{ color-scheme: dark; /* 어두운 판 — 상태바·하단바·기본 스크롤바까지 어둡게 맞춘다 (2026-09-08) */ --color-primary: #FFFFFF; /* 채운 단추 바탕 — 어두운 판에서는 흰색이 «가장 진한 것» */ --color-primary-dark: #FFFFFF; --color-primary-light: #D4D4D4; --color-bg: #0F0F0F; /* ★ 바탕 검정 — 여기 한 줄만 바꾸면 전체 색조가 조정된다 */ --color-bg-card: #7A1B1B; --color-text-primary: #FFFFFF; --color-text-secondary: #A1A1A1; /* 보조 설명 — 검정 배경 대비 7.0:1 */ --color-text-light: #6E6E6E; /* 가장 흐린 글씨(푸터 등) — 검정 배경 대비 3.5:1 */ --color-text-white: #FFFFFF; --color-on-light: #0F0F0F; /* 흰 단추처럼 «밝은 면» 위에 얹는 글씨 (2026-09-08 어두운 판) */ --color-border: #2A2A2A; --color-dot-inactive: #4A4A4A; /* = --dg-line-2 */ --color-dot-active: #FFFFFF; --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --max-width: 448px; /* 앱 최대 폭 — 2026-08-03 사장님 지시로 480 → 448 (시안 기준, 모든 화면 공통) */ --header-height: 60px; /* 떠 있는 하단바 — 여백 계산이 이 값을 따라간다 (2026-09-09 B안 + 유리로 바꾸며 도입). 전에는 «96px» 이 다섯 군데에 그냥 박혀 있었고 «하단 바(73) + 24 여백» 이라 적혀 있었는데, 바 모양이 바뀌면 그 숫자가 조용히 틀리게 된다. 이제 여기 한 곳만 고치면 된다. */ --fnav-h: 60px; /* 유리 알약 높이 = 안쪽여백7 + 칸44 + 안쪽여백7 + 테두리2 */ --fnav-gap: 16px; /* 바닥에서 띄운 만큼 */ --fnav-space: calc(var(--fnav-h) + var(--fnav-gap) + 24px + env(safe-area-inset-bottom)); /* 바 + 24 여백 */ --tab-height: 44px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 4px 12px rgba(0,0,0,0.6); --radius-sm: 8px; --radius-md: 12px; --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; /* ===== 디자인 가이드 토큰 (2026-07-10, 화면별 이행중) ===== */ --dg-bg: #0F0F0F; --dg-surface: #1A1A1A; /* 바탕 «한 겹 위» — 카드·시트·입력칸 */ --dg-surface-muted: #242424; --dg-divider: #2A2A2A; --dg-text-primary: #FFFFFF; --dg-text-body: #D4D4D4; --dg-text-secondary: #A1A1A1; /* 보조 설명 — 검정 배경 대비 7.0:1 */ --dg-accent: #FF5600; /* 로고 주황 — 어두운 판에서는 로고와 같은 주황을 쓴다 (2026-09-08) */ --dg-accent-soft: rgba(255, 86, 0, 0.16); --dg-accent-border: rgba(255, 86, 0, 0.40); --dg-accent-shadow: rgba(255, 86, 0, 0.40); --dg-radius-sm: 8px; --dg-radius-md: 12px; --dg-radius-lg: 20px; --dg-radius-xl: 28px; --dg-radius-full: 999px; --dg-shadow-card: 0 4px 20px rgba(0,0,0,0.55); --dg-shadow-elevated: 0 8px 30px rgba(0,0,0,0.65); --dg-shadow-accent: 0 6px 20px rgba(255, 86, 0, 0.40); --dg-space-1: 4px; --dg-space-2: 8px; --dg-space-3: 12px; --dg-space-4: 16px; --dg-space-5: 20px; /* 화면 좌우 기준선 (2026-08-03 메인 개편) */ --dg-space-6: 24px; --dg-space-8: 32px; --dg-space-10: 40px; /* 40px = 섹션 사이 */ --dg-space-12: 48px; --dg-space-16: 64px; /* 면·흐린 글씨 (2026-08-03 메인 개편에서 추가) */ --dg-line-2: #4A4A4A; /* 진한 선·비활성 (점·화살표) */ --dg-fill: #1F1F1F; /* 옅은 면 — 썸네일 자리·번호 동그라미 */ --dg-surface-soft: #161616; /* 푸터처럼 «본문과 살짝 가르는» 면 */ --dg-text-faint: #6E6E6E; /* 푸터 글씨처럼 가장 흐린 글씨 */ /* ===== 타이포 토큰 (타이포 가이드 §10, 모바일 스케일) — 이 값만 사용 ===== */ --fs-display-score: 64px; --fs-display-hero: 36px; --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 20px; --fs-card-title: 18px; --fs-body-lead: 17px; --fs-body: 16px; --fs-body-small: 14px; --fs-label: 14px; --fs-caption: 13px; --fs-micro: 12px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; }*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }html{ font-size:16px; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; overscroll-behavior-x:none; }body{ font-family:var(--font-sans); background: var(--color-bg); color:var(--color-text-primary); line-height:1; letter-spacing:-0.025em; overflow-x:hidden; min-height:100vh; min-height:100dvh; overscroll-behavior-x:none; word-break:keep-all; overflow-wrap:break-word; } /* 폼 요소는 자간을 상속하지 않으므로 전역 자간을 명시적으로 이어받음 */button, input, optgroup, select, textarea{ letter-spacing:inherit; }a{ text-decoration:none; color:inherit; }button{ border:none; background:none; cursor:pointer; font-family:inherit; font-size:inherit; }img{ display:block; max-width:100%; }::-webkit-scrollbar{ width:0; display:none; }body{ scrollbar-width:none; } /* App Container */#app-container{ max-width:var(--max-width); margin:0 auto; background:var(--color-bg); min-height:100vh; min-height:100dvh; position:relative; } /* 좌우 그림자 없앰 (2026-08-03 사장님 지시) */ /* 노치(상단 safe-area) 채움 — 상태바 영역을 바탕색과 같게 (2026-09-08 어두운 판) */#notch-fill{ position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--max-width); height:env(safe-area-inset-top); background: var(--color-bg); z-index:150; pointer-events:none; transition:background .25s ease; } /* 상단 흐린 배경 (헤더+탭+캐러셀 뒤에 깔리는 blur 레이어) */#page-main{ position:relative; padding-bottom:0; } /* 콘텐츠가 짧아도 푸터가 항상 화면 맨 아래에 붙도록 (sticky footer) */#page-main.active{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; } /* ⚠️ 본문이 «남는 자리를 먹어야» 푸터가 바닥까지 내려간다. 이게 없으면 (예: 상품 0개인 «기타» 탭) 푸터가 본문 바로 밑에 딱 붙어 끝나고, 그 아래로 빈 바탕이 남았다 (2026-09-10 사장님 지적). 1 0 auto = 남으면 늘어나고, 내용이 길면 줄어들지 않는다. */ #page-main.active > .mp-content{ flex:1 0 auto; } /* ══ 하단바 — 떠 있는 «유리 알약» (2026-09-09 사장님 확정: B안 + 글래스모피즘) ══ 전에는 화면 폭을 꽉 채우고 바닥에 붙은 판이었다(이름만 floating 이었다). 지금은 좌우 16px 를 띄우고 완전히 둥근 알약으로 띄운다. «유리»의 정체 — 이 넷이 모여야 유리로 보인다: ① 흰빛을 아주 얇게 (rgba(255,255,255,.09)) ② 뒤를 세게 흐리고 색을 진하게 (blur+saturate) ③ 테두리 (rgba(255,255,255,.14)) ④ 윗면에 «빛 걸린 선» (::before 그러데이션 + inset 그림자) ⚠️ 유리는 «뒤에 색이 있어야» 유리로 보인다. 상품 그림이 없는 지금은 옅은 회색 바에 가깝다. */ /* 하단바가 없는 화면(로그인·결제·문항 등)에서는 감춘다. ⚠️ .floating-nav 의 display:flex 가 브라우저 기본 [hidden] 규칙을 이겨서, 이 한 줄이 없으면 hidden 을 걸어도 그대로 보인다. */ .floating-nav[hidden]{ display:none; } .floating-nav{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--dg-space-4) + env(safe-area-inset-bottom)); z-index:200; width:min(calc(var(--max-width) - 32px), calc(100% - 32px)); display:flex; align-items:center; gap:4px; padding:7px; border-radius:var(--dg-radius-full); background:rgba(255,255,255,0.09); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); border:1px solid rgba(255,255,255,0.14); /* 바깥 그림자는 «없다» — 2026-09-10 사장님이 보시고 없애기로 하셨다. 막대를 띄워 보이게 하는 몫은 아래 .fnav-floor(넓게 깔리는 검정)와 이 요소의 테두리·윗면 빛(inset)이 맡는다. 🚨 되살릴 일이 있으면 «번지는 거리»를 20px 안으로 둘 것 (예: 0 2px 8px). 전에 쓰던 0 10px 34px 는 «가로선»의 원인이었다 — 사파리는 스크롤되는 화면에서 붙박이(fixed) 요소를 «주소창 위»에서 자르는데, 그 자리가 막대에서 20px 밖에 안 떨어져 있어 34px 짜리 그림자가 «아직 짙은 채로» 잘렸다. 짙은 것이 잘리면 선이 된다. ⚠️ 짙기만 낮추는 것으로는 안 된다 — 선이 옅어질 뿐 그대로 남는다. */ box-shadow:inset 0 1px 0 rgba(255,255,255,0.22); transition:transform var(--transition-normal), opacity var(--transition-normal); } /* 하단바 뒤 검정 (2026-09-10 사장님 지적 → 여러 번 헛짚고 잡은 결론). (막대의 바깥 그림자는 2026-09-10에 없앴다 — 위 .floating-nav 주석 참고. 지금 하단바 둘레를 어둡게 하는 것은 이 이음 «하나»뿐이다.) 무엇이 문제였나: 사파리(아이폰)에서 하단바 아래에 «가로선»이 그어지고 그 아래로 카드가 다시 밝게 보였다. 그 선은 검정이 끝나는 자리다. 왜 «바닥까지 늘리기»로는 못 고치나 — 폰에 색을 넣어 확인했다(2026-09-10): · 「오늘의 운세」(화면이 안 넘치는 쪽)에서는 빨강이 주소창 «뒤»까지 꽉 찼다 · 「홈」(스크롤되는 쪽)에서는 주소창 위에서 딱 끊기고 그 아래로 카드가 보였다 즉 사파리는 «스크롤이 있는 화면»에서만 붙박이(fixed) 요소를 주소창 위까지로 자른다. 주소창 뒤는 «스크롤되는 내용»의 자리라서 붙박이는 거기까지 못 간다. 화면마다 넘치고 안 넘치고가 달라지므로 이 방향으로는 «어떤 화면에서든» 되게 만들 수 없다. → 다시 시도하지 말 것. 늘려도, 음수로 내려도, 덧칠을 붙여도 안 된다(셋 다 해 봤다). 그래서 고른 길: 검정을 «바닥까지 끌고 가는» 대신 «바닥에 닿기 전에 스르르 사라지게» 한다. 끝나는 자리에 색 차이가 없으면 선이 안 생긴다. 가장 짙은 데는 하단바 바로 아래이고, 거기서부터 아래로 50px 쯤에 걸쳐 투명해진다. ⚠️ 맨 아래를 «진하게»(불투명하게) 되돌리지 말 것 — 그 순간 선이 다시 생긴다. 보이고 숨는 것은 app/1-core.js 의 syncFnav() 가 하단바와 «같이» 다룬다. */ .fnav-floor{ position:fixed; left:0; right:0; bottom:0; z-index:199; pointer-events:none; height:calc(var(--fnav-h) + var(--fnav-gap) + env(safe-area-inset-bottom) + 34px); background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.34) 28%, rgba(0,0,0,0.56) 52%, rgba(0,0,0,0.52) 72%, rgba(0,0,0,0.22) 90%, rgba(0,0,0,0) 100%); } .fnav-floor[hidden]{ display:none; } /* 2026-09-10 — 사장님이 «하단바 둘레 어두운 것까지 없애자» 하셔서 «꺼» 둔다. 되살리려면 아래 한 줄만 지우면 된다. 위 규칙은 그대로 살아 있다. ⚠️ 되살릴 때도 «바닥에 닿기 전에 사라지는» 지금 모양을 지킬 것 — 맨 아래를 진하게 만들면 사파리에서 가로선이 돌아온다. */ .fnav-floor{ display:none; } /* 윗면 «빛 걸린 선» — 유리처럼 보이게 하는 핵심. 칸들보다 아래에 깔린다. */ .floating-nav::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 42%); } /* 맨 아래(푸터)까지 스크롤하면 아래로 사라짐 */ /* 평소엔 아이콘만. 지금 보고 있는 칸만 주황 알약으로 «넓어지며» 이름이 나온다. flex 값이 늘어나는 것이라 폭이 부드럽게 벌어진다 — 글자를 넣었다 뺐다 하는 게 아니다. */ .fnav-item{ position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; gap:7px; height:44px; padding:0; border-radius:var(--dg-radius-full); background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.62); font-size:13px; font-weight:var(--fw-semibold); white-space:nowrap; /* 폭이 «자라는» 것은 flex-grow 다. 줄임말 flex 로 적으면 브라우저가 애니메이션을 안 걸어 줄 수 있어 늘어나는 값을 대놓고 적는다 (2026-09-09). */ transition:background var(--transition-fast), color var(--transition-fast), flex-grow .28s cubic-bezier(.25,.46,.45,.94); } .fnav-item svg{ width:20px; height:20px; display:block; flex:0 0 auto; } /* 이름표는 display 로 껐다 켜면 «툭» 나타난다(display 는 애니메이션이 안 된다). 폭과 투명도로 여닫아 알약이 자라는 속도에 맞춰 같이 흐르게 한다. */ .fnav-item span{ display:inline-block; max-width:0; opacity:0; overflow:hidden; transition:max-width .28s cubic-bezier(.25,.46,.45,.94), opacity .2s ease, margin-left .28s cubic-bezier(.25,.46,.45,.94); margin-left:-7px; /* 닫혔을 때는 아이콘 옆 간격(gap 7)까지 지운다 */ } /* 지금 칸 = «맑은 유리 알약» + 주황 아이콘 (2026-09-09 사장님 지시로 D안과 같게 맞춤). ⚠️ 한 번 «주황 유리»(rgba(255,86,0,.65))로 넣었다가 되돌렸다 — 주황을 비치게 하면 뒤 검정이 섞여 rgb(179,69,13) 같은 갈색빛이 되어, 유리라기보다 «탁한 주황»으로 보였다. 알약 자체는 색을 거의 안 넣고 «흰빛»만 얹어야 뒤가 그대로 비쳐 진짜 유리가 된다. → 주황은 «아이콘»에만 남긴다. 뒤에 주황 그림이 오면 알약이 그 색을 그대로 머금는다. 대비: 흰 글씨 9.7 · 주황 아이콘 3.1 (아이콘 기준 3.0 통과) */ .fnav-item.active{ flex-grow:1.9; background:rgba(255,255,255,0.14); backdrop-filter:blur(6px) saturate(180%); -webkit-backdrop-filter:blur(6px) saturate(180%); border:1px solid rgba(255,255,255,0.20); box-shadow:inset 0 1px 0 rgba(255,255,255,0.30); color:#FFFFFF; } /* 아이콘도 흰색 — 글자와 같게 (2026-09-09 사장님 지시. 잠깐 주황이었다). 주황은 «지금 칸»의 표시가 아니라, 유리 뒤로 비치는 그림에서 나오게 둔다. */ .fnav-item.active span{ max-width:7em; opacity:1; margin-left:0; }.hero-bg{ display:none; position:absolute; top:0; left:0; right:0; height:calc(176px + min(var(--max-width), 100vw) * 1.0667); z-index:0; overflow:hidden; pointer-events:none; }.hero-bg-img{ position:absolute; inset:-48px; background-size:cover; background-position:center top; filter:blur(24px); transform:scale(1.15); transition:background-image .4s ease; }.hero-bg-dark{ position:absolute; inset:0; background:rgba(17,17,17,0.5); }.hero-bg-veil{ position:absolute; left:0; right:0; bottom:0; height:192px; background:linear-gradient(to bottom, rgba(15,15,15,0) 0%, rgba(15,15,15,0.55) 67%, var(--color-bg) 100%); } /* 캐러셀은 흐린 배경 위에 올라오도록 (헤더/탭은 sticky라 이미 위에 있음) */#page-main > #main-carousel{ position:relative; z-index:1; } /* Page system */.page{ display:none; min-height:100vh; min-height:100dvh; }.page.active{ display:block; animation:fadeIn .3s ease; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } /* ── 움직임: 카드 등장 스태거 · 누르는 피드백 · 스크롤 등장 ── */ /* 1) 카드 순차 등장: 전체 테스트 페이지(2열 그리드)의 카드가 하나씩 스르륵 올라오며 등장. ⚠️ 2026-07-29 수리 — 아래 대기시간(animation-delay)만 있고 «무슨 애니메이션인지»를 적는 줄이 빠져 있어서 그동안 아무 동작도 하지 않았다(2026-07-01 파일 유실 때 날아간 것으로 보임). 대기 간격 60ms는 디자인 가이드가 정한 «연속 등장 60~100ms» 범위 그대로다. ※ fill-mode를 backwards로 두는 이유: 대기하는 동안에는 시작 모습(안 보임)을 유지하되, 끝난 뒤엔 원래 스타일로 돌아가야 «누르면 살짝 눌리는» :active 효과가 그대로 살아난다. ※ .lr-test-list/.lr-test-item 은 지금 없는 화면이라 선택자에서 걷어냈다. */.tg-grid .tg-card{ animation:fadeInUp .45s ease backwards; }.tg-grid .tg-card:nth-child(1){ animation-delay:.04s; }.tg-grid .tg-card:nth-child(2){ animation-delay:.10s; }.tg-grid .tg-card:nth-child(3){ animation-delay:.16s; }.tg-grid .tg-card:nth-child(4){ animation-delay:.22s; }.tg-grid .tg-card:nth-child(5){ animation-delay:.28s; }.tg-grid .tg-card:nth-child(6){ animation-delay:.34s; }.tg-grid .tg-card:nth-child(7){ animation-delay:.40s; }.tg-grid .tg-card:nth-child(8){ animation-delay:.46s; }.tg-grid .tg-card:nth-child(n+9){ animation-delay:.52s; } /* 2) 누르는 피드백 통일: 모든 카드가 살짝 눌리는 느낌 */.tg-card{ transition:transform var(--transition-fast); }.tg-card:active{ transform:scale(0.97); } /* 3) 스크롤 등장: 화면에 들어올 때 아래에서 떠오르며 나타남 */.reveal{ opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }.reveal.in-view{ opacity:1; transform:none; } /* 접근성: 휴대폰에서 '동작 줄이기'를 켠 사용자는 움직임 없이 결과만 보이게 한다. (어지럼증·멀미로 켜두는 설정이라 꼭 지킨다.) ⚠️ 자동 넘김(캐러셀·이벤트 배너)과 후기 흐름은 CSS가 아니라 JS 타이머라 여기서 못 막는다. → app/1-core.js·6-main.js의 prefersReducedMotion() 참고. */ @media (prefers-reduced-motion: reduce) {*, *::before, *::after{ animation-duration:.01ms !important; animation-delay:0s !important; /* 카드 순차 등장의 대기시간까지 없앤다(안 그러면 빈 화면이 그만큼 보인다) */ animation-iteration-count:1 !important; /* 무한 반복(말풍선 흔들림·깜빡임)을 1회로 */ transition-duration:.01ms !important; scroll-behavior:auto !important; } /* 스크롤 등장 요소는 처음부터 보이게(관찰자가 안 돌아도 안전하게) */.reveal{ opacity:1; transform:none; } } /* ============================================ MAIN PAGE - Header ============================================ */ /* 배경은 아래 «#page-main #main-header» 에서 흰색으로 고정한다(헤더는 메인 화면에만 있다). */#main-header{ position:sticky; top:0; z-index:100; height:calc(var(--header-height) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }.header-inner{ display:flex; align-items:center; justify-content:space-between; height:var(--header-height); padding:0 20px; }.logo-area{ display:flex; align-items:center; cursor:pointer; padding:12px 0; margin:-12px 0; } /* 로고 그림 (2026-09-08 진짜 로고 적용 — 그전엔 «라이프사주» 글자였다). 가로로 긴 글자 로고(가로:세로 = 5.32:1)라 «높이»로만 크기를 잡는다. 폭은 알아서 따라온다. ⚠️ 2026-09-08 사이트 바탕을 검정으로 바꾸면서 «어두운 바탕 판»(logo-white.svg)이 기본이 되었다. «A»의 오른쪽 획이 검정인 판(logo.svg)은 검은 바탕에서 통째로 묻혀 «S/ JU» 처럼 보인다. 2026-09-09 그 획을 흰색 → 회색(#9FA0A0)으로 낮췄다(사장님 지시). 흰색은 너무 튀어서 주황보다 먼저 눈에 들어왔다. 파일 이름은 logo-white.svg 그대로 둔다 — «어두운 바탕용»이라는 뜻으로 읽으면 된다. 밝은 면 위에 로고를 얹는 자리가 생기면 그 자리에서만 logo.svg 로 되돌린다. */ .brand-logo{ display:block; height:16px; width:auto; content:url("images/logo-white.svg"); } /* 2026-09-09 사장님 지시로 18 → 16 */ #main-footer .brand-logo{ height:20px; } /* 2026-09-09 사장님 지시로 22 → 20 */ /* 밝은 면 위에 얹는 자리 — 지금은 없다. 생기면 여기에 선택자를 한 줄 더 적는다: .어떤밝은자리 .brand-logo{ content:url("images/logo.svg"); } */ .header-right{ display:flex; align-items:center; gap:12px; }.hamburger-btn{ color:var(--color-text-primary); padding:0; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; margin:-9px -12px -9px 0; } /* 28×26 → 44×44 */ /* 아이콘 그림틀이 28×28 정사각이다(줄 자체는 그 안에서 18.7×16). 20×18로 두면 찌그러진다. */ /* Sidebar Menu */ /* 사이드바 열림: 상하 safe-area(상태바·하단바) 영역도 흰색으로 맞춤 */body.menu-open{ background: var(--dg-surface); }.side-menu-overlay{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:998; opacity:0; pointer-events:none; transition:opacity var(--transition-normal); }.side-menu-overlay.show{ opacity:1; pointer-events:auto; }.side-menu{ position:fixed; top:0; right:-320px; width:320px; max-width:88vw; height:100vh; height:100dvh; background: var(--color-bg); z-index:999; transition:right var(--transition-normal); display:flex; flex-direction:column; }.side-menu.show{ right:0; box-shadow:-4px 0 20px rgba(0,0,0,0.12); } /* 그림자는 열렸을 때만(닫힘 상태에서 화면 우측으로 새던 것 방지) */.side-menu-header{ display:flex; align-items:center; justify-content:flex-end; height:calc(60px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 20px 0; flex-shrink:0; }.close-menu-btn{ font-size:22px; color:var(--dg-text-primary); padding:0; min-width:44px; min-height:44px; line-height:1; display:flex; align-items:center; justify-content:center; margin:-8px; }.side-menu-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 20px; } /* 유저 카드 */.side-card{ background: var(--dg-surface-soft); border-radius:var(--dg-radius-sm); overflow:hidden; margin-bottom:24px; }.side-user-section{ padding:0; }.side-user-row{ display:flex; align-items:center; gap:12px; cursor:pointer; padding:16px 20px; }.side-user-avatar{ width:40px; height:40px; border-radius:50%; background:var(--dg-accent); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; flex-shrink:0; }.side-user-text{ flex:1; min-width:0; }.side-user-title{ font-size:16px; line-height:1.3; font-weight:700; color:var(--color-text-primary); margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.side-user-sub{ font-size:12px; line-height:1.4; color:var(--color-text-light); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.side-user-chevron{ font-size:22px; color:#C1C1C1; flex-shrink:0; line-height:1; }.side-card-divider{ height:1px; background:var(--color-border); margin:0 20px; }.side-card-links{ display:flex; flex-direction:column; gap:12px; padding:16px 0; }.side-card-item{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 20px; margin:-8px 0; background:none; border:none; font-size:16px; line-height:1.45; font-weight:600; color:var(--color-text-primary); cursor:pointer; font-family:var(--font-sans); text-align:left; }.side-card-item-ic{ font-size:16px; } /* 아코디언 (선 없는 큰 글씨 목록) */.side-accordion{ display:flex; flex-direction:column; gap:0; padding:0; } /* 줄 목록 — 간격 없이 줄 높이로만 (2026-08-04 사장님 지시) */.side-acc-item{ border:none; }.side-acc-header{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 4px; min-height:48px; background:none; border:none; font-size:20px; line-height:1.3; font-weight:700; color:var(--color-text-primary); cursor:pointer; font-family:var(--font-sans); text-align:left; } /* 카테고리 펼침 표시 — 그림 자체가 «아래»를 보고 있어 접힘 상태는 안 돌린다(펼치면 180° 뒤집힘) */.side-acc-arrow{ width:24px; height:24px; font-size:0; color:#C1C1C1; display:inline-flex; align-items:center; justify-content:center; transition:transform 0.25s ease; }.side-acc-item.open .side-acc-arrow{ transform:rotate(180deg); }.side-acc-body{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; max-height:0; overflow:hidden; transition:max-height .3s ease; }.side-acc-item.open .side-acc-body{ padding:12px 0; }.side-acc-body li{ padding:8px 0; margin:-4px 0; font-size:14px; line-height:1.45; font-weight:400; color:var(--color-text-secondary); cursor:pointer; }.side-acc-body li:active{ color:var(--color-text-primary); } /* 아직 테스트가 없는 카테고리(생활·디지털) — 누를 수 없는 안내 글 */.side-acc-body li.side-acc-soon{ cursor:default; opacity:.55; }.side-acc-body li.side-acc-soon:active{ color:var(--color-text-secondary); } /* 하단 */.side-bottom{ flex-shrink:0; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); }.side-kakao-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px; border-radius:var(--dg-radius-md); background:#FEE500; color:#000; /* 카카오 브랜드 규정 — 노랑 위 검정 글자 고정 */ border:none; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font-sans); margin-bottom:12px; transition:opacity var(--transition-fast); }.side-kakao-btn:active{ transform:scale(0.99); }.side-hours{ font-size:12px; line-height:1.4; color:var(--color-text-light); text-align:center; } /* Category Tabs — ⚠️ 2026-07-29 삭제. #category-tabs 요소가 화면에 더 이상 없다(index.html에 없음). 여기 있던 규칙 2줄과 아래 «흰 글자/검은 글자» 상태 규칙 6줄을 함께 걷어냈다. */ /* Carousel */#main-carousel{ overflow:hidden; background:transparent; padding:36px 0 24px; touch-action:pan-y; }.carousel-track{ display:flex; gap:0; will-change:transform; align-items:center; }.carousel-slide{ flex:0 0 80%; border-radius:var(--dg-radius-sm); overflow:hidden; transform:scale(0.92); transition:transform .45s cubic-bezier(.25,.46,.45,.94); box-shadow:0 4px 24px 0 rgba(255,255,255,0.2); }.carousel-slide.active{ transform:scale(1); }.carousel-dots{ display:flex; align-items:center; justify-content:center; gap:7px; padding:12px 0 0; background:transparent; position:relative; z-index:1; }/* 캐러셀 «넘김 표시» 점 — 2026-09-08 사장님이 A안으로 확정 (전엔 ‹ 1/3 › 화살표+숫자). ⚠️ 점 자체는 7px 라 손가락으로 누르기엔 너무 작다 → ::after 로 «눌리는 범위»만 사방으로 넓힌다. 점을 키우지 않고 범위만 넓히는 것 — 보이는 크기와 눌리는 크기는 달라도 된다. */ .dot{ position:relative; width:7px; height:7px; border-radius:var(--dg-radius-full); background:var(--color-dot-inactive); cursor:pointer; transition:width .28s cubic-bezier(.25,.46,.45,.94), background .28s; } .dot::after{ content:''; position:absolute; inset:-9px -5px; } /* 나오지 않은 슬라이드 = 점 */.dot.active{ width:22px; background:var(--dg-accent); } /* 현재 슬라이드 = 짝대기 *//* ⚠️ 2026-07-29 삭제 — 여기 있던 «어두운 히어로 배경 위 흰 글자 → 스크롤하면 검은 글자» 규칙 15줄. 그 디자인은 이미 폐기됐다: 흐린 히어로 배경(.hero-bg)은 display:none 이고, 헤더는 «#page-main #main-header» 에서 항상 흰 배경으로 고정돼 있다. 게다가 상태를 바꿔줄 .solid 클래스를 붙이는 코드가 어디에도 없어서, 이 규칙들은 한 번도 동작한 적이 없다. («#main-header .hamburger-icon{ filter:none } /* Stats Section */ /* 실시간 구매 후기 */ /* (2026-08-03) 옛 후기 영역 패딩(48/24/40) 삭제 — 새 후기 섹션은 좌우 20px 규칙을 따른다 */ /* 맨 위·맨 아래 후기에 흰색 그라디언트를 덮어 자연스럽게 흐려지게 */.review-star{ width:14px; height:14px; color:var(--dg-accent); display:inline-flex; flex-shrink:0; }.review-star svg{ width:100%; height:100%; fill:currentColor; } /* 못 받은 별 — 자리는 지키고 색만 흐리게. 어두운 판에서도 «비어 있는 별»로 읽히는 회색 */ .review-star.off{ color:#4A4A4A; } /* 아직 후기가 안 채워진 빈 칸: 회색 썸네일 + 연한 안내 문구(별점·작성시간 틀은 유지) */ /* ============================================ SUB PAGES - Shared ============================================ */.sub-header{ display:flex; align-items:center; justify-content:space-between; height:calc(var(--header-height) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 20px 0; background: var(--color-bg); border-bottom:0; box-shadow:0 6px 6px -6px rgba(17,17,17, calc(var(--sc, 0) * 0.16)); position:sticky; top:0; z-index:100; }.back-btn{ color:#757575; padding:0; width:24px; } /* ── 아이콘 (2026-08-03 사장님이 준 모양) ───────────────────────────── 그림(path)은 index.html 맨 위 «아이콘 모음»에 한 번만 적어 두고, 각 버튼은 로 가져다 쓴다. ⇒ 모양을 바꾸려면 index.html 의 그 path 한 줄만 고치면 사이트 전체가 따라온다. 색은 버튼의 글자색(currentColor)을 그대로 따라간다(파일이 아니라 마크업이라 가능). */.ic{ display:block; width:24px; height:24px; flex:0 0 auto; }.hamburger-icon{ display:block; width:28px; height:28px; flex:0 0 auto; } /* 아이콘만 든 버튼 — 안에 글자가 없으므로 가운데 정렬만 해 준다 */.back-btn, .intake-back, .qt-exit, .close-menu-btn, .coupon-picker-close, .lrdp-exit, .side-user-chevron, .mypage-menu .arrow, .side-acc-arrow{ display:inline-flex; align-items:center; justify-content:center; font-size:0; }.back-btn, .intake-back{ justify-content:flex-start; color:#757575; }.sub-title{ font-size:16px; font-weight:700; position:absolute; left:50%; transform:translateX(-50%); }.header-spacer{ width:36px; }.sub-exit{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; padding:0; font-size:20px; line-height:1; color:var(--color-text-secondary); cursor:pointer; }.page-body{ padding:24px 20px 60px; } /* Form */.form-group{ display:flex; flex-direction:column; gap:16px; }.input-wrap{ display:flex; flex-direction:column; gap:8px; }.input-wrap label{ font-size:14px; font-weight:600; color:var(--dg-text-primary); }.input-wrap input, .input-wrap select, .input-wrap textarea{ width:100%; height:52px; padding:0 16px; border:1px solid var(--color-border); border-radius:var(--dg-radius-md); font-size:16px; font-family:var(--font-sans); color:var(--color-text-primary); background: var(--dg-surface); transition:border var(--transition-fast); outline:none; }.input-wrap input:focus, .input-wrap select:focus, .input-wrap textarea:focus{ border-color:var(--dg-accent); background: var(--dg-surface); } /* 누르는 중엔 테두리만 오렌지 — 가이드 16-6 */.input-wrap input:disabled{ background: var(--dg-fill); color:#A1A1A1; }.input-wrap textarea{ resize:vertical; min-height:120px; } /* iOS Safari에서 input[type=date] 높이/정렬 통일 */.input-wrap input[type="date"]{ -webkit-appearance:none; appearance:none; min-height:46px; line-height:1.2; display:block; }.input-wrap input[type="date"]::-webkit-date-and-time-value{ text-align:left; min-height:1.2em; }.input-wrap input[type="date"]::-webkit-calendar-picker-indicator{ opacity:0.6; }.input-hint{ font-size:12px; color:var(--dg-text-secondary); } /* Buttons */.btn-primary{ width:100%; height:54px; background:var(--color-primary); color:var(--color-on-light); font-size:16px; font-weight: var(--fw-semibold); border:none; cursor:pointer; transition:background var(--transition-fast); margin-top:12px; }.btn-primary:hover{ background:var(--color-primary-dark); }.btn-primary:active{ transform:scale(0.98); } /* 회원정보 수정 페이지 — 패딩→마진, 저장 상단마진 16, 회원탈퇴는 작은 밑줄 링크 */#page-edit-profile.active{ display:flow-root; }#page-edit-profile .page-body{ padding:0; margin:24px 20px; }#page-edit-profile .btn-primary{ margin-top:24px; }#edit-pw-section{ display:flex; flex-direction:column; gap:16px; } /* 안 하면 비밀번호 세 칸이 서로 붙는다 (2026-08-04) */.withdraw-link{ align-self:center; margin:0; padding:0; background:none; border:0; font-size:12px; color:var(--dg-text-secondary); text-decoration:underline; text-underline-offset:2px; cursor:pointer; } /* Section */.section-divider{ border:none; border-top:1px solid var(--dg-fill); margin:24px 0; } /* 폼 안 섹션 사이 = 40px + 얇은 선 (폼 자체 간격 16px 과 합쳐 40) */.section-title{ font-size:16px; font-weight:700; color:var(--dg-text-primary); margin-bottom:0; } /* 아래 16px 은 폼 간격이 준다 */ /* ============================================ LOGIN PAGE ============================================ */.login-links{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; color:var(--color-text-secondary); }.login-links a:hover{ color:var(--color-primary); }.login-links .divider{ color:var(--color-text-light); } /* ============================================ LOGIN - New Design ============================================ *//* 로그인 화면(page-login)은 2026-09-10 에 팝업으로 바뀌면서 없앴다 — 아래 조각들은 팝업이 그대로 쓴다 */.login-actions{ display:flex; flex-direction:column; gap:16px; align-items:center; }.login-terms-note{ line-height:1.6; color:var(--color-text-secondary); text-align:center; margin:0; }.login-terms-note a{ color:var(--color-text-secondary); text-decoration:underline; }.login-guide{ margin:0 0 20px; padding:14px 16px; background: var(--dg-surface-soft); border:1px solid var(--color-border); border-radius:var(--dg-radius-sm); }.login-guide-title{ margin:0 0 6px; color:var(--color-text-primary); }.login-guide-body{ margin:0; line-height:1.7; color:var(--color-text-secondary); }.login-guide-body strong{ color:var(--color-text-primary); font-weight:600; }.login-alt-link{ display:block; margin:0; padding:0; background:none; border:none; font-size:14px; color:#757575; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }.login-terms-bottom{ margin-top:auto; }.terms-link{ color:var(--color-text-secondary); text-decoration:underline; } /* ===== 약관·개인정보처리방침 (법적 문서) ===== */.legal-body{ padding:24px 20px 60px; }/* 글자 크기는 여섯 단(10·12·14·16·20·26) 안에서만 — 13·15px 은 가이드가 금지한 사이값이라 2026-08-04에 걷어냈다. 본문 14px 은 사장님 판단으로 유지(약관은 작은 글씨가 낫다). 조 제목 위 여백도 26 → 24 로 스케일에 맞췄다. */ .legal-body .legal-meta{ color:var(--dg-text-secondary); margin:0 0 20px; }.legal-body > p{ font-size:var(--fs-body-small); line-height:1.6; color:var(--dg-text-primary); margin:0 0 16px; }.legal-body h3{ font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--dg-text-primary); margin:24px 0 8px; }.legal-body a{ color:var(--dg-text-primary); text-decoration:underline; }.legal-company{ margin-top:32px; padding-top:20px; border-top:1px solid var(--dg-divider); }.legal-company p{ font-size:var(--fs-micro); line-height:1.6; color:var(--dg-text-secondary); margin:0; }.login-alt-link:hover{ color:var(--color-text-primary); }.btn-kakao{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:54px; border-radius:var(--dg-radius-md); background:#FEE500; color:#000; /* 카카오 브랜드 규정 — 노랑 위 검정 글자 고정 */ font-size:16px; font-weight:700; border:none; cursor:pointer; transition:opacity var(--transition-fast); }.btn-kakao:hover{ opacity:.9; }.btn-kakao:active{ transform:scale(0.99); }.btn-kakao-icon{ display:inline-block; }.btn-outline{ width:100%; height:54px; background: var(--dg-surface); border:1px solid var(--color-border); cursor:pointer; transition:background var(--transition-fast); }.btn-outline:active{ transform:scale(0.99); }.login-body .login-links{ justify-content:flex-start; margin-top:32px; padding:0 4px; }.find-desc{ color:var(--color-text-secondary); line-height:1.6; margin:28px 0 24px; } /* LOGIN-EMAIL (일반 로그인) */.login-email-body{ padding:24px 20px 32px; }.login-email-title{ font-size:28px; font-weight:700; text-align:center; margin:0 0 24px; color:var(--color-text-primary); }.login-email-form{ display:flex; flex-direction:column; gap:16px; margin-bottom:0; }.login-email-field{ display:flex; flex-direction:column; gap:8px; }.login-email-field input{ border:1px solid var(--color-border); border-radius:var(--dg-radius-md); padding:16px; background: var(--dg-surface); color:var(--color-text-primary); outline:none; transition:border-color var(--transition-fast); }.btn-dark{ width:100%; height:54px; background:var(--color-primary); color:var(--color-on-light); font-size:16px; font-weight: var(--fw-semibold); border:none; cursor:pointer; transition:opacity var(--transition-fast); margin-top:16px; }.btn-dark:hover{ opacity:.85; }.btn-dark:active{ transform:scale(0.99); }.login-email-body .login-links{ justify-content:flex-start; margin-top:24px; padding:0 4px; }.login-email-field .field-hint{ color:var(--color-text-light); font-weight:400; margin-left:4px; }.login-email-body .terms-group{ margin-top:0; background: var(--dg-surface-soft); }.login-email-title:has(+ .find-desc), .login-email-title:has(+ .rv-intro){ margin-bottom:8px; }.login-email-title + .find-desc{ text-align:center; margin:0 0 24px; }.find-result{ text-align:center; padding:8px 0 0; }.find-result-label{ color:var(--color-text-secondary); margin:0 0 10px; }.find-result-value{ font-weight:700; color:var(--color-text-primary); margin:0 0 6px; letter-spacing:.5px; }.find-result-meta{ color:var(--color-text-light); margin:0 0 28px; }.find-result .btn-dark{ margin-top:0; margin-bottom:10px; } /* ============================================ SIGNUP - Terms ============================================ */.terms-group{ background: var(--dg-surface-soft); border:1px solid var(--color-border); border-radius:var(--dg-radius-sm); padding:16px; display:flex; flex-direction:column; gap:10px; }.check-label{ display:flex; align-items:center; gap:8px; cursor:pointer; }.check-label input[type="checkbox"]{ width:18px; height:18px; }.terms-sub{ padding-left:4px; color:var(--color-text-secondary); }.terms-divider{ border:none; border-top:1px solid var(--dg-divider); margin:4px 0; } /* ============================================ MYPAGE ============================================ */.profile-card{ display:flex; align-items:center; gap:16px; min-height:56px; padding:0; background: transparent; color:var(--dg-text-primary); border-bottom:0; } /* 바탕색 없음 — 회색 띠가 보이면 안 된다 (2026-09-10 사장님 지시) */ /* 카드는 누르는 자리가 아니다 — 버튼만 눌린다 (2026-08-05) */ /* 아래 선 없음 — 배너와 여백으로만 나눈다 (2026-08-04 사장님 지시) */.profile-avatar{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700; color:#fff; overflow:hidden; }.profile-name{ font-weight:600; color:var(--dg-text-primary); }.profile-email{ color:var(--dg-text-secondary); margin-top:4px; }/* 회원정보 수정 — 가이드 §8 «보조 버튼»: 흰 배경 + 1px #E1E1E1 + 글자 #424242 · 둥글기 12. 카드 한 줄 안에 들어가는 자리라 팝업 버튼(48)보다 한 단 낮은 40px 로 둔다. */ .profile-edit-btn{ margin-left:auto; flex-shrink:0; height:40px; padding:0 var(--dg-space-3); background: var(--dg-surface); border:1px solid var(--dg-divider); border-radius:var(--dg-radius-md); font-family:var(--font-sans); font-size:12px; font-weight:var(--fw-semibold); color:var(--dg-text-body); cursor:pointer; white-space:nowrap; } .profile-edit-btn:active{ background:var(--dg-fill); }.mypage-menu{ list-style:none; margin-top:0; }/* 글자 14/500 — 2026-08-05 사장님 지시로 16 → 14 로 한 단 낮췄다(가이드 §16-4 도 같이 고침) */ /* 좌우 4px 은 «일부러» 준 것 (2026-08-05 사장님 지시) — 글과 › 가 기준선에서 4px 안으로. 구분선은 li 에 걸려 있어 폭을 그대로 다 쓴다(선은 끝까지, 글만 살짝 안쪽). */ .mypage-menu li{ display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:16px var(--dg-space-1); border-bottom:1px solid var(--dg-fill); cursor:pointer; font-size:14px; font-weight:500; color:var(--dg-text-primary); }.mypage-menu li:last-child{ border-bottom:none; }.mypage-menu .arrow{ color:#C1C1C1; font-size:18px; } .mypage-menu .logout-item{ color:#757575; } /* 비회원에게는 «로그아웃» 줄을 감춘다 — li 에 display:flex 가 걸려 있어 hidden 만으로는 안 사라진다 */ .mypage-menu li[hidden]{ display:none; } /* ============================================ 리포트 보관함 (STORAGE) ============================================ */ /* 상단 탭 스타일은 내 결과(보관함) 화면과 공유한다 (아래 «#page-storage .mp-cat-chips»). 2026-08-04: 알약 칩 → 헤더 아래 고정 밑줄 탭으로 통일. 2026-09-09: 갈래 칩을 걷어내고, 그 자리에 「내 만세력 | 보관함」 두 칸 탭(.saju-tabs)이 들어왔다. */.storage-list{ display:flex; flex-direction:column; gap:12px; }/* 저장된 결과 카드 — 메인 «실시간 이용 후기» 카드의 짜임 (2026-08-04 시안 A안). 배지·요약문 없이 두 줄, 카드 전체가 눌린다. 글자는 후기 카드보다 한 단계 크다(찾는 화면이라). */ .storage-card{ background: var(--dg-surface-soft); border:0; border-radius:var(--dg-radius-sm); padding:16px; cursor:pointer; line-height:1.5; } .storage-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .storage-who{ display:flex; align-items:center; gap:6px; min-width:0; font-size:12px; color:var(--dg-text-primary); } .storage-who b{ font-weight:var(--fw-semibold); white-space:nowrap; } .storage-who > span{ color:var(--dg-text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .storage-bar{ flex:none; width:1px; height:10px; background:var(--dg-text-secondary); } .storage-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; } .storage-foot-right{ display:inline-flex; align-items:center; gap:10px; } .storage-open{ display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:none; font-family:var(--font-sans); font-size:14px; line-height:1.5; font-weight:var(--fw-semibold); color:var(--dg-accent); cursor:pointer; }.storage-date{ font-size:12px; font-weight:400; color:var(--dg-text-secondary); white-space:nowrap; }.storage-expiry{ color:var(--dg-text-faint); }.storage-free-tag{ display:inline-block; margin-left:2px; padding:2px 8px; border-radius:20px; font-size:12px; font-weight:600; color:var(--dg-text-secondary); background: var(--dg-surface-soft); }.storage-card-free{ border-style:dashed; } /* Storage State Styles */.loading-spinner{ text-align:center; padding:40px 20px; color:var(--dg-text-secondary); font-size:14px; }.loading-spinner::before{ content:''; display:block; width:24px; height:24px; border:2px solid var(--dg-fill); border-top-color:var(--dg-accent); border-radius:50%; margin:0 auto 12px; animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* ============================================ REVIEW ============================================ */.star{ width:34px; height:34px; color:#C1C1C1; cursor:pointer; transition:color var(--transition-fast); display:inline-flex; flex-shrink:0; }.star svg{ width:100%; height:100%; fill:currentColor; }.star.active{ color:var(--dg-accent); } /* ============================================ COUPON ============================================ */.coupon-input-area{ display:flex; gap:8px; margin-bottom:16px; }/* 입력창·버튼은 가이드 값으로 (2026-08-04) — 둥글기 12, 입력창 배경 흰색, 포커스 테두리 오렌지, 등록 버튼 오렌지. 전엔 버튼·포커스가 --color-primary(검정)라 «누를 곳은 오렌지» 규칙에서 벗어나 있었다. */ .coupon-input-area input{ flex:1; padding:12px 16px; border:1px solid var(--dg-divider); border-radius:var(--dg-radius-md); font-size:16px; /* 16px 미만이면 iOS가 초점 시 자동확대 */ background:#fff; outline:none; font-family:var(--font-sans); }.coupon-input-area input:focus{ border-color:var(--dg-accent); background: var(--dg-surface); }.btn-coupon-register{ padding:12px 20px; background:var(--dg-accent); color:#fff; border-radius:var(--dg-radius-md); font-size:14px; font-weight:600; white-space:nowrap; }.coupon-tabs{ display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid var(--dg-divider); }.ctab{ flex:1; text-align:center; padding:12px 16px; font-size:14px; font-weight:400; color:var(--dg-text-secondary); position:relative; transition:all var(--transition-fast); }.ctab.active{ color:var(--dg-text-primary); font-weight:700; }.ctab.active::after{ content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--dg-text-primary); }.ctab-count{ font-size:12px; font-weight:700; background:var(--dg-text-primary); color:var(--color-on-light); padding:1px 6px; border-radius:var(--dg-radius-full); margin-left:4px; } /* 배지는 완전 동그라미 */.coupon-list{ display:flex; flex-direction:column; gap:12px; }.coupon-card{ display:flex; align-items:stretch; border:1px solid var(--color-border); border-radius:var(--dg-radius-sm); overflow:hidden; background: var(--dg-surface); transition:all var(--transition-fast); }.coupon-card:hover{ box-shadow:var(--shadow-sm); } /* 다 쓴 쿠폰·기간이 지난 쿠폰은 한눈에 구분되게 흐리게 (전에는 사용완료가 사용가능과 똑같아 보였다) */.coupon-card.expired, .coupon-card.used{ opacity:.5; }.coupon-card.used .coupon-left, .coupon-card.expired .coupon-left{ background:var(--dg-text-faint); }.coupon-left{ width:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; padding:16px 12px; flex-shrink:0; gap:8px; }.coupon-discount{ font-weight:var(--fw-bold); } /* 800 은 결과 점수에만 (가이드 §4) */.coupon-type{ font-size:12px; opacity:.8; }.coupon-divider{ width:1px; position:relative; } /* 위아래 반원으로 «찢는 자국»을 낸다 — 페이지 배경(흰색)과 같은 색이라야 파인 것처럼 보인다. 전엔 #F1F1F1 이라 회색 점으로 보였다 */ .coupon-divider::before, .coupon-divider::after{ content:''; position:absolute; left:-6px; width:12px; height:12px; background: var(--dg-surface); border-radius:50%; }.coupon-divider::before{ top:-6px; }.coupon-divider::after{ bottom:-6px; }.coupon-right{ flex:1; padding:16px; display:flex; flex-direction:column; justify-content:center; gap:8px; }.coupon-name{ font-weight:var(--fw-bold); color:var(--dg-text-primary); }.coupon-expiry{ font-size:12px; color:var(--dg-text-secondary); font-weight:500; }.coupon-expiry.expired-text{ color:var(--dg-text-faint); } /* ============================================ PRODUCT SECTION ============================================ */ /* Featured product */ /* Product list */ /* ============================================ TESTIMONIAL SECTION ============================================ */ /* ============================================ FOOTER ============================================ */#main-footer{ padding:32px 20px var(--fnav-space); background: var(--dg-surface-soft); border-top:0; } /* 아래 = 떠 있는 하단바 + 24 여백 → --fnav-space */#main-footer .footer-logo{ margin-bottom:16px; }.footer-info{ margin-bottom:24px; }.footer-info p{ font-size:14px; color:var(--color-text-secondary); line-height:1.8; margin:0; word-break:keep-all; }.footer-info strong{ color:var(--color-text-primary); font-weight:600; }.footer-links{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-bottom:16px; }.footer-links a{ font-size:14px; color:var(--color-text-secondary); text-decoration:none; display:inline-block; padding:12px 4px; margin:-12px -6px; transition:color var(--transition-fast); }.footer-links a:hover{ color:var(--color-text-primary); }.footer-copyright{ font-size:12px; color:var(--color-text-light); margin:0; line-height:1.6; } /* ============================================ TOAST ============================================ */.toast{ position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(8px); background:rgba(17,17,17,0.88); color:#fff; padding:12px 20px; border-radius:var(--dg-radius-full); font-size:14px; font-weight:var(--fw-medium); opacity:0; transition:all .3s ease; pointer-events:none; z-index:9999; white-space:nowrap; }.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ============================================ SERVICE LANDING PAGE ============================================ */ /* Hero area */ /* CTA area */ /* Responsive */ @media (min-width:481px) {body{ background: var(--color-bg); } } /* ============================================ STEP INDICATOR ============================================ */ /* ============================================ AI 분석 로딩 페이지 ============================================ */ /* 12-tick spinner */ /* ============================================================ 리포트 결과 - 책 스타일 레이아웃 ============================================================ */ /* 미리보기 페이지 (책 스타일) */ /* 목차 리스트 */ /* 확인 모달 */ /* 탭 페이지 */#main-footer{ display:block; } /* ── 카테고리 탭 페이지 (감정/집중/생활/관계/디지털) ── */ /* 아직 테스트가 없는 카테고리에 뜨는 안내 */.lr-empty{ padding:32px 0; text-align:center; font-size:15px; line-height:1.6; color:var(--color-text-secondary); } /* ── 전체(홈) 탭: 카테고리별 가로 스크롤 (제목만) ── */ /* ====== 카테고리 탭 테스트 목록 ====== */ /* ====== 서비스 소개 페이지 ====== */ /* 서비스 인트로: 배경 사진 + 제목 텍스트 이미지 + 실제 헤더/버튼/카운트 */.service-intro{ position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--dg-surface-muted); overflow: hidden; }.service-intro-img{ position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; background-color: var(--dg-surface-muted); } /* 헤더: 사진 위에 투명하게 얹고 흰색으로 */.service-intro-header{ position: relative; z-index: 2; background: transparent; border-bottom: none; flex-shrink: 0; padding-top: env(safe-area-inset-top); }.service-intro-header .hamburger-btn{ color: #fff; }.service-intro-body{ flex: 1; } /* 하단 영역: 제목 텍스트 이미지 → 버튼 → 카운트 */.service-intro-cta{ position: relative; z-index: 2; flex-shrink: 0; background: transparent; padding: 0 20px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; }.service-intro-title{ width: calc(100% - 24px); aspect-ratio: 1429 / 941; margin-bottom: 22px; pointer-events: none; background-size: contain; background-position: center; background-repeat: no-repeat; }.service-intro-btn{ display: block; width: 100%; height: 56px; padding: 0; background: #FFFFFF; color: var(--color-on-light); border: none; border-radius:var(--dg-radius-md); font-size: 18px; font-weight: var(--fw-semibold); cursor: pointer; font-family: var(--font-sans); letter-spacing: 0.3px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }.service-intro-btn:active{ background: #E5E5E5; } /* ===== 정보 입력 (3단계) — 서비스 배경 + 검정 80% 딤 ===== */#page-intake{ position: relative; background: var(--color-bg); }.intake-bg{ position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; background-color: var(--color-bg); }.intake-dim{ position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,0.8); } /* 시작화면과 동일 구조: inner는 패딩 없는 전체 컨테이너, 헤더·본문·CTA가 각자 패딩을 가짐 */.intake-inner{ position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 0; color: #fff; } /* 높이 = 60 + 노치. 전에는 60에 노치 여백을 «안쪽»으로 넣어(border-box) 헤더 내용이 눌렸다. */.intake-header{ display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-height) + env(safe-area-inset-top)); flex-shrink: 0; padding: env(safe-area-inset-top) 20px 0; }.intake-back{ background: none; border: none; color: #757575; font-size:24px; line-height: 1; cursor: pointer; padding: 0; width: 24px; text-align: left; }.intake-progress{ font-size:16px; color: rgba(255,255,255,0.85); }.intake-body{ flex: 1; padding-top: 20px; }.intake-q{ font-size:24px; font-weight: 700; line-height: 1.4; margin-bottom: 24px; }.intake-q:has(+ .intake-sub:not([hidden])){ margin-bottom: 4px; }.intake-sub{ font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.5; margin-bottom: 24px; }.intake-input{ width: 100%; background: transparent; border: none; border-bottom: 1.5px solid rgba(255,255,255,0.5); padding: 10px 2px; font-size: 16px; color: #fff; outline: none; margin-bottom: 24px; font-family: var(--font-sans); }.intake-input::placeholder{ color: rgba(255,255,255,0.55); }.intake-cta{ flex-shrink: 0; padding: 0 20px calc(32px + env(safe-area-inset-bottom)); }.intake-next{ width: 100%; height: 56px; background: #2984C7; color: #fff; border: none; font-size: 18px; font-weight: var(--fw-semibold); cursor: pointer; font-family: var(--font-sans); }.intake-next:active{ background: #2374b0; } /* 문항형 정보입력 — 소개화면과 같은 라이트 딥블루 테마 */#page-intake.intake--light{ background: var(--dg-surface-soft); }.intake--light .intake-bg, .intake--light .intake-dim{ display: none; }.intake--light .intake-inner{ color: #22303F; }.intake--light .intake-back{ color: #757575; }.intake--light .intake-progress{ color: #55637A; }.intake--light .intake-q{ color: #1B2A3F; }.intake--light .intake-sub{ color: #55637A; }.intake--light .intake-input{ color: #22303F; border-bottom-color: var(--dg-divider); }.intake--light .intake-input::placeholder{ color: #9AA6B5; }.intake--light .intake-next{ background: #2E5A8C; }.intake--light .intake-next:active{ background: #244A75; } /* ====== 홈: 서비스 전체 목록 ====== */#home-service-overview{ padding-bottom: 48px; } /* ============================================ 공용 채팅 헤더 (대화형 상품용) ============================================ */ /* ── 서비스 소개: 텍스트형 인트로 (이미지 없는 상품) ── */.service-intro--text .service-intro-body{ align-items:center; justify-content:center; }.service-intro-text{ color:var(--dg-text-primary); max-width:440px; width:100%; word-break:keep-all; }.service-intro--text .service-intro-header .hamburger-btn{ color: var(--dg-text-primary); }.service-intro--text .service-intro-btn{ background: #2E5A8C; color: #fff; box-shadow: 0 6px 20px rgba(27,42,63,0.22); }.service-intro--text .service-intro-btn:active{ background: #244A75; } /* 하단 작은 안내문구 */.si-note{ margin: 0 auto 12px; max-width: 340px; text-align: center; font-size: 12px; line-height: 1.5; color: #8A97A8; word-break: keep-all; }.si-note[hidden]{ display: none; } /* 한글 줄바꿈: 단어(어절) 단위로만 끊기 — 문항형 흐름(문항·결과). word-break는 상속됨 */.qt-body, .qresult-body{ word-break: keep-all; } /* ============================================ 휴대폰 문자 인증 (회원가입) ============================================ */.phone-verify-row{ display:flex; gap:8px; align-items:stretch; }.phone-verify-row input{ flex:1; min-width:0; }.btn-verify{ transition:background var(--transition-fast); }.btn-verify:disabled{ background: var(--dg-surface-muted); cursor:default; }.phone-verify-msg{ font-size:13px; margin:6px 2px 0; min-height:16px; }.phone-verify-msg.ok{ color:#1a7f37; }.phone-verify-msg.err{ color:#c0392b; }/* ============================================ CHECKOUT (결제하기) — 목업 기반. 파란 강조색은 결제창 한정. ============================================ */ /* hidden 속성이 확실히 먹도록 (아래 요소들은 display 를 지정해서 [hidden] 기본 규칙을 덮어씀) */#page-checkout [hidden]{ display:none !important; }#page-checkout.active{ display:flex; flex-direction:column; }#page-checkout .page-body{ flex:1; }.checkout-thumb-wrap{ display:flex; justify-content:center; margin:8px 0 28px; }.checkout-thumb{ width:200px; max-width:60%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--dg-radius-sm); box-shadow:var(--shadow-md); background: var(--dg-fill); border:1px solid var(--dg-divider); }.checkout-heading{ font-size:18px; font-weight:700; color:var(--color-text-primary); margin-bottom:12px; letter-spacing:-0.3px; }.checkout-card{ background:var(--ck-card-bg); border-radius:var(--dg-radius-sm); padding:22px 20px; }.checkout-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }.checkout-row + .checkout-row{ margin-top:12px; }.checkout-row-label{ font-size:16px; font-weight:700; color:var(--color-text-primary); }.checkout-row-value{ font-size:16px; font-weight:700; color:var(--color-text-primary); white-space:nowrap; }.checkout-row.sub .checkout-row-label{ font-size:14px; font-weight:500; color:var(--color-text-secondary); display:flex; align-items:center; gap:8px; }.checkout-row.sub .checkout-row-value{ font-size:14px; font-weight:600; }.checkout-row-value.minus{ color:var(--ck-accent); }.checkout-rate{ display:inline-flex; align-items:center; background:var(--ck-accent); color:#fff; font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px; }.checkout-check{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; background:var(--ck-accent); color:#fff; font-size:10px; border-radius:50%; }.checkout-divider{ height:1px; background:#dbe2ec; margin:16px 0; }.checkout-row.total .checkout-row-label{ font-size:16px; font-weight:700; }.checkout-row.total .checkout-row-value{ font-size:20px; font-weight:700; }.checkout-coupon-btn{ width:100%; margin-top:18px; padding:15px; background: var(--dg-surface); border:1px solid var(--dg-divider); border-radius:var(--dg-radius-sm); font-size:15px; font-weight: var(--fw-semibold); color:var(--color-text-primary); cursor:pointer; transition:all var(--transition-fast); }.checkout-coupon-btn:hover{ border-color:var(--ck-accent); }.checkout-coupon-count{ font-size:13px; font-weight:500; color:var(--color-text-secondary); }.checkout-coupon-count b{ color:var(--ck-accent); }.checkout-phone{ margin-top:18px; }.checkout-phone-input{ width:100%; padding:15px 16px; border:1px solid var(--dg-divider); border-radius:var(--dg-radius-sm); font-size:16px; color:var(--color-text-primary); background: var(--dg-surface); transition:border-color var(--transition-fast); }.checkout-phone-input:focus{ outline:none; border-color:var(--ck-accent); }.checkout-footer{ padding:12px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--color-bg); position:sticky; bottom:0; }.checkout-saved-bubble{ position:relative; display:table; margin:0 auto 12px; background:var(--ck-accent); color:#fff; font-size:14px; font-weight:600; padding:8px 16px; border-radius:var(--dg-radius-full); }.checkout-saved-bubble b{ font-weight:800; }.checkout-saved-bubble::after{ content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid var(--ck-accent); }.checkout-pay-btn{ width:100%; padding:18px; background:var(--color-primary); color:var(--color-on-light); border:none; font-size:17px; font-weight: var(--fw-semibold); cursor:pointer; transition:opacity var(--transition-fast); }.checkout-pay-btn:hover{ opacity:.9; }.checkout-pay-btn:disabled{ opacity:.5; cursor:default; }.checkout-terms{ text-align:center; font-size:12px; color:var(--color-text-light); margin-top:12px; line-height:1.6; }.checkout-terms a{ color:var(--color-text-secondary); text-decoration:underline; cursor:pointer; }.checkout-terms b{ font-weight:700; color:var(--color-text-secondary); }/* 상품 0개인 카테고리 감추기. .mp-cat-chip 은 display:inline-flex 라 hidden 만으로는 안 사라진다. 자세히는 1-core.js hideEmptyCategories 주석. */ .mp-cat-chip[hidden]{ display:none !important; } .side-acc-item[hidden]{ display:none !important; } /* 소개 화면의 금액 한 줄 */.toss-review-line{ margin:0 auto 14px; max-width:340px; text-align:center; font-size:13px; line-height:1.6; color:var(--color-text-secondary); word-break:keep-all; }.toss-review-line b{ font-weight:700; color:var(--color-text-primary); }.toss-review-line[hidden]{ display:none; }.checkout-info{ list-style:none; margin:16px 0 0; padding:0; }.checkout-info li{ font-size:12px; line-height:1.7; color:var(--color-text-secondary); word-break:keep-all; } /* 청약철회 안내 — 결제 버튼 아래가 아니라 상품 고지 세 줄 바로 밑에 둔다 (2026-09-03 사장님 지시) */ .checkout-refund{ margin:8px 0 0; font-size:12px; line-height:1.7; color:var(--color-text-secondary); word-break:keep-all; } .checkout-refund b{ font-weight:700; color:var(--color-text-primary); }.checkout-info li b{ display:inline-block; min-width:64px; font-weight:700; color:var(--color-text-primary); } /* 쿠폰 선택 바텀시트 */ /* 결과 다시보기 (비회원 재열람) — 2026-09-10 부터 «화면»이 아니라 팝업(#rv-sheet)이다. 화면이던 시절의 .page-body 여백과 .rv-intro 는 걷어냈다. */.rv-form{ display:flex; flex-direction:column; gap:16px; }.rv-field{ display:flex; flex-direction:column; gap:8px; }.rv-field label{ font-size:14px; font-weight:700; color:var(--color-text-primary); }.rv-field input{ width:100%; padding:16px; border:1px solid var(--color-border); border-radius:var(--dg-radius-md); font-size:16px; color:var(--color-text-primary); background: var(--dg-surface); transition:border-color var(--transition-fast); }.rv-field input:focus{ outline:none; border-color:var(--color-primary); }.rv-submit{ margin-top:16px; width:100%; height:54px; padding:0; background:var(--dg-accent); color:#fff; border:none; border-radius:var(--dg-radius-md); font-size:16px; font-weight:600; cursor:pointer; transition:opacity var(--transition-fast); }.rv-submit:hover{ opacity:.9; }.rv-submit:disabled{ opacity:.5; cursor:default; }.rv-msg{ text-align:center; font-size:14px; color:#D64B2E; margin:0; }.rv-msg:not(:empty){ margin-top:8px; } /* 조회 결과가 여러 건일 때의 선택 목록 (2026-07-28) — 시트의 «고르기» 걸음. ⚠️ 위 여백은 두지 않는다: 시트 머리(«어느 것을 보시겠어요?») 바로 아래에 붙는다. */.rv-results:not(:empty){ display:flex; flex-direction:column; gap:10px; }.rv-result-row{ display:flex; align-items:center; gap:10px; width:100%; padding:16px; background: var(--dg-surface); border:1px solid var(--color-border); border-radius:var(--dg-radius-sm); cursor:pointer; text-align:left; }.rv-result-row:active{ background: var(--dg-fill); }.rv-result-name{ flex:1; font-size:15px; font-weight:700; color:var(--color-text-primary); }.rv-result-date{ font-size:12px; color:var(--color-text-light); }.rv-result-go{ font-size:13px; font-weight:700; color:var(--dg-accent); } /* 보관함 비로그인 선택 화면 (로그인 다시보기 / 비회원 다시보기) 2026-09-10 «B안» — 옆 칸의 «아직 받아본 리포트가 없어요»와 한 벌로 맞췄다. 전에는 라이프리포트에서 온 «26px 제목 + 폭 꽉 채운 네모 단추 둘»이었는데, 같은 보관함인데 딴 집 같았다(사장님 지적). 이제 둘 다 «빈 화면» 문법이다 — 제목 16 · 설명 14 · 주 단추는 알약 44(.empty-btn 을 그대로 쓴다) · 보조는 글씨만(단추 규칙 ⑤). 주황은 화면에 하나뿐이라 눈이 갈 곳이 한 군데다. */ .storage-guest{ text-align:center; padding:0; } .storage-guest-title{ font-size:16px; font-weight:700; color:var(--dg-text-primary); } .storage-guest-desc{ margin-top:8px; font-size:14px; line-height:1.6; color:var(--dg-text-secondary); } .storage-guest-actions{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:24px; } /* 24 = 옆 칸 «빈 화면»의 설명↔단추 사이와 같은 값(8+16) */ /* 「비회원으로 다시보기」 — 글씨만 있는 단추. 색·크기는 아래 «단추 규칙 ⑤»가 준다 */ .storage-guest-text{ padding:8px 6px; border:0; background:none; cursor:pointer; font-family:var(--font-sans); } /* .empty-btn 은 제 위에 16px 을 달고 다닌다 — 여기선 칸이 이미 16을 줬으니 뺀다 */ .storage-guest-actions .empty-btn{ margin-top:0; } /* 중앙 팝업(모달) — 결제창 로그인 안내 등. 재사용 가능. */.app-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:210; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .2s ease; } /* display:flex 가 hidden 속성(UA의 display:none)을 덮어써 계속 떠 있던 것 방지 */.app-modal-overlay[hidden]{ display:none; }.app-modal{ width:100%; max-width:320px; background: var(--dg-surface); border-radius:var(--dg-radius-lg); padding:24px 20px 20px; text-align:center; box-shadow:none; animation:modalPop .22s ease; } /* 가이드 16-1 */ @keyframes modalPop { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }.app-modal-title{ font-size:16px; font-weight:700; color:var(--color-text-primary); margin-bottom:8px; }.app-modal-msg{ font-size:14px; font-weight:400; color:var(--color-text-secondary); line-height:1.6; margin-bottom:20px; word-break:keep-all; text-wrap:balance; } /* 줄바꿈을 손으로 넣지 않는다 — 좁은 화면에서만 저절로 두 줄로 (2026-08-04 사장님 지시) */.app-modal-btns{ display:flex; gap:8px; }.app-modal-btn{ flex:1; height:48px; padding:0; border-radius:var(--dg-radius-md); font-size:14px; font-weight:600; border:none; cursor:pointer; transition:opacity var(--transition-fast); }.app-modal-btn:hover{ opacity:.9; }.app-modal-btn.ghost{ background: var(--dg-surface); border:1px solid var(--dg-divider); color:var(--dg-text-body); }.app-modal-btn.primary{ color:#fff; }.app-modal-btn:disabled{ opacity:.55; cursor:default; } /* 결제 확인 실패 안내창 — 주문번호는 손님이 문의할 때 쓰는 유일한 열쇠라 눈에 띄게 둔다 */#pay-error-modal .app-modal-msg{ margin-bottom:20px; }.pay-error-order{ font-size:14px; color:var(--dg-text-primary); background: var(--dg-surface-soft); border-radius:var(--dg-radius-sm); padding:12px 10px; margin-bottom:10px; word-break:break-all; }.pay-error-order b{ font-weight:800; }.pay-error-help{ font-size:12px; color:var(--color-text-light); line-height:1.6; margin-bottom:14px; }.pay-error-msg{ font-size:13px; color:var(--dg-accent); line-height:1.6; margin-bottom:12px; }.pay-error-msg:empty{ display:none; } /* [나중에 할게요] — 주문 정보는 남겨두고 창만 닫는 보조 동작이라 작은 텍스트 버튼으로 */.pay-error-close{ display:block; margin:14px auto 0; background:none; border:none; font-size:13px; color:var(--color-text-light); text-decoration:underline; cursor:pointer; }.coupon-picker-overlay, .sheet-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:200; display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .2s ease; } /* 떠 있는 하단바(.floating-nav)도 z-index:200 이라, 같은 값이면 나중에 그려진 쪽이 이긴다 → 시트가 하단바에 가려 저장 단추를 못 눌렀다. 시트를 한 단 올린다(옆메뉴 998 보다는 아래). */ .sheet-overlay{ z-index:300; } .sheet-overlay[hidden]{ display:none; }.coupon-picker-sheet, .sheet{ width:100%; max-width:var(--max-width); background: var(--dg-surface); border-radius:20px 20px 0 0; padding:20px 20px calc(24px + env(safe-area-inset-bottom)); max-height:88vh; display:flex; flex-direction:column; animation:sheetUp .25s ease; } /* ── 바텀시트 (2026-09-10) — 칸 몇 개 넣자고 화면을 통째로 갈아 끼우지 않는다 ── */ .sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .sheet-head span{ font-size:var(--fs-card-title); font-weight:var(--fw-extrabold); color:var(--dg-text-primary); } .sheet-close{ padding:4px; width:32px; background:none; border:0; color:var(--dg-text-faint); cursor:pointer; } .sheet-body{ overflow-y:auto; } /* 시트 안에서는 저장 단추가 맨 아래에 붙는다 — 화면일 때 쓰던 위 여백은 줄인다 */ .sheet #si-save{ margin-top:8px; } @keyframes sheetUp { from { transform:translateY(100%); } to { transform:translateY(0); } }.coupon-picker-head{ display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-card-title); font-weight:var(--fw-extrabold); margin-bottom:16px; }.coupon-picker-close{ font-size:var(--fs-card-title); color:var(--color-text-light); padding:4px; width:32px; }.coupon-picker-list{ display:flex; flex-direction:column; gap:12px; overflow-y:auto; }.coupon-pick-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1.5px solid var(--color-border); border-radius:var(--dg-radius-sm); padding:16px; cursor:pointer; transition:all var(--transition-fast); }.coupon-pick-card:hover{ border-color:var(--ck-accent); }.coupon-pick-card.selected{ border-color:var(--ck-accent); background:var(--ck-card-bg); } /* 가지고는 있지만 이 상품엔 못 쓰는 쿠폰 — 흐리게, 누를 수 없게 */.coupon-pick-card.blocked{ opacity:.45; cursor:default; }.coupon-pick-card.blocked:hover{ border-color:var(--color-border); }.coupon-pick-info .cpk-amt{ font-size:var(--fs-body-lead); font-weight:var(--fw-extrabold); color:var(--ck-accent); }.coupon-pick-info .cpk-name{ font-size:var(--fs-body-small); font-weight:var(--fw-semibold); color:var(--color-text-primary); margin-top:3px; }.coupon-pick-info .cpk-exp{ font-size:var(--fs-micro); color:var(--color-text-light); margin-top:2px; }.coupon-pick-radio{ flex-shrink:0; width:22px; height:22px; border:2px solid var(--dg-divider); border-radius:50%; display:flex; align-items:center; justify-content:center; }.coupon-pick-card.selected .coupon-pick-radio{ border-color:var(--ck-accent); background:var(--ck-accent); color:#fff; font-size:12px; }.coupon-picker-none{ text-align:center; color:var(--color-text-light); padding:36px 0; font-size:var(--fs-body-small); }.coupon-picker-clear{ margin-top:4px; width:100%; padding:12px; background:none; border:none; color:var(--color-text-secondary); font-size:var(--fs-body-small); text-decoration:underline; cursor:pointer; } /* ============================================================ 문항형 테스트 (상황제시형 5점 척도) — [[문항형-표준]] ============================================================ */ /* 검사 중에는 빠른 연타로 화면이 확대(더블탭 줌)되지 않게 */#page-qtest, .qt-opt, .qt-prev{ touch-action:manipulation; } /* 테스트 직전 안내 화면 — 세로 꽉 채우고 스크롤 없음, 3·2·1 카운트다운 */#page-qintro{ background: var(--dg-surface); }.qintro-wrap{ position:fixed; inset:0; max-width:var(--max-width); margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--dg-surface); overflow:hidden; } /* 문구는 '버튼 위 영역'의 정가운데 — 버튼이 흐름 안에 있으므로 남는 공간 기준으로 중앙정렬 */.qintro-center{ flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }.qintro-lead{ font-size:26px; font-weight:700; line-height:1.3; color:var(--color-text-primary); }.qintro-sub{ margin-top:12px; font-size:16px; font-weight:400; line-height:1.6; color:var(--color-text-secondary); } /* .qintro-note(첫 검사의 «검사하는 동안…» 한 줄)는 2026-08-04 사장님 지시로 없앴다. */.qintro-count{ margin-top:48px; font-size:88px; font-weight:800; line-height:1; color:var(--dg-accent); font-variant-numeric:tabular-nums; } /* 카운트다운 중에는 안내 문구·버튼 다 숨기고 숫자만 정중앙에 */.qintro-wrap.counting .qintro-lead, .qintro-wrap.counting .qintro-sub{ display:none; }.qintro-wrap.counting .qintro-count{ margin-top:0; }.qintro-btn{ flex:0 0 auto; width:100%; height:56px; background:var(--dg-accent,#FF6E3F); color:#fff; border:0; border-radius:var(--dg-radius-md); font-size:16px; font-weight: var(--fw-semibold); font-family:var(--font-sans); cursor:pointer; box-shadow:none; }.qintro-btn:active{ filter:brightness(.95); }.qintro-count.tick{ animation:qintroTick .6s ease; } @keyframes qintroTick { 0%{ transform:scale(.5); opacity:0; } 35%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1); opacity:1; } } /* 시작하기 → 안내 멘트(카운트다운 전 잠깐) */.qintro-howto{ font-size:20px; font-weight:700; line-height:1.5; color:var(--color-text-primary); animation:qintroTick .4s ease; } /* 검사 완료 화면 — qintro와 같은 레이아웃 재사용 */#page-qdone{ background: var(--dg-surface); } /* 검사 사이 «다리» 화면의 가운데 기호 */.qdone-mark{ width:48px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; background: var(--dg-surface); border:2px solid var(--dg-accent); color:var(--dg-accent); }.qdone-mark svg{ display:block; width:24px; height:24px; } /* 결과 요약 카드 — 담은 것 / 두고 간 것 */#page-qtest{ background: var(--dg-surface); } /* 높이 = 60 + 노치. 다른 헤더(#main-header·.sub-header·.wt-header)와 같은 계산식이다. 전에는 노치 몫이 빠져 있어, 홈 화면 앱처럼 전체화면으로 열면 진행 막대·✕가 노치에 가렸다. */.qt-header{ position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:flex-end; height:calc(var(--header-height) + env(safe-area-inset-top)); margin:0; padding:env(safe-area-inset-top) 20px 0; background: var(--color-bg); border-bottom:0; box-shadow:0 6px 6px -6px rgba(17,17,17, calc(var(--sc, 0) * 0.16)); }.qt-count{ position:absolute; left:50%; transform:translateX(-50%); font-size:14px; font-weight:400; color:var(--dg-text-secondary); font-variant-numeric:tabular-nums; }.qt-count b{ font-weight:400; }.qt-body{ padding:24px 20px 40px; max-width:var(--max-width); margin:0 auto; }.qt-q{ margin:0 0 24px; font-size:20px; font-weight:700; line-height:1.4; color:var(--color-text-primary); }.qt-opts{ display:flex; flex-direction:column; gap:12px; }.qt-opt{ display:flex; flex-direction:column; gap:4px; text-align:left; width:100%; padding:16px; border:1px solid var(--color-border); border-radius:var(--dg-radius-md); background: var(--dg-surface); cursor:pointer; transition:border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); }.qt-opt:active{ transform:scale(0.99); }.qt-opt.selected{ border-color:var(--color-primary); background: var(--dg-fill); }.qt-opt-label{ font-size:16px; font-weight:700; color:var(--color-text-primary); }.qt-opt-desc{ font-size:13.5px; line-height:1.5; color:var(--color-text-secondary); } /* 설문 중 '이전 문항으로' 버튼 *//* 누르는 것은 44px 이상 (가이드 §1) */.qt-prev{ display:block; margin:0 auto; padding:12px 16px; min-height:44px; background:none; border:none; font-family:inherit; font-size:14px; font-weight:600; color:var(--color-text-light); cursor:pointer; }.qt-prev:active{ opacity:.6; } /* ── 무료 결과 «분석 중» 화면 (2026-08-05 되살림) ── 2026-07-26에 옛 11챕터 결과 시스템을 걷어낼 때 이 화면·CSS가 함께 지워졌었다. 원형 링이 0→100%로 «매 프레임» 차오르고, 네 단계가 하나씩 ✓ 로 바뀐다. ⚠️ 링을 CSS transition 으로 옮기면 단계마다 계단식으로 튄다 → 애니메이션은 JS(rAF)가 맡는다. */ .qa-center{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 20px 24px; min-height:calc(100vh - var(--header-height) - env(safe-area-inset-top) - 120px); } .qa-ring{ position:relative; width:110px; height:110px; margin:0 auto 24px; } .qa-ring svg{ width:100%; height:100%; transform:rotate(-90deg); } .qa-ring-bg{ fill:none; stroke:var(--dg-divider); stroke-width:8; } .qa-ring-fg{ fill:none; stroke:var(--dg-accent); stroke-width:8; stroke-linecap:round; } .qa-ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-h3); font-weight:var(--fw-bold); line-height:1; color:var(--dg-text-primary); font-variant-numeric:tabular-nums; letter-spacing:0; } .qa-title{ margin:0; font-size:var(--fs-h3); font-weight:var(--fw-bold); line-height:1.3; color:var(--dg-text-primary); letter-spacing:-0.025em; } .qa-sub{ margin:8px 0 0; font-size:var(--fs-body-small); line-height:1.3; color:var(--dg-text-secondary); } /* 보조문구 + 체크 목록 덩어리. 폭이 «둘 중 넓은 쪽»(= 보조문구)에 맞춰지고 가운데 놓이므로, 그 안에서 왼쪽 정렬한 목록의 왼쪽 끝이 보조문구의 왼쪽 끝과 맞는다. (2026-08-05 사장님) */ .qa-block{ width:fit-content; max-width:100%; margin:0 auto; } /* 줄마다 가운데 정렬하면 ✓ 표시가 들쭉날쭉해진다 → 왼쪽 정렬이라야 ✓ 가 세로로 맞는다. */ .qa-list{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; text-align:left; } /* 12 = 가이드가 «항목 사이»에 정한 값 (16은 «섹션 제목 아래·카드 안쪽» 용도) */ .qa-item{ display:flex; align-items:center; gap:12px; opacity:.38; transition:opacity .4s ease; } .qa-item.done{ opacity:1; } .qa-mark{ position:relative; flex:0 0 auto; width:18px; height:18px; } .qa-spin{ position:absolute; inset:0; border:2px solid var(--dg-divider); border-top-color:var(--dg-text-secondary); border-radius:50%; animation:qtSpin .8s linear infinite; } .qa-item.done .qa-spin{ display:none; } .qa-check{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:14px; font-weight:var(--fw-bold); color:var(--dg-accent); } .qa-item.done .qa-check{ display:flex; } .qa-label{ font-size:var(--fs-body); line-height:1.3; color:var(--dg-text-body); } .qa-item.done .qa-label{ color:var(--dg-text-primary); font-weight:var(--fw-medium); } /* ── 결제 후 분석 로딩 화면 (12틱 스피너) ── */.ql-header{ border-bottom:none; justify-content:flex-end; }.ql-exit{ flex:0 0 auto; }.ql-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 20px; min-height:calc(100vh - var(--header-height) - env(safe-area-inset-top) - 120px); }.ql-title{ margin-top:24px; color:var(--color-text-primary); } /* 크기·굵기는 아래 «타이포 토큰» 한 곳에서만 정한다 */.ql-sub{ margin-top:8px; color:var(--dg-text-secondary); } /* 크기·줄높이는 아래 «타이포 토큰» 에서 */.ql-sub b{ color:var(--dg-text-body); font-weight:700; }.ql-spinner{ position:relative; width:52px; height:52px; }.ql-spinner i{ position:absolute; left:50%; top:50%; width:4px; height:14px; margin:-7px 0 0 -2px; border-radius:2px; animation:qlFade 1s linear infinite; }.ql-spinner i:nth-child(1){ transform:rotate(0deg) translateY(-19px); animation-delay:-0.916s; }.ql-spinner i:nth-child(2){ transform:rotate(30deg) translateY(-19px); animation-delay:-0.833s; }.ql-spinner i:nth-child(3){ transform:rotate(60deg) translateY(-19px); animation-delay:-0.75s; }.ql-spinner i:nth-child(4){ transform:rotate(90deg) translateY(-19px); animation-delay:-0.666s; }.ql-spinner i:nth-child(5){ transform:rotate(120deg) translateY(-19px); animation-delay:-0.583s; }.ql-spinner i:nth-child(6){ transform:rotate(150deg) translateY(-19px); animation-delay:-0.5s; }.ql-spinner i:nth-child(7){ transform:rotate(180deg) translateY(-19px); animation-delay:-0.416s; }.ql-spinner i:nth-child(8){ transform:rotate(210deg) translateY(-19px); animation-delay:-0.333s; }.ql-spinner i:nth-child(9){ transform:rotate(240deg) translateY(-19px); animation-delay:-0.25s; }.ql-spinner i:nth-child(10){ transform:rotate(270deg) translateY(-19px); animation-delay:-0.166s; }.ql-spinner i:nth-child(11){ transform:rotate(300deg) translateY(-19px); animation-delay:-0.083s; }.ql-spinner i:nth-child(12){ transform:rotate(330deg) translateY(-19px); animation-delay:0s; } @keyframes qlFade { 0% { opacity:1; } 100% { opacity:0.15; } } /* 결과 화면 */.qresult-body{ padding:24px 20px 56px; max-width:var(--max-width); margin:0 auto; }.qt-result-head{ text-align:center; padding:12px 0 24px; } /* 유료 파트 */.qt-paid{ margin-top:8px; } .qt-toc-list{ display:flex; flex-direction:column; }.qt-toc-list li{ display:flex; align-items:center; gap:12px; padding:11px 4px; font-size:15px; font-weight:600; color:var(--color-text-primary); cursor:pointer; border-bottom:1px solid var(--color-border); }.qt-toc-list li:last-child{ border-bottom:none; }.qt-toc-num{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:var(--color-primary); color:var(--color-on-light); border-radius:50%; } /* 문항형 유료 결과 — 상단 고정 헤더 + 탭바 + 탭 패널 */.qresult-body{ padding-top:0; }.qt-sticky{ position:sticky; top:calc(var(--header-height) + env(safe-area-inset-top)); z-index:6; background: var(--color-bg); margin:0 -20px; padding:0 20px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }.qt-sticky .qt-result-head{ padding:16px 0 12px; } /* ── 목차 바(현재 챕터) + 펼쳐지는 목차 ── */.qt-tocbar{ position:relative; border-top:1px solid var(--color-border); }.qt-tocbar-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 2px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; }.qt-tocbar-current{ font-size:16px; font-weight:800; color:var(--color-text-primary); line-height:1.35; }.qt-tocbar-caret{ flex:0 0 auto; font-size:16px; color:var(--color-text-light); transition:transform .2s ease; margin-top:-4px; }.qt-paid.toc-open .qt-tocbar-caret{ transform:rotate(180deg); }.qt-toc-drop{ position:absolute; left:-20px; right:-20px; top:100%; z-index:8; background: var(--dg-surface); border-top:1px solid var(--color-border); box-shadow:0 10px 24px rgba(0,0,0,0.10); max-height:70vh; overflow-y:auto; animation:qtFade .18s ease; }.qt-toc-drop[hidden]{ display:none; }.qt-toc-list{ list-style:none; margin:0; padding:6px 0; }.qt-toc-item{ display:flex; gap:12px; padding:13px 20px; cursor:pointer; box-sizing:border-box; }.qt-toc-item:active{ background: var(--dg-fill); }.qt-toc-num{ flex:0 0 auto; font-size:13px; font-weight:800; color:var(--color-primary); font-variant-numeric:tabular-nums; }.qt-toc-label{ font-size:15px; font-weight:600; color:var(--color-text-secondary); line-height:1.35; }.qt-toc-item.active .qt-toc-label{ color:var(--color-text-primary); font-weight:800; }.qt-panels{ padding-top:4px; }.qt-panel{ display:none; }.qt-panel.active{ display:block; animation:qtFade 0.25s ease; } @keyframes qtFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }.qt-panel-title{ font-size:21px; font-weight:800; color:var(--color-text-primary); margin:20px 2px 4px; line-height:1.35; } /* 섹션 부제 (30섹션 구조 — 제목 아래 한 줄 안내) */ /* 문항형 상세 리포트 생성 배너 + 로딩 표시 */ @keyframes qtSpin { to { transform:rotate(360deg); } } /* AI 생성 전 로딩 스켈레톤 — 회색 바 위로 밝은 빛이 파도처럼 흐름 */ /* ================= 문항형 무료 결과 — 한 화면씩 공개(step) ================= */ /* 거울 닦기 */ /* 목차(잠금) */ /* ========================================================================== 결과 리포트 UX 설계 V2 (2026-07-21) — 무료 결과 흐름 + 유료 챕터 탐색 ========================================================================== */ /* ── 4.1 분석 중 ── */ /* ── 4.2 무료 결과 요약(점수·상위%·핵심 한 줄) ── */ /* ── 4.3~4.8 결제 전 리포트(스크롤) ── */ /* 핵심 지표 — 누르면 설명 펼침 */ /* 펼침 화살표 — '누를 수 있다'가 한눈에 보이게 (사장님 지적 2026-07-22) */ /* 현재까지 확인된 결과 */ /* 잠긴 리포트 미리보기 — 실제 본문 일부를 블러 */ /* 결제 전 대표 목차 (11개 챕터) */ /* 결제 전환 */ /* ── 유료: 챕터 표지 · 장 인디케이터 · 하단 고정 인디케이터 ── */.qt-chap-title{ margin-top:6px; font-size:var(--fs-h2); font-weight:var(--fw-extrabold); line-height:1.35; letter-spacing:-0.02em; color:var(--dg-text-primary); word-break:keep-all; }.qt-chap-sub{ margin-top:8px; font-size:var(--fs-body-small); line-height:1.6; color:var(--dg-text-secondary); word-break:keep-all; }.qt-sheet + .qt-sheet{ margin-top:36px; padding-top:32px; border-top:1px solid var(--dg-divider); } /* 섹션 제목(h3 계층) — 본문(16px)과 위계가 분명하도록 24px (사장님 지시 2026-07-22) */.qt-panel .qt-panel-title{ font-size:24px; line-height:1.35; margin-top:16px; } /* 형광펜 — 굵게 중에서도 정말 중요한 곳에만 (밑줄형 하이라이트) */ /* 하단 인디케이터가 가리지 않도록 여백 */.qt-paid.has-nav{ padding-bottom:84px; } /* 목차 패널 — 상태(완료·읽는 중) 표시 */.qt-toc-head{ padding:14px 20px 6px; font-size:var(--fs-micro); font-weight:var(--fw-extrabold); letter-spacing:.08em; color:var(--dg-text-secondary); }.qt-toc-item{ align-items:flex-start; }.qt-toc-body{ flex:1; display:flex; flex-direction:column; gap:3px; } /* 위쪽 .qt-toc(무료 잠금 목차)용 규칙(.qt-toc-list li)이 여기까지 걸려 좌우 여백·번호가 어긋나던 것 리셋 */.qt-toc-drop .qt-toc-list li.qt-toc-item{ padding:14px 20px; border-bottom:1px solid var(--dg-divider); font-weight:var(--fw-regular); }.qt-toc-drop .qt-toc-list li.qt-toc-item:last-child{ border-bottom:0; }.qt-toc-drop .qt-toc-num{ width:auto; height:auto; background:none; border-radius:0; padding-top:2px; color:var(--dg-text-secondary); }.qt-toc-item.active .qt-toc-num{ color:var(--dg-accent); }.qt-toc-sub{ font-size:var(--fs-micro); color:var(--dg-text-secondary); line-height:1.45; word-break:keep-all; }.qt-toc-state{ flex:0 0 auto; padding-top:2px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); color:var(--dg-text-secondary); }.qt-toc-item.active .qt-toc-state{ color:var(--dg-accent); } /* ══ 유료 결과 리더(문항형) — 헤더/본문/푸터/목차 시트 (2026-07-22 개편) ══ */ /* 헤더: 2줄 왼쪽 정렬 (위=현재 챕터명 16px, 아래=서비스명 12px, 간격 4px) */#page-qresult .qr-header{ justify-content:space-between; gap:12px; }.qr-head-info{ display:flex; flex-direction:column; gap:4px; min-width:0; text-align:left; }.qr-head-toc{ font-size:18px; font-weight:var(--fw-bold); line-height:1.2; color:var(--dg-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 헤더 부제(서비스명)는 숨김 — 큰 제목만 (사장님 지시 2026-07-23) */.qr-exit-ic{ width:24px; height:24px; display:block; color:var(--dg-text-primary); } /* 나가기 = ✕ (2026-09-03 모든 화면 통일). 크기는 가이드의 «닫기 24px·선 1.5» */ /* 본문: 점수 카드는 스티키 아님 — 그냥 스크롤. 하단 푸터에 안 가리도록 여백 */.qt-paid.qr-reader.has-nav{ padding-bottom:calc(56px + env(safe-area-inset-bottom) + 12px); }.qr-reader .qt-result-head{ padding:4px 0 20px; border-bottom:1px solid var(--dg-divider); margin-bottom:8px; } /* 푸터: 56px 고정 — 왼쪽 목차(아이콘 위·글자 아래), 오른쪽 이전/다음 화살표 */.qr-foot{ position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:9; box-sizing:border-box; width:100%; max-width:var(--max-width); height:calc(56px + env(safe-area-inset-bottom)); padding:0 16px env(safe-area-inset-bottom); display:flex; align-items:center; justify-content:space-between; background: var(--color-bg); border-top:0; box-shadow:0 -6px 6px -6px rgba(17,17,17,0.16); /* 위쪽으로만 */ }.qr-foot-toc{ display:inline-flex; flex-direction:column; align-items:center; gap:3px; padding:4px 8px; background:none; border:0; cursor:pointer; font-family:inherit; color:var(--dg-text-primary); }.qr-foot-toc-ic{ width:18px; height:18px; display:block; }.qr-foot-toc-t{ font-size:12px; font-weight:var(--fw-medium); line-height:1; }.qr-foot-arrows{ display:flex; align-items:center; gap:20px; }.qr-foot-arrow{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; padding:6px 8px; background:none; border:0; cursor:pointer; } /* 챕터 이동 화살표 — 마크업에 박힌 › 그림을 쓴다. «이전»만 좌우 반전. */ /* 그림이 › 방향 → «이전»만 좌우 반전 */.qr-foot-arrow:disabled{ cursor:default; } /* 목차 바텀시트 — 결제창 쿠폰시트처럼 아래에서 올라옴 */.qr-toc-overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,0.65); animation:fadeIn .2s ease; }.qr-toc-overlay[hidden]{ display:none; }.qr-toc-sheet{ display:flex; flex-direction:column; width:100%; max-width:var(--max-width); max-height:80vh; background: var(--dg-surface); border-radius:20px 20px 0 0; overflow:hidden; padding-bottom:env(safe-area-inset-bottom); animation:sheetUp .25s ease; }.qr-toc-grip{ flex:0 0 auto; height:28px; display:flex; align-items:center; justify-content:center; }.qr-toc-grip::before{ content:''; width:40px; height:5px; border-radius:3px; background: var(--dg-surface-muted); }.qr-toc-title{ flex:0 0 auto; height:48px; margin:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:var(--fw-bold); color:var(--dg-text-primary); border-bottom:1px solid var(--color-border); }.qr-toc-list{ flex:1 1 auto; list-style:none; margin:0; padding:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }.qr-toc-sheet .qt-toc-item{ display:flex; align-items:center; gap:8px; box-sizing:border-box; height:48px; padding:12px 24px; cursor:pointer; border:0; }.qr-toc-sheet .qt-toc-item .qt-toc-state, .qr-toc-sheet .qt-toc-item .qt-toc-sub{ display:none; } /* 목차 번호(챕터1·챕터2) — 프롤로그는 비어 있어 자동으로 숨겨짐 */.qr-toc-sheet .qt-toc-item .qt-toc-num{ flex:0 0 auto; width:auto; height:auto; padding:0; background:none; border-radius:0; font-size:13px; font-weight:var(--fw-bold); color:var(--dg-accent); white-space:nowrap; }.qr-toc-sheet .qt-toc-item .qt-toc-num:empty{ display:none; }.qr-toc-sheet .qt-toc-body{ flex:1; min-width:0; display:block; gap:0; }.qr-toc-sheet .qt-toc-label{ display:block; font-size:16px; font-weight:var(--fw-regular); line-height:24px; color:var(--dg-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.qr-toc-sheet .qt-toc-item.active{ background: var(--dg-fill); }.qr-toc-sheet .qt-toc-item.active .qt-toc-label{ font-weight:var(--fw-semibold); } /* 00 들어가며 — 용어 뜻 · 근거 · 리포트 구성 (해석이 아니라 안내) */ /* 목차에서 프롤로그는 번호 대신 '여는 글' */.qt-toc-pro{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--dg-accent); white-space:nowrap; }.qx-donut-fg{ fill:none; stroke:var(--dg-accent); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); } /* 02 남들이 보는 나 vs 실제 나 (슬라이더) */ /* 03 사고 흐름 */.qx-flow{ display:flex; flex-direction:column; align-items:flex-start; } /* 04 문장 이어보기 (Tap) */ /* 05 혼자일 때 / 함께일 때, 10 실천 가이드 — 공용 탭 */ /* 06·09 카드 뒤집기 */ /* 뒷면 글이 길어질 수 있어(AI가 씀) 절대배치 대신 흐름 배치 — 카드가 내용만큼 늘어난다 */ /* 강점 카드는 뒤집으면 글이 길어지니 한 줄을 통째로 차지한다 */ /* 08 위험 신호 */ /* 10 실천 가이드 체크리스트 */ /* 11 관계 아코디언 */ /* AI 생성 중 스켈레톤도 같은 여백 */ /* 마무리 — 한 문장 공개 + 완료 + 공유 */ /* ========================================================================== 메인페이지 — 2026-08-03 개편 때 기준값을 다시 잡음 (사장님 지시) -------------------------------------------------------------------------- 기준 요약 · 좌우 기준선 20px — 섹션 제목·목록·조작부가 전부 여기서 시작 · 섹션 사이 40px 여백 + 1px 옅은 선(#F1F1F1) · 섹션 제목 18px/700, 아래 16px, 오른쪽 «전체 보기»는 14px/500 #757575 · 카드 4:5 비율 · 이미지 아래 12px · 제목·설명 사이 4px · 글에만 좌우 4px · 그림자 쓰지 않는다(구분은 1px 선으로) 자세한 근거는 위키 [[디자인 시스템]] 참고. ========================================================================== */#page-main{ background: var(--dg-bg); /* 시안은 «맨 바깥»에서 글자색·줄높이를 정한다. 요소마다 따로 주면 값이 어긋난다. ⚠️ 앱 전체(body)는 line-height:1 이라, 여기서 1.3 으로 되돌려야 시안과 같아진다. */ color: var(--dg-text-primary); line-height: 1.3; }#page-main .hero-bg{ display: none; }#page-main .mp-content{ display: flex; flex-direction: column; } /* 헤더 — 흰 배경, 그림자 없음(2026-08-03) */ /* 헤더 그림자 — 평소엔 없고, 스크롤한 만큼(0~60px) 서서히 짙어진다. --sc 는 app/6-main.js 가 스크롤 양(0~1)으로 넣어 준다. 값이 없으면 0 = 그림자 없음. */#page-main #main-header{ background: var(--color-bg); border-bottom: 0; /* 아래쪽으로만 — 번짐(6px)만큼 사방을 안으로 당겨(-6px) 옆·위로는 새지 않게 한다 */ box-shadow: 0 6px 6px -6px rgba(17,17,17, calc(var(--sc, 0) * 0.16)); } /* ---------- 섹션 공통 ---------- */ /* 섹션 구분선 — 가이드 §4 «섹션 구분은 40px 여백 + 1px 선(#F1F1F1)». ⚠️ 메인 안에서만 도는 규칙이다. 다른 화면에서 같은 이름을 써도 선이 안 그려진다 (2026-08-05 후기 작성 화면에서 실제로 겪음). 다른 화면에 쓰려면 여기 선택자를 넓힐 것. */ #page-main .mp-divider{ margin: var(--dg-space-10) 0; border-bottom: 1px solid var(--dg-fill); }#page-main .mp-sec-h, #page-main .mp-rv-h{ font-size: 16px; font-weight: var(--fw-regular); }#page-main .mp-sec-h{ margin: 0 0 var(--dg-space-4); padding: 0 var(--dg-space-5); display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }#page-main .mp-sec-h b{ font-size: 20px; font-weight: var(--fw-bold); color: var(--dg-text-primary); word-break: keep-all; }#page-main .mp-sec-h a, #page-main .mp-rv-h a{ display: flex; align-items: center; gap: 4px; padding: 2px 0; flex-shrink: 0; font-size: 14px; font-weight: var(--fw-medium); color: var(--dg-text-secondary); text-decoration: none; white-space: nowrap; }/* 「전체 보기」 옆 화살표 — 1em = 옆 글자 크기를 그대로 따라간다(지금은 14px). 16px 로 고정돼 있을 땐 글자보다 커 보였다. 글자 크기를 바꾸면 화살표도 알아서 따라온다 (2026-08-04) */ #page-main .ic-sm{ width: 1em; height: 1em; } @media (prefers-reduced-motion: reduce) { } /* ---------- 메인 캐러셀 ---------- 카드 폭 = 화면 폭 − 2 × (엿보임 + 간격). 이 두 값만 고치면 카드 크기가 바뀐다. 브라우저 가로 스크롤이 아니라 «트랙을 통째로 미는» 방식이다 — 무한 반복에서 자리를 되돌리는 순간을 애니메이션이 끝난 뒤로 정확히 잡을 수 있어 끊기지 않는다. */#page-main{ --mp-peek: 24px; --mp-card-gap: 12px; }#page-main #main-carousel.mp-carousel{ --mp-card-w: calc(min(100%, var(--max-width)) - 2 * (var(--mp-peek) + var(--mp-card-gap))); margin: 0; padding: 24px 0 0; background: transparent; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; }#page-main #main-carousel.mp-carousel:active{ cursor: grabbing; }#page-main .carousel-track{ display: flex; gap: var(--mp-card-gap); align-items: center; will-change: transform; }#page-main .carousel-slide{ flex: 0 0 var(--mp-card-w); position: relative; transform: none; box-shadow: none; border-radius: 0; overflow: visible; }#page-main .mp-hero-card{ position: relative; aspect-ratio: 4 / 5; background: var(--dg-surface-muted); border-radius: var(--dg-radius-lg); overflow: hidden; /* 썸네일이 흰 바탕이라 테두리가 없으면 카드 경계가 안 보인다 (2026-09-02 사장님 지적) */ border: 1px solid var(--dg-divider); } /* 그림은 카드(4:5)를 «꽉» 채운다 — 넘치는 쪽은 잘린다. ⚠️ 이 줄이 없으면 그림이 제 비율대로만 그려져 카드 아래에 회색 띠가 남는다 (2026-09-09에 썸네일을 정사각으로 바꾸면서 실제로 그렇게 나갔다). */ #page-main .mp-hero-card img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* 순위 뱃지(.mp-hero-rank)는 걷어냈다 — 2026-09-09 사장님 지시. 까닭은 app/1-core.js 의 그 자리 주석에. */ /* 넘김 표시 «점» 줄 — 카드 아래 가운데. 화살표·숫자 알약은 걷어냈다 (2026-09-08 A안 확정) */ #page-main .mp-cdots{ display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: var(--dg-space-6); } /* ---------- 가로 스크롤 목록 (세로 카드) ---------- */#page-main .mp-hscroll{ width: 100%; overflow-x: auto; padding: 0 var(--dg-space-5); scrollbar-width: none; -webkit-overflow-scrolling: touch; }#page-main .mp-hscroll::-webkit-scrollbar{ display: none; }#page-main .mp-hscroll-in{ list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }#page-main .mp-hscroll-in::after{ content: ''; flex: none; width: 8px; height: 1px; }#page-main .mp-card{ flex: 0 0 44%; cursor: pointer; }#page-main .mp-card-img{ aspect-ratio: 295 / 370; width: 100%; /* 배너(.mp-hero-card)와 같은 선을 두른다 — 썸네일이 흰 바탕이라 선이 없으면 카드 경계가 안 보인다. 2026-08-04 에 뺐다가 2026-09-03 사장님 지시로 되살렸다. */ border: 1px solid var(--dg-divider); border-radius: var(--dg-radius-sm); background: var(--dg-fill); overflow: hidden; /* 배경은 썸네일 없는 테스트의 회색 자리표시로 남긴다 */ }#page-main .mp-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }#page-main .mp-card-txt{ margin-top: 12px; padding: 0 4px; display: grid; gap: 4px; }#page-main .mp-card-name{ font-size: 16px; font-weight: var(--fw-semibold); color: var(--dg-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }#page-main .mp-card-desc{ font-size: 14px; font-weight: var(--fw-medium); color: var(--dg-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- 분석 원칙 3줄 ---------- */ /* 좌우 여백 20px 는 ul 이 갖는다 — 항목 사이 구분선이 양쪽에서 20px 안으로 들어오게 (2026-08-04) */#page-main .mp-why{ list-style: none; margin: 0; padding: 0 var(--dg-space-5); }#page-main .mp-why-item{ display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--dg-fill); }#page-main .mp-why-item:last-child{ border-bottom: 0; }#page-main .mp-why-no{ flex: none; width: 20px; height: 20px; border-radius: var(--dg-radius-full); background: var(--dg-fill); color: var(--dg-text-body); font-size: 10px; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; }#page-main .mp-why-txt{ display: grid; gap: 4px; }#page-main .mp-why-txt b{ font-size: 14px; font-weight: var(--fw-semibold); color: var(--dg-text-primary); }#page-main .mp-why-txt span{ font-size: 12px; line-height: 1.5; color: var(--dg-text-secondary); } /* ---------- 이번 주 많이 받은 순 (가로형 목록) ---------- */#page-main .mp-rank{ list-style: none; margin: 0; padding: 0 var(--dg-space-5); display: grid; gap: 12px; }#page-main .mp-rank-row{ display: flex; align-items: center; cursor: pointer; }#page-main .mp-rank-no{ width: 28px; height: 28px; margin-right: 4px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: var(--fw-semibold); color: var(--dg-text-primary); }#page-main .mp-rank-img{ width: 100px; height: 64px; flex-shrink: 0; border: 1px solid var(--dg-divider); border-radius: 4px; background: var(--dg-fill); overflow: hidden; } /* 선은 배너·세로 카드와 같은 값 (2026-09-03 사장님 지시) */#page-main .mp-rank-img img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }#page-main .mp-rank-txt{ margin-left: 16px; padding: 4px 0; flex: 1; min-width: 0; }#page-main .mp-rank-txt b{ display: block; margin-bottom: 4px; font-size: 16px; font-weight: var(--fw-semibold); color: var(--dg-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }#page-main .mp-rank-txt span{ font-size: 12px; color: var(--dg-text-body); } /* ---------- 후기 (가로 카드) ---------- 시안의 .rv-h / .rv-scroll 을 그대로 옮긴 것. 제목은 다른 섹션 제목과 «같은» 20px/700 · 같은 20px 기준선이다 (2026-08-04 확인). 목록은 왼쪽만 20px 여백 — 카드가 화면 오른쪽으로 이어지는 느낌을 준다. */#page-main .mp-rv-h{ display: flex; align-items: flex-end; justify-content: space-between; margin: 0; padding: 0 var(--dg-space-5); }#page-main .mp-rv-h b{ font-size: 20px; font-weight: var(--fw-bold); color: var(--dg-text-primary); }#page-main .mp-rv-scroll{ margin-top: var(--dg-space-4); width: 100%; overflow-x: auto; padding-left: var(--dg-space-5); scrollbar-width: none; -webkit-overflow-scrolling: touch; }#page-main .mp-rv-scroll::-webkit-scrollbar{ display: none; }#page-main .mp-rv-in{ list-style: none; margin: 0; padding: 0; display: flex; gap: var(--dg-space-3); }#page-main .mp-rv-in::after{ content: ''; flex: none; width: var(--dg-space-5); height: 1px; } /* 카드 모양은 «메인»과 «후기 전체보기(/reviews)»가 함께 쓴다 — 폭·배치만 각 화면에서 정한다 (2026-08-04) */.mp-rv-card{ border: 0; background: var(--dg-surface-soft); /* 테두리 대신 옅은 면 (2026-08-04 사장님 지시) */ border-radius: var(--dg-radius-sm); padding: var(--dg-space-3) var(--dg-space-4); }/* ── 홈 후기 카드 — 상품 그림이 «바탕»으로 깔린다 (2026-09-09 F안 확정) ────────── ⚠️ #page-main 안으로만 한정한다. 이 카드는 «후기 전체보기»와 «결제창»도 같이 쓰는데, 거기까지 바탕이 깔리면 글이 안 읽힌다. 그림 주소는 app/1-core.js 가 카드마다 --rv-bg 로 넣어 준다. 없으면 그냥 옅은 면으로 남는다. */ #page-main .mp-rv-card{ width: 256px; flex: none; position: relative; overflow: hidden; min-height: 186px; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; background-image: var(--rv-bg); background-size: cover; background-position: center; } /* 어둡게 덮기 — 아래로 갈수록 진해져 글이 읽힌다. 위는 그림이 보이게 남긴다 */ #page-main .mp-rv-card::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,6,4,.96) 42%, rgba(10,6,4,.72) 70%, rgba(10,6,4,.35) 100%); } #page-main .mp-rv-card > *{ position: relative; } #page-main .mp-rv-top{ padding: 0 var(--dg-space-4); } #page-main .mp-rv-card .mp-rv-text{ padding: 0 var(--dg-space-4) var(--dg-space-3); color: #EDEDED; } .mp-rv-top{ display: flex; align-items: center; gap: var(--dg-space-2); }.mp-rv-meta{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--dg-space-2); }.mp-rv-row1{ display: flex; align-items: center; justify-content: space-between; }.mp-rv-stars{ display: flex; gap: 0; color: var(--dg-accent); }.mp-rv-stars .review-star{ width: 16px; height: 16px; color: var(--dg-accent); } /* 별은 로고 주황 (2026-09-09) *//* ⚠️ 못 받은 별(.off)은 «여기서도» 다시 적어야 한다 — 바로 위 규칙이 id 를 써서 더 세다. .review-star.off 만 두면 이 화면에서는 주황 그대로 나온다 (2026-09-09에 실제로 그랬다) */#page-main .mp-rv-stars .review-star.off, /* 후기 전체보기(/reviews)·결제창도 같은 .mp-rv-stars 를 쓴다 — 거기서도 회색이 되게 한 번 더 */ .mp-rv-stars .review-star.off{ color: #4A4A4A; }.mp-rv-when{ font-size: 12px; color: var(--dg-text-secondary); letter-spacing: 0; }.mp-rv-who{ display: flex; align-items: center; gap: var(--dg-space-1); font-size: 12px; letter-spacing: 0; color: var(--dg-text-primary); min-width: 0; }.mp-rv-who span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mp-rv-bar{ flex: none; width: 1px; height: 10px; background: var(--dg-text-secondary); }.mp-rv-text{ margin: var(--dg-space-2) 0 0; font-size: 12px; line-height: 1.5; letter-spacing: 0; color: var(--dg-text-primary); }#page-main .mp-rv-text{ min-height: 64px; } /* 가로로 늘어선 카드끼리 높이를 맞추려고 (세로 목록에선 글에 맞춰 줄인다) */ /* 후기가 아직 없을 때 — 카드 대신 한 줄 안내 */.mp-rv-empty{ flex: 1; padding: var(--dg-space-4) 0; font-size: 14px; color: var(--dg-text-secondary); list-style: none; } /* ---------- 후기 전체보기 (/reviews) ---------- 메인의 카드를 화면 폭까지 늘려 아래로 쭉 쌓는다 (2026-08-04 사장님 지시) */#page-reviews .rvall-count{ margin: 0 0 var(--dg-space-3); padding: 0 var(--dg-space-1); font-size: 13px; color: var(--dg-text-secondary); }#page-reviews .rvall-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--dg-space-3); }#page-reviews .mp-rv-card{ width: 100%; }/* «더 보기» — CTA 가 아니라 목록을 잇는 버튼이라 오렌지를 쓰지 않는다 (오렌지는 화면당 1~2곳, 결제 같은 진짜 CTA 자리에만). 흰 면에 옅은 테두리로 둔다. */#page-reviews .rvall-more{ display: block; width: 100%; margin-top: var(--dg-space-4); min-height: 48px; padding: 0 var(--dg-space-4); border: 1px solid var(--dg-divider); border-radius: var(--dg-radius-md); background: var(--dg-surface); color: var(--dg-text-body); font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold); cursor: pointer; }#page-reviews .rvall-more:active{ transform: scale(0.99); }#page-reviews .rvall-more:disabled{ color: var(--dg-text-faint); cursor: default; }#page-reviews .rvall-more[hidden]{ display: none; } /* ---------- 푸터 ---------- */#page-main .mp-content{ padding-bottom: var(--dg-space-20, 80px); }#page-main #main-footer{ background: var(--dg-surface-soft); border-top: 0; margin-top: 0; letter-spacing: -0.02em; }#page-main #main-footer .footer-info p, #page-main #main-footer .footer-info strong, #page-main #main-footer .footer-links a, #page-main #main-footer .footer-copyright{ font-size: 12px; color: var(--dg-text-faint); }#page-main #main-footer .footer-info strong{ font-weight: var(--fw-semibold); }#page-main #main-footer .footer-links a{ font-weight: var(--fw-semibold); } /* 유형별 칩 + 쿠폰/이벤트 배너 (캐러셀 아래) */.mp-cat-chips{ display: flex; gap: var(--dg-space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0; padding: 0 20px 2px; }.mp-cat-chips::-webkit-scrollbar{ display: none; }.mp-cat-chip{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: var(--dg-radius-full); border: 0; background: var(--dg-fill); color: var(--dg-text-primary); font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--transition-fast); }.mp-cat-chip:active{ background: var(--dg-bg); }.mp-cat-chip.active{ background: var(--dg-accent); color: #fff; }.mp-cat-chip-ico{ width: 28px; height: 28px; border-radius: 50%; background: var(--dg-surface); flex: 0 0 auto; } /* 상단 탭 — 옛 카테고리 탭바 스타일(6등분 균등 배치, 선택 굵은검정+가운데밑줄). 메인 칩과 별개. ⚠️ 2026-09-09에 «전체 테스트» 화면을 홈으로 합치면서, 이 탭을 쓰는 화면은 내 결과 하나만 남았다 */#page-storage .mp-topheader{ box-shadow: none; }#page-storage .mp-cat-chips{ position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top)); z-index: 90; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 0; height: 44px; padding: 0 20px; overflow: visible; background: var(--color-bg); /* 홈 갈래 바와 같은 연한 밑선 (2026-09-09 사장님 지시). 전에는 선 없이 그림자만 있었다. */ border-bottom: 1px solid var(--dg-divider); /* 전에는 여기에 그림자(0 6px 6px -6px)가 있었다. 2026-09-09에 연한 밑선으로 바꾸면서 뺐다 — 선과 그림자가 겹치면 두 겹으로 두툼해 보인다. */ }#page-storage .mp-cat-chip{ justify-self: center; background: none; border-radius: 0; gap: 0; padding: 0; font-size: 16px; font-weight: var(--fw-regular); color: var(--dg-text-secondary); position: relative; }#page-storage .mp-cat-chip:active{ background: none; }#page-storage .mp-cat-chip-ico{ display: none; }#page-storage .mp-cat-chip.active{ background: none; color: var(--dg-text-primary); font-weight: 600; }#page-storage .mp-cat-chip.active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dg-text-primary); border-radius: 2px; } /* 홈에 합친 상품 그리드 (2026-09-09 «테스트» 화면을 홈으로 합치며). 섹션 안쪽 여백은 홈의 다른 목록과 같은 20px 로 맞춘다. */ /* «전체» 탭이면 가로로 미는 목록만, 갈래 탭이면 유튜브식 목록만 보인다 */ #page-main #tests-groups{ padding: 0 var(--dg-space-5); display: none; } #page-main.cat-filtered #tests-groups{ display: block; } #page-main.cat-filtered .mp-hscroll{ display: none; } /* ── 상품 갈래 바 — 헤더 «바로 아래»에 붙는다 (2026-09-09 C안 확정) ──────────── 내 결과(보관함) 탭과 자리·크기는 같고, 고른 칸을 «주황»으로 한 것만 다르다. 어두운 판에서 지금 어디인지가 흰 밑줄보다 멀리서도 보인다 (사장님 결정). 헤더가 z-index:100 이라 그 아래(90)에 둔다 — 스크롤하면 내용이 이 바 밑으로 지나간다. */ #page-main .mp-cat-bar{ position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top)); z-index: 90; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 0; height: 44px; padding: 0 12px; margin: 0 0 var(--dg-space-4); overflow: visible; background: var(--color-bg); border-bottom: 1px solid var(--dg-divider); } /* ⚠️ justify-self 는 center 다 — stretch 로 두면 칸이 통째로 늘어나 글자가 왼쪽에 붙고 밑줄이 «칸 전체» 길이가 된다 (2026-09-09에 실제로 그렇게 나갔다). center 로 두면 단추가 글자 크기로 줄어들어 칸 한가운데 놓이고, 밑줄도 글자만큼만 그어진다. ⚠️ 내 사주(#page-storage) 탭은 2026-09-09부터 다르다 — 칸이 둘뿐이라 stretch 로 두고 글자만 justify-content 로 가운데 맞춘다(밑줄이 칸 절반을 긋는다). */ #page-main .mp-cat-bar .mp-cat-chip{ position: relative; justify-self: center; background: none; border-radius: 0; gap: 0; padding: 0; font-size: 15px; font-weight: var(--fw-regular); color: var(--dg-text-secondary); } #page-main .mp-cat-bar .mp-cat-chip:active{ background: none; } #page-main .mp-cat-bar .mp-cat-chip-ico{ display: none; } #page-main .mp-cat-bar .mp-cat-chip.active{ background: none; color: var(--dg-accent); font-weight: var(--fw-bold); } #page-main .mp-cat-bar .mp-cat-chip.active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--dg-accent); border-radius: 2px; } /* ── 무료로 해볼 것 두 가지 — 후기와 순위 사이 (2026-09-09 C안 확정) ────────── 한 줄에 둘. 세로로 쌓는 안(B)보다 높이가 절반이라 홈이 짧아진다. */ #page-main .ft-grid{ list-style: none; margin: 0; padding: 0 var(--dg-space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--dg-space-3); } #page-main .ft-card{ padding: 16px 14px 18px; border-radius: var(--dg-radius-md); background: var(--dg-surface); cursor: pointer; transition: background var(--transition-fast); } #page-main .ft-card:active{ background: var(--dg-surface-muted); } #page-main .ft-name{ display: block; font-size: 15px; font-weight: var(--fw-bold); color: var(--dg-text-primary); } #page-main .ft-desc{ display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--dg-text-secondary); } #page-main .ft-desc em{ font-style: normal; color: var(--dg-accent); } /* 아이콘 — 임시로 그린 것이다. 진짜 그림이 생기면 이 두 덩어리만 갈아 끼운다. ① 만세력 = 간지 글자 네 칸 ② 시간 추적기 = 바늘 없는 시계에 물음표 */ #page-main .ft-ic{ display: block; width: 52px; height: 52px; margin-bottom: 12px; } /* ⚠️ 세로도 1fr 1fr 로 나눠야 네 칸이 정사각이 된다 — 안 주면 글자 높이만큼만 잡혀 납작해진다 */ #page-main .ft-ic-gan{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; } #page-main .ft-ic-gan i{ display: flex; align-items: center; justify-content: center; font-style: normal; border-radius: 6px; background: var(--dg-fill); font-size: 11px; font-weight: var(--fw-bold); color: var(--dg-text-body); } #page-main .ft-ic-gan i.on{ background: var(--dg-accent-soft); color: var(--dg-accent); } #page-main .ft-ic-clock{ position: relative; border-radius: 50%; border: 2px dashed var(--dg-line-2); display: flex; align-items: center; justify-content: center; } #page-main .ft-ic-clock i{ font-style: normal; font-size: 16px; font-weight: 800; color: var(--dg-accent); } #page-main .ft-ic-clock::after{ content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 15px; border-radius: 2px; background: var(--dg-accent); transform-origin: top center; transform: rotate(140deg); } /* ── LIVE 배지 — «실시간 인기사주» 제목 왼쪽 (2026-09-09 A안 확정) ───────────── 빨간 네모에서 같은 모양의 테두리가 밖으로 퍼지며 사라진다 (방송 «ON AIR» 표시와 같은 결). ⚠️ 빨강은 우리 주황(--dg-accent)이 아니라 «방송 빨강»이다 — 주황을 쓰면 옆 글자와 섞여 배지로 안 보인다. 색 규칙의 예외로 둔다. */ #page-main #mp-products .mp-sec-h{ justify-content: flex-start; align-items: center; } .live-badge{ position: relative; flex: none; display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 4px; background: #FF3B30; color: #fff; font-size: 10px; font-weight: var(--fw-extrabold, 800); letter-spacing: .06em; line-height: 1; } .live-badge::after{ content: ''; position: absolute; inset: 0; border-radius: 4px; border: 1.5px solid #FF3B30; animation: liveRing 1.8s ease-out infinite; } @keyframes liveRing{ 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.85); opacity: 0; } } /* «동작 줄이기»를 켠 손님에게는 움직이지 않는다 (어지럼증 때문에 켜는 분들이 있다). 캐러셀 자동 넘김도 같은 규칙을 쓴다 — app/6-main.js 의 prefersReducedMotion 참고 */ @media (prefers-reduced-motion: reduce){ .live-badge::after{ animation: none; } } /* ── 갈래를 «고른» 홈 — 그 갈래 목록만 남긴다 (2026-09-09 사장님 지시) ── «전체»일 때가 지금까지의 홈이고, 갈래 하나를 고르면 캐러셀·후기·이번 주 순위가 빠지고 상품 목록만 바 바로 아래에 붙는다. 붙였다 떼는 일은 app/6-main.js 의 filterTests 가 한다. 제목(«지금 받아볼 수 있는 것»)도 뺀다 — 어느 갈래인지는 바로 위 탭이 이미 말하고 있다. */ #page-main.cat-filtered .mp-carousel, #page-main.cat-filtered #carousel-dots, #page-main.cat-filtered .mp-divider, #page-main.cat-filtered .mp-block:not(#mp-products), #page-main.cat-filtered #mp-products .mp-sec-h{ display: none; } #page-main.cat-filtered #mp-products{ padding-top: var(--dg-space-2); } /* 갈래가 하나뿐이면 JS가 hidden 을 걸어 바를 통째로 감춘다. ⚠️ 위 규칙이 id 를 써서 더 세다 — 여기도 같은 세기로 적어야 hidden 이 먹는다. */ .mp-cat-chips[hidden]{ display: none; } #page-main .mp-cat-bar[hidden]{ display: none; } /* ── 상품 목록 카드 — 화면에 따라 «두 가지 모양» (2026-09-09 사장님 지시) ───────── ① 전체 탭 : 2열 세로 카드 (4:5). 예전 그대로다 — 바꾸지 말 것. ② 갈래 탭 : 유튜브 영상 목록처럼 한 줄에 하나씩, 가로 16:9 + 동그란 프로필. ②는 아래 «#page-main.cat-filtered» 묶음이 만든다. 붙였다 떼는 것은 app/6-main.js 의 filterTests. */ /* ① 전체 탭 — 2열 세로 카드 */ .tg-grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; } .tg-card{ cursor: pointer; } /* 썸네일 자리표시는 중성 회색으로 (사장님 지시 2026-07-23) */ .tg-thumb{ width: 100%; aspect-ratio: 1 / 1.2; border-radius: var(--dg-radius-sm); background: var(--dg-surface-muted); overflow: hidden; border: 1px solid var(--dg-divider); } .tg-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; } .tg-row{ display: block; } /* 전체 탭에서는 «줄»이 아니라 그냥 아래로 쌓인다 */ .tg-ava{ display: none; } /* 프로필 동그라미는 갈래 탭에서만 */ .tg-name{ font-size: 16px; font-weight: 700; color: var(--dg-text-primary); margin: 10px 0 0; line-height: 1.3; word-break: keep-all; } .tg-desc{ font-size: 14px; color: #757575; margin: 4px 0 0; line-height: 1.4; word-break: keep-all; } /* ② 갈래 탭 — 유튜브식 한 줄 카드 */ #page-main.cat-filtered .tg-grid{ grid-template-columns: 1fr; gap: 28px; } #page-main.cat-filtered .tg-thumb{ aspect-ratio: 16 / 9; border-radius: var(--dg-radius-md); } #page-main.cat-filtered .tg-row{ display: flex; gap: 12px; margin-top: 12px; } #page-main.cat-filtered .tg-ava{ display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--dg-fill); } #page-main.cat-filtered .tg-ava img{ width: 100%; height: 100%; object-fit: cover; display: block; } #page-main.cat-filtered .tg-txt{ min-width: 0; } /* 이 줄이 없으면 긴 글이 카드를 밀어 넓힌다 */ /* 이름은 두 줄까지, 설명도 두 줄까지 — 넘치면 «…» */ #page-main.cat-filtered .tg-name{ margin: 1px 0 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #page-main.cat-filtered .tg-desc{ font-size: 13px; color: var(--dg-text-secondary); margin: 4px 0 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 전체 테스트 페이지 — 칩에서 스크롤 시 상단 헤더에 안 가리게 */ /* ========================================================================== 테스트 인트로 리스킨 — Image #11 계층 + 디자인 가이드 (2026-07-10) ========================================================================== */ /* 폰 화면 높이에 딱 맞춤 — 스크롤 없이 한 화면 (버튼은 하단 고정) */.service-intro--text{ height:100dvh; overflow:hidden; background: var(--dg-surface); }.service-intro--text .service-intro-body{ flex:1; min-height:0; display:flex; flex-direction:column; padding:0 20px; } /* 텍스트형 인트로: 버튼+고지를 본문 밖 하단 바(service-intro-cta)로 분리 — intake와 동일 구조 */ /* → cta는 base의 display:flex 그대로 보이고, 이미지형 전용 요소만 숨김 */.si-cta-slot{ display:none; width:100%; }.service-intro--text .si-cta-slot{ display:block; }.service-intro--text .service-intro-title, .service-intro--text .service-intro-btn, .service-intro--text #service-intro-note{ display:none; }.service-intro--text .service-intro-text{ max-width:var(--max-width); width:100%; margin:0 auto; flex:1; min-height:0; display:flex; flex-direction:column; text-align:center; color:var(--dg-text-body); } /* 상단(텍스트·메타)은 자연 높이, 그래픽이 남는 공간을 채우며 버튼 묶음을 아래로 밀어냄 */.service-intro--text .si-top{ flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; } /* 안쪽 칸이 가운데 정렬을 맡는다 — «더 알아보기» 카드를 펼치면 글이 길어져도 위쪽이 잘리지 않고 스크롤된다(가운데 정렬만 쓰면 넘칠 때 머리가 잘린다). */ .service-intro--text .si-top-inner{ margin:auto 0; display:flex; flex-direction:column; gap:20px; } /* ⚠️ 줄어들지 않게 못박는다. 카드(.si-about)는 overflow:hidden 이라 «자동 최소 높이»가 0이 되어, 자리가 모자라면 flex 가 카드를 0으로 눌러 버린다(펼쳐도 아무것도 안 보였다). */ .service-intro--text .si-top-inner > *{ flex:0 0 auto; }.service-intro--text .si-bottom{ flex-shrink:0; } /* 그래픽은 가운데 남는 공간을 채우되, 작은 화면에서도 넘치지 않게 줄어듦 */ /* 하단 묶음(버튼·안내·고지) 간격 정리 */.service-intro--text .si-bottom .si-cta{ margin-top:0; }.service-intro--text .si-bottom .si-disclaimer{ margin-top:12px; gap:4px; font-size:12px; background:none; padding:0; border-radius:0; }.si-label{ font-size: var(--fs-label); font-weight: var(--fw-semibold); color:var(--dg-accent); margin:0; }.si-headline{ font-size: 26px; font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.3; color:var(--dg-text-primary); word-break:keep-all; text-wrap:balance; margin:0; }.si-subtitle{ font-size: var(--fs-body); line-height:1.6; color:var(--dg-text-secondary); word-break:keep-all; margin:0; font-weight: var(--fw-regular);}.si-meta{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0; flex-wrap:wrap; }.si-meta-item{ display:inline-flex; align-items:center; gap:6px; font-size: 12px; font-weight: var(--fw-regular); color:var(--dg-text-secondary); }.si-meta-ico{ display:inline-flex; color:var(--dg-text-secondary); } /* 오렌지는 버튼 하나만 (2026-08-04 시안) */.si-meta-ico svg{ width:18px; height:18px; display:block; }.si-meta-sep{ width:1px; height:14px; background:var(--dg-divider); } /* ── 소개 화면의 «더 알아보기» 접었다 펴는 카드 ────────── 썸네일 버튼이 질문을 던지고 넘어오는데 소개 화면이 답을 안 해서 넣었다. 값은 전부 가이드에서 — 여백 4의 배수(12·16·8) · 둥글기 12(버튼·선택지 급. 접히면 350×44 라 20을 쓰면 알약처럼 보인다. 2026-09-03 사장님이 12로 고르심) · 글자는 스케일 안에서만(제목 Label 14/600/1.4 · 본문 Caption 13/400/1.45 · 꼬리말 Micro 12/1.4). 여닫기: 높이를 «0fr → 1fr» 로 옮긴다 — max-height 어림값이 없어도 글이 길어지면 알아서 맞는다. 붙였다 떼는 일은 2-forms.js 의 siToggleAbout() 이 한다. */ .si-about{ background: var(--dg-surface-soft); border-radius:var(--dg-radius-md); overflow:hidden; text-align:left; } .si-about-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:none; border:0; cursor:pointer; font-family:var(--font-sans); } .si-about-btn b{ font-size:14px; font-weight:var(--fw-semibold); line-height:1.4; color:var(--dg-text-primary); } .si-about-caret{ width:20px; height:20px; flex:0 0 auto; color:var(--dg-text-secondary); transition:transform .28s cubic-bezier(.4,0,.2,1); } .si-about.open .si-about-caret{ transform:rotate(180deg); } .si-about-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1); } .si-about.open .si-about-body{ grid-template-rows:1fr; } .si-about-fold{ overflow:hidden; opacity:0; transition:opacity .2s ease; } .si-about.open .si-about-fold{ opacity:1; transition:opacity .24s ease .06s; } .si-about-pad{ margin:0 16px; border-top:1px solid var(--dg-divider); padding-bottom:16px; } /* text-wrap:pretty — 마지막 줄에 낱말 하나만 떨어지는 것을 막는다 */ .si-about-pad p{ margin:12px 0 0; font-size:13px; line-height:1.45; color:var(--dg-text-secondary); word-break:keep-all; text-wrap:pretty; } .si-about-list{ list-style:none; margin:12px 0 0; padding:0; } .si-about-list li{ position:relative; padding-left:16px; font-size:13px; line-height:1.45; color:var(--dg-text-secondary); word-break:keep-all; text-wrap:pretty; } .si-about-list li + li{ margin-top:8px; } .si-about-list li::before{ content:''; position:absolute; left:2px; top:7px; width:5px; height:5px; border-radius:50%; background:var(--dg-accent); } .si-about-foot{ margin:12px 0 0; font-size:12px; line-height:1.4; color:var(--dg-text-faint); word-break:keep-all; } @media (prefers-reduced-motion: reduce){ .si-about-body, .si-about-fold, .si-about-caret{ transition:none; } }.si-cta{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:420px; min-height:56px; margin:40px auto 0; padding:0 24px; border:0; border-radius:var(--dg-radius-md); background:var(--dg-accent); color:#fff; font-size: var(--fs-body); font-weight: var(--fw-semibold); cursor:pointer; transition:transform var(--transition-fast); font-family:var(--font-sans); }.si-cta:active{ transform:translateY(1px); }.si-cta-arrow{ font-size:18px; }.si-disclaimer{ display:inline-flex; align-items:center; gap:8px; margin:34px auto 0; padding:12px 18px; background: var(--dg-surface-soft); border-radius:var(--dg-radius-sm); font-size: 12px; color:var(--dg-text-faint); word-break:keep-all; }/* 이용 안내 한 줄 — ⓘ 줄 자리·글자체를 그대로 쓰되 줄바꿈만 막는다 (2026-09-03 사장님 지시) */.si-terms{ display:block; white-space:nowrap; text-align:center; } /* ========================================================================== 정보 입력(intake) 리스킨 — 디자인 가이드 (2026-07-10) #page-intake로 특정성 ↑ → 기존 .intake--light 블루 규칙을 덮음 ========================================================================== */#page-intake, #page-intake.intake--light{ background: var(--dg-surface); }#page-intake .intake-bg, #page-intake .intake-dim{ display: none; }#page-intake .intake-inner{ color: var(--dg-text-body); }#page-intake .intake-header{ height: calc(var(--header-height) + env(safe-area-inset-top)); }#page-intake .intake-back{ color: #757575; }#page-intake .intake-progress{ color: var(--dg-text-secondary); font-size: var(--fs-label); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }#page-intake .intake-body{ padding: 24px 20px 0; }#page-intake .intake-q{ font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.4; color: var(--dg-text-primary); word-break: keep-all; }#page-intake .intake-sub{ font-size: var(--fs-body-small); color: var(--dg-text-secondary); line-height: 1.6; } /* 입력창: 가이드 §9.4 박스형 */#page-intake .intake-input{ background: var(--dg-surface); border: 1px solid var(--dg-divider); border-radius: var(--dg-radius-md); height: 52px; padding: 0 16px; font-size: var(--fs-body); color: var(--dg-text-primary); margin-bottom: 0; }#page-intake .intake-input::placeholder{ color: var(--dg-text-secondary); }#page-intake .intake-input:focus{ border-color: var(--dg-accent); } /* 다음 버튼: 가이드 메인 버튼 */#page-intake .intake-next{ background: var(--dg-accent); color: #fff; border: 0; border-radius: var(--dg-radius-md); font-size: var(--fs-body); font-weight: var(--fw-semibold); box-shadow: none; font-family: var(--font-sans); }#page-intake .intake-next:active{ transform: translateY(1px); }#page-intake .intake-next:disabled{ background: var(--dg-surface-muted); box-shadow: none; cursor: default; } /* ========================================================================== 닉네임 입력만 받는 단일 단계(문항형) → 전체 페이지 대신 팝업(모달)로 표시 ========================================================================== */ /* 딤은 애니메이션 없이 즉시 나타난다. 전체 화면을 덮는 요소를 투명도 애니메이션하면 매 프레임 배경 전체(#app-container의 40px 블러 그림자 포함)를 다시 그려 버벅인다. (2026-07-22 A/B/C/D 비교 테스트에서 사장님이 이 방식을 고르심) */#page-intake.intake--modal{ position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,0.65); min-height: 0; overflow-y: auto; animation: none; }#page-intake.intake--modal.active{ display: flex; align-items: center; justify-content: center; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }#page-intake.intake--modal .intake-inner{ width: 100%; max-width: 420px; min-height: 0; background: var(--color-bg); border-radius: var(--dg-radius-lg, 20px); box-shadow: none; padding: 0; overflow: hidden; animation: intakeModalPop .22s ease; will-change: transform, opacity; }#page-intake.intake--modal .intake-header{ height: 48px; padding: 0 12px 0 20px; justify-content: flex-end; }#page-intake.intake--modal .intake-progress{ display: none; } /* 뒤로(‹) 버튼은 팝업에선 닫기(✕)로 — 글자는 스크립트가 바꾼다 */#page-intake.intake--modal .intake-back{ width: 44px; height: 44px; display: flex; align-items: center; text-align: center; justify-content: center; order: 2; }#page-intake.intake--modal .intake-body{ flex: 0 0 auto; padding: 4px 20px 0; }#page-intake.intake--modal .intake-cta{ padding: 24px 20px; } @keyframes intakeModalPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } /* ========================================================================== 질문(테스트 진행) 리스킨 — 디자인/타이포 가이드 (2026-07-10) ========================================================================== */#page-qtest .qt-header{ border-bottom-color: var(--dg-divider); } /* 문항 본문을 화면 높이만큼 채워 '이전으로' 버튼을 하단에 고정 */#page-qtest .qt-body{ display:flex; flex-direction:column; box-sizing:border-box; min-height:calc(100dvh - var(--header-height) - env(safe-area-inset-top)); }#page-qtest .qt-prev{ margin-top:auto; }#page-qtest .qt-count{ color: var(--dg-text-secondary); font-size: 14px; font-weight: var(--fw-regular); }#page-qtest .qt-q{ font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.012em; line-height: 1.3; color: var(--dg-text-primary); min-height: 2.8em; }#page-qtest .qt-opt{ border: 1px solid var(--dg-divider); border-radius: var(--dg-radius-md); background: var(--dg-surface); }#page-qtest .qt-opt.selected{ border-color: var(--dg-accent); background: var(--dg-accent-soft); }#page-qtest .qt-opt-label{ font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--dg-text-primary); }#page-qtest .qt-opt.selected .qt-opt-label{ color: var(--dg-accent); } /* 굵기 유지(§9.2) */#page-qtest .qt-opt-desc{ font-size: 14px; color: var(--dg-text-secondary); }#page-qtest .qt-prev{ color: var(--dg-text-secondary); font-size: var(--fs-label); font-weight: var(--fw-semibold); } /* ========================================================================== 결과 화면(#page-qresult) 리스킨 — 디자인/타이포 가이드 (2026-07-10) ※ 안전 배너(qt-safety-*)는 안전 UX라 기존 유지 ========================================================================== */#page-qresult{ background: var(--dg-surface); }#page-qresult .sub-header{ background: var(--color-bg); border-bottom:0; box-shadow:0 6px 6px -6px rgba(17,17,17, calc(var(--sc, 0) * 0.16)); }#page-qresult .sub-header .back-btn{ color: #757575; }#page-qresult .sub-header .sub-exit{ color: #757575; }#page-qresult .sub-title{ color: var(--dg-text-primary); } /* 단계 공개(qf) */ /* 인트로·얼굴소개·거울 단계: 정보입력 화면처럼 버튼을 화면 하단에 고정, 좌우 24로 통일 */ /* 버튼: 정보입력(intake-next)과 동일 — 높이56·좌우꽉참·둥글기 md·항상 하단 */ /* 거울 화면 버튼은 문지르기 전엔 숨김 유지 (hidden 보호) */ /* 인트로: 이모지·제목·설명을 한 덩어리로 묶어 '버튼 위 영역' 정가운데(시작 화면과 동일) */ /* 목차(toc) */ /* ========================================================================== 결제 화면(#page-checkout) 리스킨 — 디자인/타이포 가이드 (2026-07-10) ========================================================================== */#page-checkout{ --ck-accent: var(--dg-accent); --ck-card-bg: var(--dg-surface-soft); }#page-checkout .checkout-divider{ background: var(--dg-fill); }#page-checkout .checkout-coupon-btn, #page-checkout .checkout-phone-input{ border-color: var(--dg-divider); }#page-checkout .checkout-thumb{ border-radius: var(--dg-radius-sm); box-shadow: none; }#page-checkout .checkout-footer{ border-top: none; }#page-checkout .sub-header{ border-bottom: none; } /* 결제 버튼 → 가이드 메인 버튼 */#page-checkout .checkout-pay-btn{ height:56px; padding:0; background: var(--dg-accent); border-radius: var(--dg-radius-md); box-shadow: none; font-size: var(--fs-body); font-weight: var(--fw-semibold); }#page-checkout .checkout-pay-btn:disabled{ background: var(--dg-surface-muted); box-shadow: none; } /* 타이포 토큰 */#page-checkout .checkout-heading{ font-size: 16px; margin-bottom: 16px; }#page-checkout .checkout-row-label{ font-size: 14px; }#page-checkout .checkout-row-value{ font-size: 14px; }#page-checkout .checkout-row.sub .checkout-row-label{ font-size: 12px; }#page-checkout .checkout-row.sub .checkout-row-value{ font-size: var(--fs-body-small); }#page-checkout .checkout-row.total .checkout-row-label{ font-size: 16px; }#page-checkout .checkout-row.total .checkout-row-value{ font-size: 16px; font-weight: var(--fw-extrabold); }#page-checkout .checkout-rate{ font-size: 10px; padding: 4px 8px; }#page-checkout .checkout-coupon-btn{ font-size: 14px; }#page-checkout .checkout-coupon-count{ font-size: 12px; }#page-checkout .checkout-phone-input{ font-size: var(--fs-body); }#page-checkout .checkout-terms{ font-size: 12px; } /* 여백 — 콘텐츠 영역/푸터 위아래 32, 썸네일은 화면 높이에 맞춰 축소 */#page-checkout .page-body{ padding: 24px 20px; }#page-checkout .checkout-footer{ padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 6px -6px rgba(17,17,17,.16); } /* 가이드 16-2 */#page-checkout .checkout-thumb-wrap{ margin: 0 0 24px; }#page-checkout /* 썸네일이 본문의 41%(265px)를 먹어 결제 화면이 812px 폰에서 넘쳤다 → 절반으로 줄여 «먼저 읽은 사람들» 자리를 냈다 (2026-09-03 사장님 C안) */.checkout-thumb{ width: 32%; height: auto; aspect-ratio: 4 / 5; }/* 먼저 읽은 사람들 — 후기가 있을 때만 보인다 */.checkout-revs{ margin-top: 24px; }.checkout-revs[hidden]{ display:none !important; }/* 제목은 왼쪽, «○○명이 결제했어요»는 오른쪽 끝 (2026-09-03 사장님 지시) */.checkout-revs-h{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 16px; font-size:16px; font-weight:700; color:var(--color-text-primary); }.checkout-revs-h em{ font-style:normal; font-size:12px; font-weight:600; color:var(--dg-text-faint); }/* 카드는 홈·«이용 후기»와 같은 것을 쓴다(.mp-rv-card) — 여기서는 목록 모양만 정한다 (2026-09-03 사장님 «이걸로 하자») */.checkout-revs-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }.checkout-revs-list .mp-rv-card{ list-style:none; } /* 세 개가 계속 위로 흐른다 (2026-09-04 사장님 «리뷰 3개가 계속 슬라이드로 올라가면서 보이게»). ⚠️ 카드마다 글 길이가 달라 높이가 제각각이다 → 높이는 JS 가 재서 --rv-view/--rv-loop 에 넣는다. CSS 에 숫자를 박아 두면 글이 길어질 때 카드가 반쯤 잘려 보인다. ⚠️ 목록을 «두 벌» 그려 두고 한 벌 높이만큼 올린다 — 끝나는 순간 처음으로 돌아가 이음매가 안 보인다. */ .checkout-revs-view{ height:var(--rv-view, 220px); overflow:hidden; position:relative; } .checkout-revs-view .checkout-revs-list{ animation:ckRvUp var(--rv-dur, 18s) linear infinite; will-change:transform; } .checkout-revs-view:hover .checkout-revs-list{ animation-play-state:paused; } /* 읽으려고 멈출 수 있게 */ @keyframes ckRvUp{ from{ transform:translateY(0); } to{ transform:translateY(calc(-1 * var(--rv-loop, 0px))); } } /* 세 개 이하라 흐를 것이 없으면 멈춘다 (JS 가 붙인다) */ .checkout-revs-view.still .checkout-revs-list{ animation:none; } /* 위·아래 끝을 살짝 흐리게 — 잘린 카드가 «깨진 것»처럼 보이지 않게 */ .checkout-revs-view::before, .checkout-revs-view::after{ content:''; position:absolute; left:0; right:0; height:14px; pointer-events:none; z-index:1; } .checkout-revs-view::before{ top:0; background:linear-gradient(var(--color-bg), rgba(15,15,15,0)); } .checkout-revs-view::after{ bottom:0; background:linear-gradient(rgba(15,15,15,0), var(--color-bg)); } @media (prefers-reduced-motion: reduce){ .checkout-revs-view .checkout-revs-list{ animation:none; } } /* 결제 금액 카드 — 좌우 16 / 위아래 24, 내부 4개 요소는 gap 16으로 간격 */#page-checkout .checkout-card{ padding: 16px; }#page-checkout .checkout-rows{ display: flex; flex-direction: column; gap: 16px; }#page-checkout .checkout-rows .checkout-row + .checkout-row{ margin-top: 0; }#page-checkout .checkout-divider{ margin: 0; } /* 쿠폰 버튼 — 상단 마진 24, 위아래 패딩 12 / 좌우 패딩 없음 */#page-checkout .checkout-coupon-btn{ margin-top: 16px; height: 48px; padding: 0; border-radius: var(--dg-radius-md); border: 1px solid var(--dg-divider); color: var(--dg-text-body); font-weight: var(--fw-semibold); } /* 할인 안내 말풍선 — 결제 버튼 위에 떠서 위아래로 살짝 움직임 */#page-checkout .checkout-pay-wrap{ position: relative; }#page-checkout .checkout-saved-bubble{ position: absolute; left: 50%; bottom: calc(100% + 12px); display: block; width: max-content; margin: 0; font-size: 12px; font-weight: var(--fw-semibold, 600); padding: 8px 12px; animation: ckSavedBob 1.8s ease-in-out infinite; } @keyframes ckSavedBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } } /* 전화번호 입력 모달 */#page-checkout .checkout-phone-sheet{ max-width: 340px; }#page-checkout .checkout-phone-sheet .checkout-phone-input{ width: 100%; margin: 6px 0 4px; text-align: center; } /* ========================================================================== 로그인/회원가입/찾기 리스킨 — 디자인/타이포 가이드 (2026-07-10) (소셜 버튼 카카오/네이버/구글은 브랜드색 유지) ========================================================================== */ /* 주 버튼 검정 → 오렌지. 크기·굵기·그림자는 가이드 16-3 «전폭 큰 버튼» */.btn-dark, .btn-primary{ height:56px; background: var(--dg-accent); border-radius:var(--dg-radius-md); box-shadow: none; font-size: var(--fs-body); font-weight: var(--fw-semibold); }.btn-dark:hover, .btn-primary:hover{ background: var(--dg-accent); opacity: .95; }.btn-dark:active, .btn-primary:active{ transform: translateY(1px); } /* 보조 아웃라인 */.btn-outline{ border-color: var(--dg-divider); color: var(--dg-text-primary); border-radius: var(--dg-radius-sm); font-size: var(--fs-body); font-weight: var(--fw-semibold); }.btn-outline:hover{ background: var(--dg-fill); } /* 보조 버튼 — 가이드 §8 */.storage-del-btn{ padding:0; border:0; background:none; font-family:var(--font-sans); font-size:12px; line-height:1.5; color:var(--dg-text-faint); cursor:pointer; } /* 인증(코드받기) 버튼 */.btn-verify{ flex: 0 0 auto; padding: 0 16px; height: 52px; border: 1px solid var(--dg-divider); background: var(--dg-surface); color: var(--dg-text-body); border-radius: var(--dg-radius-md); font-size: var(--fs-body-small); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; }.btn-verify:active{ background: var(--dg-accent-soft); } /* 체크박스·입력 포커스 → 오렌지 */.check-label input[type="checkbox"]{ accent-color: var(--dg-accent); }.login-email-field input{ border-color: var(--dg-divider); font-size: var(--fs-body); }.login-email-field input:focus{ border-color: var(--dg-accent); } /* 링크 hover */.login-links a:hover, .login-alt-link:hover, .login-links .divider ~ a:hover{ color: var(--dg-accent); } /* 안내/약관 카드 배경 중립 */.login-guide, .terms-group, .login-email-body .terms-group{ background: var(--dg-surface-soft); border: 0; border-radius: var(--dg-radius-md); } /* 면만 — 테두리는 입력창·선택지에만 (가이드 §4) */ /* 타이포 토큰 */.login-hero-title, .login-email-title{ font-size: var(--fs-h2); font-weight: var(--fw-bold); }.find-desc{ font-size: var(--fs-body-small); }.login-email-field label{ font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--dg-text-body); }.login-email-field .field-hint{ font-size: var(--fs-micro); }.login-guide-title{ font-size: var(--fs-label); font-weight: var(--fw-semibold); }.login-guide-body{ font-size: var(--fs-caption); }.login-links{ font-size: 14px; }.login-terms-note{ font-size: 12px; }.check-label{ font-size: var(--fs-body-small); }.find-result-label{ font-size: var(--fs-body-small); }.find-result-value{ font-size: var(--fs-card-title); }.find-result-meta{ font-size: var(--fs-micro); } /* ========================================================================== 남은 화면 리스킨 — 마이/보관함/쿠폰/회원정보/약관/유료리포트/로딩 (2026-07-10) ========================================================================== */ /* 오프브랜드 색 → 오렌지/중립 */.profile-avatar{ background: var(--dg-accent); }.coupon-left{ background: var(--dg-accent); }.coupon-divider{ background: var(--dg-divider); }.app-modal-btn.primary{ background: var(--dg-accent); }.ql-spinner i{ background: var(--dg-accent); }.storage-expiry{ font-size: var(--fs-micro); }.coupon-name{ font-size: var(--fs-body); }.coupon-discount{ font-size: var(--fs-h3); }.coupon-type, .coupon-expiry{ font-size: var(--fs-micro); }.profile-name{ font-size: var(--fs-body); } /* 줄 목록과 같은 16px — 18px 은 글자 여섯 단에 없다 (2026-08-04) */.profile-email{ font-size: var(--fs-micro); }.profile-avatar{ font-size: var(--fs-h3); }.legal-body .legal-meta{ font-size: var(--fs-micro); } /* --fs-caption(13px) 은 여섯 단 밖이라 12px 로 (2026-08-04) */.terms-sub{ font-size: var(--fs-body-small); }.ql-title{ font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height:1.3; } /* --fs-h2(24px) 는 여섯 단 밖이라 20px 로 (2026-08-05) */.ql-sub{ font-size: var(--fs-body-small); line-height:1.3; } /* 두 줄짜리 문장이라 줄높이를 안 적으면 위아래가 붙는다 */ /* 유형별 테스트 목록(카테고리 그룹) */ /* ⚠️ 여기 있던 «전체 테스트 전용 페이지»(#page-tests) 규칙은 2026-09-09에 걷어냈다 — 그 화면을 홈에 합쳤다. */ /* 전체 테스트 페이지 — 메인급 상단 헤더 */ /* 그림자는 홈 화면 헤더(#page-main #main-header)와 «똑같이» — 맨 위에선 없다가 스크롤한 만큼 짙어지고, 번짐(6px)만큼 사방을 안으로 당겨(-6px) 아래로만 나온다. --sc(0~1)는 app/6-main.js 가 넣어 준다. (2026-08-04 사장님 지시. 전엔 0 2px 12px 이라 옆으로도 그림자가 샜다) */.mp-topheader{ position: sticky; top: 0; z-index: 100; height: calc(var(--header-height) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: var(--color-bg); border-bottom: 0; box-shadow: 0 6px 6px -6px rgba(17,17,17, calc(var(--sc, 0) * 0.16)); } /* ── 내 사주 화면 위쪽 (2026-09-09 «내 결과»에서 이름과 속이 바뀌었다) ─────── 화면 id 는 page-storage 그대로다 — 까닭은 index.html 의 그 화면 주석에 적었다. 🚫 여기 있던 «내 사주» 제목(.saju-top / .saju-title)은 2026-09-09에 없앴다. 같은 말을 세 번 하고 있었다 — ① 하단바에 「내 사주」가 켜져 있고 ② 제목이 「내 사주」이고 ③ 바로 아래 탭이 「내 만세력 | 보관함」이라 뭘 보는지 이미 말한다. 홈도 제목 없이 헤더 → 갈래 바로 간다. 이 사이트의 규칙은 «탭 화면엔 제목이 있다»가 아니라 «탭 바가 있으면 제목이 없다» 다. 내 사주에 탭 바가 생기면서 홈 쪽 식구가 됐다. 제목이 있는 화면(오늘의 운세·내 정보)의 규칙은 [[탭 화면 여백 규칙]] 그대로 살아 있다. */ /* 인생 흐름 띠 (채워졌을 때) — 지금 서 있는 칸만 진한 색 + 위에 흰 점 */ .flow-bar{ display: flex; gap: 3px; margin-top: 12px; } .flow-bar > div{ flex: 1; height: 44px; border-radius: 5px; position: relative; display: flex; align-items: center; justify-content: center; } .flow-bar b{ font-size: 12px; font-weight: var(--fw-semibold); color: rgba(255,255,255,.82); } .flow-bar .nowdot{ position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #fff; } .flow-ticks{ display: flex; gap: 3px; margin-top: 6px; } .flow-ticks div{ flex: 1; text-align: center; font-size: 9.5px; color: var(--dg-text-faint); } .flow-ticks div.on{ color: var(--dg-accent); font-weight: var(--fw-bold); } /* 만세력이 채워졌을 때 쓰는 것들 */ /* 카드 밑 설명글. 2026-09-10 사장님 지시로 «더 잘 보이게» — 글자 11.5→12.5, 색 faint(#6E6E6E)→secondary(#A1A1A1), 줄높이 1.75. 사주를 모르는 사람이 읽는 글이라 여기서 더 흐리게 하면 «안 읽어도 되는 말»로 보인다. */ .saju-foot{ margin-top: 12px; font-size: 12.5px; line-height: 1.75; color: var(--dg-text-secondary); text-align: center; } .saju-cta button.ghost{ background: none; border: 1px solid var(--dg-line-2); color: var(--dg-text-body); height: 44px; font-size: 13.5px; } /* ── 생년월일 시트 — 숫자로 «치는» 칸 (2026-09-10 사장님 D안 확정) ────────── 칸 테두리 없이 한 줄에 크게 치고, 오른쪽에 알약을 둔다. 고른 것 표시는 «주황 테두리 + 주황 글씨» 하나로 통일했다 — 채운 주황은 「저장하고 내 사주 보기」 하나만 쓴다(그래야 «해야 할 일»이 하나로 보인다). */ .fld{ margin-top: 18px; } .fld:first-of-type{ margin-top: 0; } .fld > label{ display: block; font-size: 14px; font-weight: var(--fw-semibold); margin-bottom: 6px; } .d-row{ display: flex; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--dg-divider); } /* ⚠️ display:flex 가 브라우저 기본 [hidden] 을 덮는다 — 이 줄이 없으면 «숨김»인데도 보인다. (2026-09-10에 실제로 그렇게 나가서 양력인데도 윤달 줄이 떴다) */ .d-row[hidden]{ display: none !important; } .d-row input{ flex: 1; min-width: 0; border: 0; background: none; color: var(--dg-text-primary); font-family: inherit; font-size: 24px; font-weight: var(--fw-bold); outline: none; padding: 0; } .d-row input::placeholder{ color: #3E3E3E; font-weight: var(--fw-semibold); } .d-row input:disabled{ opacity: .35; } .d-pills{ display: flex; gap: 6px; flex: none; } .d-pill{ height: 34px; padding: 0 15px; border-radius: var(--dg-radius-full); border: 1.5px solid transparent; background: #2B2B2B; color: #9A9A9A; font-family: inherit; font-size: 13.5px; font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap; } .d-pill.on{ background: none; border-color: var(--dg-accent); color: var(--dg-accent); } /* 윤달 줄 — 체크 하나만 왼쪽에. 밑줄은 안 긋는다: 위 날짜 줄에 «딸린 것»이지 따로 묻는 항목이 아니다 */ .d-row.d-sub{ padding: 12px 2px 2px; border-bottom: 0; } .d-chk{ display: flex; align-items: center; gap: 8px; flex: none; cursor: pointer; user-select: none; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--dg-text-body); } .d-chk input{ position: absolute; opacity: 0; width: 0; height: 0; } .d-chk i{ width: 22px; height: 22px; flex: none; border-radius: 7px; border: 1.5px solid var(--dg-line-2); display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--transition-fast), border-color var(--transition-fast); } .d-chk i svg{ width: 14px; height: 14px; opacity: 0; transition: opacity var(--transition-fast); } .d-chk input:checked + i{ background: var(--dg-accent); border-color: var(--dg-accent); } .d-chk input:checked + i svg{ opacity: 1; } .d-chk input:checked ~ span{ color: var(--dg-accent); } /* 성별 단추도 같은 «주황 테두리» 규칙 */ .sheet .si-g{ border-width: 1.5px; } /* ── 생년월일시 넣는 화면 (2026-09-09) ──────────────────────────────── */ .si-lede{ font-size: 14px; line-height: 1.7; color: var(--dg-text-secondary); margin: 4px 0 22px; } .si-check{ display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; font-weight: var(--fw-medium); color: var(--dg-text-body); cursor: pointer; } .si-check input{ width: 18px; height: 18px; accent-color: var(--dg-accent); flex: 0 0 auto; } .si-gender{ display: flex; gap: 9px; } .si-g{ flex: 1; height: 52px; border-radius: var(--dg-radius-md); border: 1px solid var(--color-border); background: var(--dg-surface); color: var(--dg-text-secondary); font-size: 15px; font-weight: var(--fw-semibold); font-family: inherit; letter-spacing: inherit; cursor: pointer; transition: border var(--transition-fast), color var(--transition-fast); } .si-g.on{ border-color: var(--dg-accent); color: var(--dg-accent); } #page-saju-input .btn-primary{ margin-top: 8px; } /* ── 오늘의 운세 — «?? 점» + 오각형 (2026-09-09 사장님 확정) ────────────── 핵심은 «색이 딱 끊기지 않고 검정으로 이어지는» 것이다. 두 겹을 포갠다 — ① linear-gradient(160deg, 오늘색1, 오늘색2) ← 대각선 «오늘 색» ② linear-gradient(180deg, 투명 → 검정) ← 아래로 내려가며 덮는 막 ②의 «30%»가 색이 사라지기 시작하는 지점이다. 이 숫자만 바꾸면 길이가 달라진다 (짧게 46% · 보통 30% · 길게 22% — 사장님이 «보통»을 고르셨다). 색 두 개는 app/7-saju.js 가 그날 오행에서 뽑아 --d1 --d2 로 넣어 준다. */ .today-skel{ --d1:#202020; --d2:#171717; } /* 못 불러왔을 때 쓰는 밋밋한 회색 */ /* 화면 폭을 꽉 쓴다 — page-body 의 좌우 여백(20px)을 밀어낸다. 위쪽은 «헤더 높이만큼» 더 끌어올려, 색판이 로고·햄버거 뒤까지 올라가게 한다 (2026-09-10 사장님 지시 — 검정 헤더에서 색이 딱 끊겨 상자처럼 보였다). 끌어올린 만큼 .tday-tint 에 padding-top 으로 되돌려 놓으므로 글자 위치는 그대로다. */ #page-today .today-skel{ --tday-top:calc(var(--header-height) + env(safe-area-inset-top)); margin:calc(-24px - var(--tday-top)) -20px 0; /* ⚠️ 화면이 길어 내용이 다 들어가는 폰에서는 아래 띠가 «화면 한가운데»에 떠 있었다 (2026-09-10 사장님 지적). sticky 는 «아래로 밀려난 것을 끌어올리는» 일만 해서, 내용이 짧으면 아무 일도 하지 않는다. 그래서 여기서 키를 화면만큼 잡고, 남는 자리를 아래 .tday-panel 이 먹게 해 띠를 맨 아래로 민다. */ display:flex; flex-direction:column; min-height:100dvh; } #page-today .tday-panel{ flex:1 0 auto; } /* 헤더는 색판 위에 투명하게 얹는다 — 배경도 그림자도 없앤다. ⚠️ 다만 «맨 위일 때만» 투명해야 한다. 스크롤을 내리면 제목·점수가 로고·햄버거와 겹쳐서 둘 다 안 읽힌다 (2026-09-10 사장님 지적). 그래서 뒤에 어둠을 깐다 — 위는 진하고 아래로 갈수록 사라져서, 헤더가 «상자»로 보이지 않고 색판에 녹아 있다. --sc 는 app/6-main.js 가 스크롤 양(0~1 · 60px 만에 1)으로 넣어 준다. 맨 위(--sc:0)에서는 통째로 투명해 색판이 그대로 이어진다. ※ rgba(15,15,15)은 --color-bg(#0F0F0F)를 rgb 로 적은 것. 투명도를 섞어야 해서 풀어 썼다. */ #page-today .mp-topheader{ background:transparent; box-shadow:none; } #page-today .mp-topheader::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--sc, 0); background:linear-gradient(to bottom, rgba(15,15,15,.92) 0%, rgba(15,15,15,.76) 58%, rgba(15,15,15,0) 100%); } /* 끌어올린 만큼 안쪽 여백으로 되돌린다 → 글자 위치는 전과 똑같다 */ #page-today .tday-tint{ padding-top:var(--tday-top); } .tday-tint{ position:relative; } .tday-tint > *{ position:relative; z-index:1; } .tday-tint::before{ content:''; position:absolute; inset:0; z-index:0; background: linear-gradient(180deg, rgba(15,15,15,0) 30%, rgba(15,15,15,.72) 68%, var(--color-bg) 92%), linear-gradient(160deg, var(--d1), var(--d2)); /* ②(검정으로 덮는 막)는 «헤더 아래»부터만 깔린다 — 아래쪽에 붙여 그만큼 높이를 줄인다. 이렇게 해야 색이 헤더 뒤까지 올라가면서도 «빠지기 시작하는 자리»는 전과 같다. 이 줄을 빼면 색이 헤더 높이만큼 길어져 오각형 밑에 가로 경계선이 생긴다. */ background-repeat:no-repeat; background-size:100% calc(100% - var(--tday-top, 0px)), 100% 100%; background-position:bottom, top; } /* 위쪽 «빛 걸린» 느낌 — 판이 평평해 보이지 않게 */ .tday-tint::after{ content:''; position:absolute; left:0; right:0; top:0; height:210px; z-index:0; background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.11), transparent 64%); } /* 여백은 모두 «4px 배수»다 — 디자인 가이드 §5.1. 26·22 처럼 어중간한 값을 쓰지 않는다 (2026-09-10 사장님이 «가이드랑 맞는지 확인해줘» 하셔서 이 화면을 통째로 맞췄다) */ .tday-hd{ text-align:center; padding:24px 20px 20px; } .tday-date{ margin:0; font-size:11.5px; font-weight:var(--fw-semibold); letter-spacing:.16em; color:rgba(255,255,255,.6); } /* 붓글씨 — 제목에만 쓴다. 본문에 쓰면 읽기 나쁘다 */ .tday-title{ margin:8px 0 0; font-family:'Nanum Brush Script',cursive; font-size:31px; font-weight:400; line-height:1.25; color:#fff; } .tday-score{ margin-top:16px; display:flex; align-items:baseline; justify-content:center; gap:5px; } .tday-score b{ font-size:62px; font-weight:var(--fw-extrabold); line-height:1; letter-spacing:-.04em; color:rgba(255,255,255,.45); } .tday-score b.on{ color:#FFD9A0; } /* 진짜 점수가 들어오면 */ .tday-score span{ font-size:22px; font-weight:var(--fw-bold); color:rgba(255,255,255,.72); } /* 오늘의 일진 알약 */ /* 두 글자는 «밑선»으로 맞춘다 — 가운데맞춤이면 한자(명조 16px)와 한글(11px)이 각자 따로 가운데에 놓여 밑선이 1.5px 어긋나고, 한 줄로 안 읽힌다 (2026-09-10 사장님 지적) */ .tday-ilj{ margin-top:16px; display:inline-flex; align-items:baseline; gap:8px; padding:5px 13px 7px; border-radius:var(--dg-radius-full); background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.16); } .tday-ilj b{ font-family:'Nanum Myeongjo',serif; font-size:16px; font-weight:800; letter-spacing:.06em; } .tday-ilj span{ font-size:10.5px; color:rgba(255,255,255,.62); } /* 알약 안에서 글자가 «아래로 내려간» 것처럼 보이던 것을 고친다 (2026-09-10 사장님 안). 원인: 「丙戌」이 차지하는 줄칸 16px 이 «글자보다 크다». 글꼴이 밑에 내려긋는 획 자리를 비워 두는데 명조 한자는 그 자리를 안 쓴다. 그래서 여백을 6/6 으로 똑같이 줘도 실제 글자는 윗 8.16 / 아랫 10 으로 앉는다 — 1.8px 내려간다. ① 줄칸을 «실제 글자 높이»(윗선~밑선)로 깎는다 → 한자가 알약 정가운데에 온다. ② 거기서 두 글자를 통째로 2px 더 올린다 (2026-09-10 사장님이 시안에서 F안 확정). 왜 더 올리나: 옆의 「화·토의 날」이 한자와 밑선을 맞췄는데 글자가 절반 크기라, 바닥은 같아도 «덩어리 가운데»는 2.1px 더 아래에 온다. 그 한글이 알약의 넓은 쪽이라 알약 전체가 처져 보인다. 밑선과 가운데를 동시에 맞출 수는 없어서 눈에 맞춘 것이다. → 한자 위 5.4 / 아래 9.5, 한글은 알약 한가운데. 알약 크기(98×30)는 그대로. 후보 일곱을 늘어놓은 시안: design-drafts «일진 알약 — 글자 세로 위치» ⚠️ 여백 6/10 은 «깎았을 때만» 맞다. 위 .tday-ilj 의 5/7 과 짝이 아니니 한쪽만 고치지 말 것 (위 5/7 은 이 기능이 없는 옛 폰에서 같은 모양이 나오게 맞춰 둔 값이다). ⚠️ 자로 잴 때는 캔버스로 재지 말 것 — 글꼴이 달라 엉뚱한 값이 나온다. */ @supports (text-box-trim: trim-both){ .tday-ilj{ padding:6px 13px 10px; } .tday-ilj > b, .tday-ilj > span{ text-box: trim-both cap alphabetic; } } .tday-sub{ margin:12px 0 0; font-size:12px; color:rgba(255,255,255,.6); } /* 오각형 — 색 위에 얹히므로 선을 회색이 아니라 «흰빛»으로 둔다. 회색이면 탁해 보인다 */ /* 아래 12 는 «오각형 글자(건강·재물) 밑 → 탭»이 눈으로 16px 쯤 되게 맞춘 값이다. svg 안에 글자 밑 여백이 5px 쯤 이미 들어 있어, 12 를 주면 합쳐서 17 이 된다. */ .tday-pent{ padding:8px 0 12px; display:flex; justify-content:center; } .tday-pent svg{ width:238px; height:224px; } /* ── 아래 «한 줄 띠» 단추 (2026-09-10 사장님 ⑤안 확정) ──────────────────────── 전에는 폭이 꽉 찬 48px 주황 단추였다 — 결제 단추와 같은 무게라 «공짜로 보는 화면»에 얹히기엔 컸다(사장님 «버튼이 너무 큰 것 같다»). 띠는 «왜 눌러야 하는지»를 한 줄로 말해 주면서 자리를 가장 적게 먹는다. ⚠️ 띠는 화면 아래에 «붙여 둔다»(sticky) — 2026-09-10 사장님 지적. 안 붙이면 화면이 작은 폰에서 띠가 접힌 곳 아래로 내려가, 손님이 스크롤하지 않으면 «누를 것이 있다»는 걸 아예 모른다(떠 있는 하단바가 그 자리를 덮기까지 한다). 바닥 여백(--fnav-space)만큼 아래를 비워 두므로 하단바 «위»에 앉는다. 맨 아래까지 내리면 제자리로 돌아가 내용 끝에 놓인다. ⚠️ 위쪽은 «흐려지며 사라지게» 덮는다. 안 그러면 글이 띠 밑으로 그대로 비쳐 지저분하다. ⚠️ 단추 규칙은 «#page-today» 를 붙여 둔다. 아래 .saju-cta button(폭 100% · 48px)이 파일 뒤쪽에 있어, 안 붙이면 그쪽이 이겨서 띠가 통째로 뭉개진다. */ #page-today .saju-cta{ margin:16px 0 0; padding:0 16px var(--fnav-space); } /* 띠가 있을 때만 붙인다 — 점수가 다 나온 손님에게는 «안내 한 줄»뿐이라 붙일 이유가 없다. :has() 를 모르는 옛 폰에서는 그냥 안 붙는다(내용 끝에 놓인다) — 깨지지 않는다. */ #page-today .saju-cta:has(.tday-strip){ position:sticky; bottom:0; z-index:80; padding-top:26px; background:linear-gradient(to bottom, rgba(15,15,15,0) 0%, var(--color-bg) 34%); } #page-today .tday-strip{ display:flex; align-items:center; gap:12px; padding:8px 8px 8px 16px; border-radius:16px; background:var(--dg-surface); border:1px solid var(--dg-divider); } #page-today .tday-strip p{ flex:1; margin:0; font-size:12.5px; line-height:1.5; color:var(--dg-text-body); word-break:keep-all; } #page-today .tday-strip button{ display:inline-flex; align-items:center; flex:0 0 auto; width:auto; height:32px; padding:0 15px; border-radius:var(--dg-radius-full); background:var(--dg-accent); color:#fff; font-size:13px; font-weight:var(--fw-bold); border:0; font-family:var(--font-sans); cursor:pointer; white-space:nowrap; } /* ── 분야 탭 — 「총평·연애·직장·재물·건강·사람」 (2026-09-10 사장님 A안 확정) ──────── 모양은 사이트가 이미 쓰는 «밑줄 탭»과 같은 규칙이다(내 사주의 「내 만세력 | 보관함」, 홈의 갈래 바). 손님이 새로 배울 게 없다. 여섯 칸이 폰 너비(390)에 딱 나눠 들어간다 — 한 칸 65px. 옆으로 밀 일이 없다. ⚠️ 칸 수를 늘리면 글자가 겹친다. 일곱 칸이 되면 가로로 미는 방식으로 바꿔야 한다. */ .tday-tabs{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:stretch; height:44px; padding:0 16px; border-bottom:1px solid var(--dg-divider); } .tday-tabs button{ position:relative; padding:0; background:none; border:0; cursor:pointer; font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-regular); color:var(--dg-text-secondary); } .tday-tabs button.on{ color:var(--dg-text-primary); font-weight:600; } .tday-tabs button.on::after{ content:''; position:absolute; left:6px; right:6px; bottom:0; height:2px; background:var(--dg-text-primary); } /* 탭을 눌러 바뀌는 칸 */ .tday-panel{ padding:16px 20px 0; } .tday-panel h4{ margin:0 0 9px; font-size:15px; font-weight:var(--fw-bold); color:var(--dg-text-primary); } .tday-panel p{ margin:0; font-size:13.5px; line-height:1.85; color:var(--dg-text-body); } .tday-panel p + p{ margin-top:11px; } .tday-panel .soon{ color:var(--dg-text-secondary); } /* 분야 칸 머리 — 그 칸 점수 */ .tday-fld{ display:flex; align-items:flex-end; gap:8px; margin-bottom:12px; } .tday-fld b{ font-size:38px; font-weight:var(--fw-extrabold); line-height:.95; letter-spacing:-.03em; color:#FFD9A0; } .tday-fld b.off{ color:rgba(255,255,255,.28); } /* 점수 없을 때 «??» */ .tday-fld i{ font-style:normal; font-size:15px; font-weight:var(--fw-bold); color:rgba(255,255,255,.7); margin-bottom:3px; } .tday-fld u{ text-decoration:none; margin-left:auto; margin-bottom:5px; font-size:11.5px; color:var(--dg-text-secondary); } .tday-bar{ height:6px; border-radius:4px; background:#242424; overflow:hidden; margin-bottom:15px; } .tday-bar i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#FF7A3D,#FFD9A0); } /* 숫자에서 바로 나오는 것 — 원고가 없어도 오늘 보여줄 수 있다 */ .tday-hilo{ display:flex; gap:8px; margin-bottom:13px; } .tday-hilo div{ flex:1; padding:12px; border-radius:var(--dg-radius-md); background:var(--dg-surface); border:1px solid var(--dg-divider); } .tday-hilo em{ font-style:normal; display:block; font-size:10.5px; color:var(--dg-text-secondary); margin-bottom:4px; } .tday-hilo b{ font-size:14px; font-weight:var(--fw-bold); color:var(--dg-text-primary); } .tday-hilo b span{ font-weight:var(--fw-regular); color:var(--dg-text-secondary); margin-left:4px; } /* ── 칸 안 짜임 — «결 → 왜 → 이번 주» (2026-09-10 사장님 확정) ──────────────── 다른 사이트가 쓰는 «포인트/주의점/추천» 세 칸 감상 대신, 우리는 «왜 이 점수인지»를 계산에서 그대로 보여 준다. 시안: design-drafts «칸 안을 어떻게 짤까». */ /* ① 오늘의 결 — 한 줄 */ .tday-gyul{ margin:0 0 14px; font-size:19px; font-weight:var(--fw-bold); line-height:1.4; letter-spacing:-.02em; color:var(--dg-text-primary); } .tday-gyul.sm{ font-size:17px; margin-bottom:12px; } .tday-hanja{ font-family:'Nanum Myeongjo',serif; font-weight:800; letter-spacing:.04em; color:#FFD9A0; } /* ② 오늘 풀이 글 — 칸의 «맨 아래»에 온다 (2026-09-10 사장님 B안 확정) ⚠️ 여기 있던 «왜 이 점수인가»(.tday-why/.tday-wline/.tday-wsign — 까닭을 ＋/－ 목록으로 늘어놓던 칸)는 사장님 «다 빼자»로 없앴다. 같은 까닭이 이제 글 안에 문장으로 들어 있다. 글을 짓는 곳은 app/7-saju.js 의 총평풀이()·분야풀이(). */ .tday-read p{ margin:0; font-size:13.5px; line-height:1.85; color:var(--dg-text-body); } .tday-read p + p{ margin-top:11px; } .tday-read b{ color:var(--dg-text-primary); font-weight:var(--fw-bold); } /* ③ 이번 주에서 오늘 — 일곱 날 막대. 원고가 한 줄도 안 든다 */ .tday-week{ margin-bottom:14px; padding:13px 15px 11px; border-radius:var(--dg-radius-md); background:var(--dg-surface); border:1px solid var(--dg-divider); } .tday-week > em{ font-style:normal; display:block; font-size:10.5px; color:var(--dg-text-secondary); margin-bottom:10px; } .tday-wrow{ display:flex; align-items:flex-end; gap:6px; height:52px; } .tday-wrow > div{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; } .tday-wrow i{ display:block; width:100%; border-radius:4px; background:#333; } .tday-wrow > div.on i{ background:linear-gradient(180deg,#FF7A3D,#FFD9A0); } .tday-wlab{ display:flex; gap:6px; margin-top:7px; } .tday-wlab > div{ flex:1; text-align:center; font-size:10px; color:var(--dg-text-secondary); } .tday-wlab > div.on{ color:var(--dg-text-primary); font-weight:var(--fw-bold); } /* «오늘 도움 되는 것» — 오행에서 바로 나온다. 다른 사이트의 «행운템»(잡화)과 성격이 다르다 */ .tday-help{ margin-bottom:14px; padding:13px 15px; border-radius:var(--dg-radius-md); background:var(--dg-surface); border:1px solid var(--dg-divider); } .tday-help > em{ font-style:normal; display:block; font-size:10.5px; color:var(--dg-text-secondary); margin-bottom:10px; } .tday-help-row{ display:flex; gap:8px; } .tday-help-row > div{ flex:1; padding:10px 8px; border-radius:var(--dg-radius-sm); background:var(--dg-fill); text-align:center; } .tday-help-row em{ font-style:normal; display:block; font-size:10px; color:var(--dg-text-secondary); margin-bottom:4px; } .tday-help-row b{ font-size:13px; font-weight:var(--fw-bold); color:var(--dg-text-primary); } /* ⚠️ 여기 있던 «내 사주에 가장 모자란 것이 ○이에요» 한 줄은 2026-09-10 사장님 지시로 뺐다. 색·때·쪽 세 칸만 남는다. */ /* ── 잠긴 칸 — 흐림 + 자물쇠 (2026-09-10 사장님 확정) ──────────────────────── 점수가 없는 손님에게 보이는 모습이다. «여기 뭔가 있는데 잠겨 있다»만 말한다. ⚠️ 흐림 뒤에 깔린 것은 «글»이 아니라 회색 줄(.tday-skel)이다. 흐림은 개발자도구로 걷어낼 수 있어서, 지어낸 운세를 깔아 두면 그게 읽힌다. 회색 줄이면 읽힐 것이 없다. 풀이 원고가 들어오면 이 줄 자리에 진짜 글을 갈아 끼우면 된다 — 겉모습은 안 바뀐다. ⚠️ 흐림 3px 은 사장님이 시안에서 «약하게 3»으로 고르신 값이다(3·4·6·8 중에서). ⚠️ 줄은 좌우를 «꽉» 채운다. 길이가 들쭉날쭉하면 글이 아니라 목록으로 보인다. */ /* ⚠️ 붙어 있는 띠(.saju-cta)가 자물쇠 아랫부분을 덮는 폰이 있다. 고치지 말 것 — 2026-09-10 사장님이 «폰마다 다르니까 어쩔 수 없다, 괜찮다»고 정하셨다. («탭 아래로 남는 자리»가 폰에 따라 90px 안팎뿐이라, 오각형을 줄이지 않는 한 자물쇠(104px)와 띠를 함께 올릴 수 없다. 재 보고 확인한 값이다.) */ .tday-lock{ position:relative; } .tday-lock-back{ filter:blur(3px); opacity:.42; user-select:none; pointer-events:none; } .tday-skel{ display:flex; flex-direction:column; gap:12px; padding:3px 0; } .tday-skel i{ display:block; height:13px; border-radius:5px; background:#2E2E2E; } .tday-skel i.t{ height:16px; width:46%; background:#3A3A3A; margin-bottom:2px; } /* 소제목 자리 */ .tday-skel i.gap{ height:6px; background:none; } /* 문단 사이 */ .tday-lock-over{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:0 20px; } .tday-lock-ico{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.17); } .tday-lock-ico svg{ width:18px; height:18px; stroke:rgba(255,255,255,.78); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .tday-lock-msg{ font-size:14px; font-weight:var(--fw-bold); color:var(--dg-text-primary); } .tday-lock-sub{ font-size:11.5px; color:var(--dg-text-secondary); } /* ── 회색 «미끼» 판 (2026-09-09 A안 확정) ──────────────────────────────── 틀만 그리고 알맹이는 비운다. 채워졌을 때와 «자리가 똑같아야» 한다 — 그래야 «내가 넣으면 저기가 채워지는구나»가 전해진다. 🚫 blur 나 자물쇠는 쓰지 않는다 (까닭은 index.html 의 그 자리 주석). */ .saju-skel{ margin-bottom: 26px; } /* 「내 만세력」·「보관함」 두 칸 — 상단 탭으로 갈아 끼운다 (2026-09-09 사장님 C안). 숨김은 hidden 으로만 한다: display 를 직접 건드리면 다시 켤 때 되돌릴 값을 기억해야 한다. */ .sj-pane[hidden]{ display: none !important; } /* 탭이 둘뿐이라 글자 너비만큼만 밑줄이 그어지면 허전하다 — 칸을 꽉 채워 밑줄이 화면 절반을 긋게 한다 (시안 C안 그대로). */ #page-storage .saju-tabs .sjtab{ justify-self: stretch; justify-content: center; } /* 안쪽 여백 16px = 디자인 가이드 «리스트·보관함 카드 16». 2026-09-10까지 14px 15px 이었는데 어느 토큰도 아니고 4px 배수도 아니었다. 카드 사이 12px 도 가이드 그대로. */ .skel-card{ margin-top: 12px; background: var(--dg-surface); border: 1px solid var(--dg-divider); border-radius: var(--dg-radius-md); padding: 16px; } .skel-card:first-child{ margin-top: 0; } .skel-h{ display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: var(--fw-bold); color: var(--dg-text-secondary); } /* 13→14px (2026-09-10) */ .skel-h em{ font-style: normal; font-size: 11px; font-weight: var(--fw-medium); color: var(--dg-text-faint); } /* 만세력 여덟 칸 — 가짜 한자 대신 «?». 한자를 넣으면 «남의 사주»로 보인다 */ .skel-mans{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 11px; } .skel-mans .hd{ font-size: 10px; color: var(--dg-text-faint); text-align: center; font-weight: var(--fw-medium); } /* 칸은 두 가지다 — «채워진 칸»(실선)과 «아직 빈 칸»(점선). 점선은 «여기 뭔가 올 자리»라는 뜻이라, 채워진 뒤에도 점선이면 덜 만든 것처럼 보인다. */ .skel-mans .g{ aspect-ratio: 1; border-radius: var(--dg-radius-sm); background: var(--dg-fill); border: 1px solid #262626; font-size: 21px; font-weight: var(--fw-semibold); display: flex; align-items: center; justify-content: center; } .skel-mans .g.empty{ background: #161616; border-style: dashed; border-color: #2C2C2C; color: #3A3A3A; font-size: 19px; } /* 오행 — 오각형 «판»만 */ .skel-wu{ display: flex; align-items: center; gap: 10px; margin-top: 6px; } .skel-wu svg{ width: 152px; height: 144px; flex: 0 0 auto; } .skel-bars{ flex: 1; display: flex; flex-direction: column; gap: 7px; } .skel-bars div{ display: flex; align-items: center; gap: 7px; } .skel-bars b{ width: 14px; font-size: 11px; font-weight: var(--fw-bold); color: #4A4A4A; } .skel-bars span{ flex: 1; height: 5px; border-radius: 3px; background: #242424; overflow: hidden; } .skel-bars i{ display: block; width: 14%; height: 100%; border-radius: 3px; background: #333; } /* 인생 흐름 띠 */ .skel-flow{ display: flex; gap: 3px; margin-top: 11px; } .skel-flow div{ flex: 1; height: 30px; border-radius: 5px; background: #1E1E1E; } .skel-flow-ticks{ display: flex; gap: 3px; margin-top: 5px; } .skel-flow-ticks div{ flex: 1; text-align: center; font-size: 9px; color: var(--dg-text-faint); } /* ── 내 사주 — 합본 카드 (2026-09-09 사장님 확정) ─────────────────────────── 한 카드 안에 «① 나 → ② 만세력 표 → ③ 네 기둥» 이 얇은 선으로만 끊겨 이어진다. 그리는 사람은 app/7-saju.js 의 renderSajuTop(). 로그인 전·후 모두 «같은 자리»를 쓴다. */ .sj-sep{ margin: 16px -16px; border-top: 1px solid var(--dg-fill); } /* 카드 안쪽 여백만큼 당겨 끝까지 긋는다 */ /* ① 나 — 이 화면에서 가장 먼저 읽혀야 하는 한 줄 */ .sj-me{ display: flex; align-items: center; gap: 12px; } .sj-me-txt{ min-width: 0; } /* 단추는 카드 맨 아래 큰 띠였는데 2026-09-10 사장님 지시로 이 줄 오른쪽 끝으로 옮겼다. 자리가 좁아 «로그인 / 넣기 / 고치기» 로 짧게 줄였다 — 무엇을 넣고 고치는지는 왼쪽 줄이 말한다. */ .sj-me .saju-cta{ margin-top: 0; margin-left: auto; flex: none; } .sj-me .saju-cta button, .sj-me .saju-cta button.ghost{ width: auto; height: 34px; padding: 0 15px; font-size: 12.5px; white-space: nowrap; } /* 생년월일시를 이미 넣은 사람에게만 뜨는 «연필 동그라미». 글씨를 지우고 아이콘만 남겨 옆 글자(당신은 ○○)에 자리를 내준다 (2026-09-10 사장님 지시). */ .sj-me .saju-cta button.icon{ width: 34px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .sj-me .saju-cta button.icon svg{ display: block; width: 17px; height: 17px; } .sj-me-han{ width: 52px; height: 52px; flex: none; border-radius: 13px; background: var(--dg-bg); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: var(--fw-bold); } .sj-me-han.empty{ color: #3A3A3A; border: 1px dashed #2C2C2C; } .sj-me-txt b{ display: block; font-size: 17px; line-height: 1.45; font-weight: var(--fw-bold); color: var(--dg-text-primary); } /* 두 줄로 넘어가는 안내가 붙어 보였다 (2026-09-10) */ .sj-me-txt span{ display: block; margin-top: 4px; font-size: 12px; color: var(--dg-text-secondary); } /* 3 → 7 → 4px. 7px 로 올린 뒤 제목에 줄높이 1.45 를 줬더니(두 줄짜리 안내 때문에) 제목 아래 여유가 한 번 더 붙어 이번엔 벌어져 보였다 (2026-09-10 사장님 지적). */ /* 일간 한 줄. 2026-09-10 사장님 지시로 만세력 표 «밑»으로 내렸다 — 여덟 글자를 먼저 보고, 그다음 «그래서 나는 이런 사람» 을 읽는 차례가 맞다. */ .sj-me-line{ margin-top: 14px; font-size: 13px; line-height: 1.65; color: var(--dg-text-secondary); text-align: center; } .sj-me-line b{ color: var(--dg-text-primary); font-weight: var(--fw-semibold); } /* ② 만세력 표 — 십신·천간·지지·십신·지장간 다섯 줄. ⚠️ 일간(나) 칸만 주황 테두리다. 이거 하나로 «어디를 봐야 하는지»가 정해진다. */ /* ── 만세력 표 ──────────────────────────────────────────── 칸은 팔각(八角), 표 둘레는 계단 회문 테두리. 2026-09-09 사장님 확정. 팔각은 clip-path 라 border 가 같이 잘린다 → 바깥 면 + ::before 안쪽 면 두 겹으로 «테두리처럼» 보이게 한다. 모서리 자름은 %가 아니라 px 라야 칸이 세로로 짧아도 45° 가 유지된다. */ .mz{ width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 0; } .mz-wrap{ position: relative; padding: 16px; margin-top: 12px; } .mz th{ padding: 0 0 7px; font-size: 10px; font-weight: var(--fw-medium); color: var(--dg-text-faint); } /* 한 줄 안의 모든 칸이 «똑같은 여백 + 가운데 맞춤» 이라야 왼쪽 이름표와 오른쪽 값이 정확히 한 줄로 보인다. 전에는 이름표만 padding-top 이 달라 줄마다 어긋났다 (2026-09-09 사장님 지적 — «세로줄 가로줄 정렬이 안 맞는 것 같아»). */ .mz td{ padding: 4px 2px 5px; text-align: center; vertical-align: middle; } /* 줄마다 연한 가로줄 — «표»로 읽히게 (2026-09-09 사장님이 A안으로 확정). 세로줄은 넣지 않는다: 팔각 칸끼리 이미 떨어져 있어 기둥 구분은 눈에 보인다. */ .mz tr:not(:last-child) th, .mz tr:not(:last-child) td{ border-bottom: 1px solid rgba(255, 255, 255, 0.07); } /* 「나와의 사이」·「아래 글자」가 들어가면서 44 → 52px, 두 줄도 되게 (2026-09-10) */ .mz-lab{ text-align: left !important; width: 52px; font-size: 10px; line-height: 1.35; color: var(--dg-text-faint); } .mz-g{ position: relative; background: #303030; padding: 8px 2px 7px; clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px); } .mz-g::before{ content: ''; position: absolute; inset: 1px; background: var(--dg-fill); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); } .mz-g b, .mz-g span{ position: relative; z-index: 1; } .mz-g b{ display: block; font-size: 23px; font-weight: var(--fw-semibold); line-height: 1.1; } .mz-g span{ display: block; margin-top: 3px; font-size: 9px; color: var(--dg-text-faint); } .mz-g.me{ background: var(--dg-accent); } .mz-g.me::before{ background: linear-gradient(150deg, #3A1A05, #241206); } /* 빈 칸도 채워진 칸과 같은 키로 — 시(時)를 모르면 그 줄만 쑥 들어가 보였다 */ .mz-g.empty{ background: #262626; min-height: 54px; padding: 0; display: flex; align-items: center; justify-content: center; } .mz-g.empty::before{ background: #161616; } .mz-g.empty b{ color: #3A3A3A; font-size: 19px; } /* 계단 회문 테두리 — 모서리 조각 넷(index.html 의 #gm-corner 을 거울로) + 사이 줄 여덟. 모서리는 크기 고정, 줄만 늘어난다 → 표가 어떤 크기여도 무늬가 안 찌그러진다. 무늬 크기는 --s 하나로 (2026-09-09 사장님이 .15 로 확정 — 선 굵기 1.4px). */ .gm{ position: absolute; inset: 0; pointer-events: none; color: rgba(255, 86, 0, 0.72); --s: .15; --cw: calc(122 * var(--s) * 1px); --ch: calc(126 * var(--s) * 1px); --t: calc(9 * var(--s) * 1px); --o2: calc(21 * var(--s) * 1px); } .gm svg{ position: absolute; display: block; width: var(--cw); height: var(--ch); } .gm .tl{ top: 0; left: 0; } .gm .tr{ top: 0; right: 0; transform: scaleX(-1); } .gm .bl{ bottom: 0; left: 0; transform: scaleY(-1); } .gm .br{ bottom: 0; right: 0; transform: scale(-1, -1); } .gm i{ position: absolute; display: block; background: currentColor; } .gm i.h{ left: var(--cw); right: var(--cw); height: var(--t); } .gm .t1{ top: 0; } .gm .t2{ top: var(--o2); } .gm .b1{ bottom: 0; } .gm .b2{ bottom: var(--o2); } .gm i.v{ top: var(--ch); bottom: var(--ch); width: var(--t); } .gm .l1{ left: 0; } .gm .l2{ left: var(--o2); } .gm .r1{ right: 0; } .gm .r2{ right: var(--o2); } .mz-sub{ font-size: 10.5px; color: var(--dg-text-body); } .mz-sub.me{ color: var(--dg-accent); font-weight: var(--fw-bold); } .mz-sub.dim{ color: var(--dg-text-faint); font-size: 9.5px; } /* ③ 네 기둥 — 여덟 글자가 «내 인생의 지도»로 읽히기 시작하는 자리 */ .sj-pil{ display: flex; flex-direction: column; gap: 7px; margin-top: 11px; } .pz-row{ display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; background: var(--dg-fill); } .pz-row.me{ background: var(--dg-accent-soft); box-shadow: inset 0 0 0 1.5px var(--dg-accent-border); } .pz-gz{ flex: none; width: 42px; text-align: center; } .pz-gz b{ display: block; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.25; } .pz-gz.empty b{ color: #3A3A3A; } .pz-txt b{ display: block; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--dg-text-primary); } .pz-txt span{ display: block; margin-top: 2px; font-size: 11px; line-height: 1.5; color: var(--dg-text-secondary); } /* ④ 오행 — 오각형을 «카드 폭에 가깝게» 키웠다 (막대와 위아래로) */ .sj-wu{ display: flex; justify-content: center; } .sj-wu svg{ width: 100%; max-width: 262px; height: auto; } .sj-bars{ display: flex; flex-direction: column; gap: 7px; margin-top: 12px; } .sj-bars div{ display: flex; align-items: center; gap: 8px; } .sj-bars b{ width: 14px; font-size: 11.5px; font-weight: var(--fw-bold); } .sj-bars span{ flex: 1; height: 7px; border-radius: 999px; background: var(--dg-fill); overflow: hidden; } .sj-bars i{ display: block; height: 100%; border-radius: 999px; } .sj-bars em{ width: 16px; text-align: right; font-style: normal; font-size: 11px; color: var(--dg-text-secondary); } /* ⑤ 인생 흐름 — 곡선 + 여섯 칸 (곡선의 여섯 점이 아래 여섯 칸 «한가운데»에 선다) */ .sj-curve{ display: block; width: 100%; margin: 4px 0 8px; overflow: hidden; } .sj-flow{ display: flex; gap: 6px; } .sj-flow div{ flex: 1; text-align: center; padding: 8px 0 6px; border-radius: 9px; background: var(--dg-fill); } .sj-flow div.on{ background: var(--dg-accent-soft); box-shadow: inset 0 0 0 1.5px var(--dg-accent); } /* 나이가 크고 한자가 작다 — 여기서 찾는 건 «내가 지금 어디쯤인가»지 한자가 아니다 (2026-09-10) */ .sj-flow b{ display: block; font-size: 14.5px; font-weight: var(--fw-bold); color: var(--dg-text-primary); } .sj-flow span{ display: block; margin-top: 3px; font-size: 10.5px; color: var(--dg-text-faint); } /* «쓸어서 나타나기» — 카드 바탕색 덮개가 오른쪽으로 물러나며 선·채움·점이 함께 드러난다. ⚠️ clipPath 안의 사각형을 늘리는 방법은 안 된다 — 크롬이 그 안에서는 움직임을 돌리지 않는다. 실제로 그려지는 사각형을 덮개로 두고 밀어내야 한다 (2026-09-09에 확인). */ .sj-curtain{ transform-box: view-box; animation: sjCurtain 1.5s cubic-bezier(.33,0,.15,1) .15s forwards; } @keyframes sjCurtain{ from{ transform: translateX(0) } to{ transform: translateX(332px) } } .sj-now{ opacity: 0; animation: sjPop .4s cubic-bezier(.34,1.4,.5,1) 1.5s forwards; transform-box: fill-box; transform-origin: center; } @keyframes sjPop{ from{ opacity:0; transform:scale(.4) } to{ opacity:1; transform:scale(1) } } /* «동작 줄이기»를 켠 손님에겐 움직이지 않는다 */ @media (prefers-reduced-motion: reduce){ .sj-curtain{ animation: none; transform: translateX(332px); } .sj-now{ animation: none; opacity: 1; } } /* 단추 — 로그인했는지에 따라 글이 갈린다 (renderSajuTop) */ .saju-cta{ margin-top: 18px; } /* 주황 단추 글자는 «흰색». 사이트의 다른 주황 단추(쿠폰 등록·다시보기·다음·빈 화면 단추· 갈래 칩)가 모두 #fff 인데 이 단추만 검정이었다 (2026-09-10 사장님 지적). */ .saju-cta button{ display: block; width: 100%; height: 48px; border-radius: var(--dg-radius-full); background: var(--dg-accent); color: #fff; font-size: 15px; font-weight: var(--fw-bold); border: 0; font-family: inherit; letter-spacing: inherit; cursor: pointer; } .saju-cta small{ display: block; margin-top: 9px; text-align: center; font-size: 11.5px; color: var(--dg-text-faint); line-height: 1.6; } /* «받아본 리포트» — 바로 아래 탭 바가 붙으므로 아래 여백은 탭 바가 만든다 */ /* ── 하단바가 붙는 «탭» 화면 세 곳(오늘의 운세·내 사주·내정보)의 본문 여백 ────────── 2026-09-09 사장님 지시로 «오늘의 운세» 기준 한 규칙으로 통일했다. 전에는 오늘의 운세만 패딩(24 20 60), 내 사주·내정보는 margin: 24px 20px 0 이라 방식도 값도 제각각이었다 — 그래서 화면을 옮겨 다니면 여백이 미묘하게 달랐다. 위 24 · 좌우 20 은 .page-body 기본과 같고, 아래만 떠 있는 하단바를 피한다(--fnav-space). ⚠️ 마진으로 되돌리지 말 것 — 마진은 부모 밖으로 새서(화면 아래 회색) flow-root 를 덧대야 했다. 패딩은 새지 않는다. ※ 빈 화면 중앙정렬(.storage-center)은 아래에서 padding-top 만 따로 덮는다. */ #page-storage.active, #page-mypage.active{ display: flow-root; } #page-storage .page-body, #page-mypage .page-body{ padding: 24px 20px var(--fnav-space); margin: 0; } /* 오늘의 운세만 아래 여백이 0 이다 — 하단바를 피하는 몫은 «붙어 있는 띠»(.saju-cta)가 자기 padding-bottom 으로 갖고 있다. 여기에도 주면 빈 자리가 두 번 들어간다. */ #page-today .page-body{ padding: 24px 20px 0; margin: 0; } /* ── 내 정보 화면 구성 (2026-08-04 사장님 지시로 «풍성하게» 재구성) ── */ /* 좌우 4px 은 «일부러» 준 것 (2026-08-05 사장님 지시) — 기준선(20px)에서 4px 안으로 들어온다. 검수에서 «기준선과 안 맞는다»고 되돌리지 말 것. */ #page-mypage .mp-page-title{ margin:0 0 24px; padding:0 var(--dg-space-1); font-size:20px; font-weight:var(--fw-bold); color:var(--dg-text-primary); } /* 오늘의 운세 (2026-09-09 «자리»만 먼저) — 제목은 내 정보와 같은 규칙, 그 아래 날짜 한 줄 */ #page-today .mp-page-title{ margin:0 0 4px; padding:0 var(--dg-space-1); font-size:20px; font-weight:var(--fw-bold); color:var(--dg-text-primary); } #page-today .today-date{ margin:0; padding:0 var(--dg-space-1); font-size:14px; color:var(--dg-text-secondary); } /* 이벤트 배너 — 오렌지 한 곳(이 화면의 유일한 포인트). 무한 루프 + 3초 자동 넘김 */ /* ⚠️ background 는 «그림이 아직 없을 때» 회색 자리로 보이라고 둔 것 (2026-09-09 사장님 지시). 배너 그림이 들어오면 슬라이드가 칸을 통째로 덮으므로 이 색은 보이지 않는다 — 빼지 말 것. */ #page-mypage .mp-event-banner{ position:relative; height:84px; margin-top:24px; border-radius:var(--dg-radius-sm); overflow:hidden; background:var(--dg-fill); } .mp-event-track{ display:flex; height:100%; will-change:transform; touch-action:pan-y; } .mp-event-slide{ flex:0 0 100%; height:100%; display:flex; align-items:center; gap:12px; padding:0 20px; border:0; background:var(--dg-accent); cursor:pointer; text-align:left; font-family:var(--font-sans); } .mp-event-slide:active{ opacity:.9; } /* 이미지 배너 슬라이드 (2026-08-07) — 사장님이 만들어 주신 그림 한 장이 칸을 통째로 채운다. 글자 슬라이드와 달리 안쪽 여백이 없어야 그림이 모서리까지 닿는다. ⚠️ object-fit:cover 라 «가운데 기준»으로 좌우가 잘린다. 그림은 1632×336(@4x)로 만들고 글자·핵심은 가운데 1120px 안에 둔다. background 는 그림이 늦게 뜰 때 보이는 바탕색. */ .mp-event-slide.is-img{ padding:0; background:#DCEEFB; } .mp-event-slide.is-img img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; } /* 슬라이드 번호 «1 / 2». ⚠️ 바탕을 .28 → .55 로 진하게, 글자를 흰색으로 올렸다 (2026-08-07). 옛 값은 오렌지 배너 위에서만 읽혔고, 밝은 하늘색 이미지 배너 위에서는 대비가 2.0:1 로 떨어져 숫자가 거의 안 보였다. 지금 값은 6.4:1 — 어떤 그림 위에 올려도 읽힌다. */ .mp-event-counter{ position:absolute; right:12px; bottom:12px; display:flex; align-items:center; justify-content:center; min-width:44px; height:24px; padding:0 8px; border-radius:var(--dg-radius-full); background:rgba(17,17,17,.55); color:#fff; font-size:12px; font-weight:var(--fw-semibold); pointer-events:none; } .mp-event-counter[hidden]{ display:none; } .mp-event-counter b{ color:#fff; font-weight:var(--fw-semibold); } /* 바로가기 — 목록 카드와 같은 «옅은 면» (가이드 16-4) 쿠폰함 · 내 결과 · 후기 작성 세 칸을 같은 무게로 한 줄에 (2026-08-05 사장님 A안 선택) */ #page-mypage .mp-quick{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:24px; } /* 면은 #F1F1F1 — #FAFAFA 는 흰 배경 위에서 거의 안 보였다 (2026-08-05 사장님 지적). 가이드의 «옅은 면»이고, 누르는 칸이라 배경이 또렷해야 어디를 누를지 보인다. */ .mp-quick-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:80px; padding:16px 0; border:0; border-radius:var(--dg-radius-sm); background:var(--dg-fill); color:var(--dg-text-primary); font-size:14px; font-weight:var(--fw-semibold); font-family:var(--font-sans); cursor:pointer; } .mp-quick-item svg{ display:block; width:20px; height:20px; } /* 작은 아이콘 단 — 하단 바와 같은 20px (선 굵기 2.1) */ .mp-quick-item:active{ background:var(--dg-divider); } /* 누를 때 한 단 더 진하게(#E1E1E1) — 배경과 같으면 눌린 표시가 안 난다 */ /* 목록은 섹션 하나 아래 — 40px (가이드 §2) */ #page-mypage /* 배너 바로 아래에 8px 만 띄운다. 가이드 §16-4 는 «묶음이 바뀌면 40px + 얇은 선»이지만, 이 메뉴는 사장님이 선을 빼고 여백도 8px 로 좁히기로 했다 (2026-08-05). 위 오렌지 배너가 이미 경계를 만들어 줘서 선도 넓은 여백도 겹쳐 보인다. ⚠️ 검수에서 «40px + 선이어야 한다»고 도로 넣지 말 것 — 넣었다가 뺀 자리다. */ .mypage-menu{ margin-top:var(--dg-space-2); } /* 보관함의 «빈 화면» — 헤더~하단네비 사이 화면 중앙(가로·세로) 정렬. 2026-09-10: 비로그인 화면만 쓰던 것을 «산 게 없는 손님» 화면도 같이 쓴다(B안). 두 화면이 같은 자리에 서야, 비회원으로 보다 로그인해도 글이 안 튄다. */ #page-storage .storage-center{ display: flex; flex-direction: column; justify-content: center; padding-top: 0; min-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top) - 160px); } /* 가운데에 놓일 땐 빈 화면 칸의 위아래 여백을 없앤다 — 안 그러면 가운데가 아래로 밀린다 */ #page-storage .storage-center .empty-box{ padding:0; } /* ============================================================ 유료 리포트 시안 B 스킨 (2026-07-25 확정) — qr-reader(유료 리더) 범위에만 적용 포인트 오렌지 #FF6E3F(2026-07-28 전역과 통일 — 그 전엔 #EB572C) · 배경 #F1F1F1 · 다크 챕터 배지 · 설명글(3요소) 체계 ============================================================ */#qt-paid.qr-reader{ --dg-accent: #FF6E3F; --dg-accent-soft: rgba(255, 110, 63, 0.10); --dg-accent-border: rgba(255, 110, 63, 0.28); --dg-accent-shadow: rgba(255, 110, 63, 0.28); /* 디자인 v5: 리더 안쪽은 흰 바탕, 섹션 구분만 회색 띠로 (2026-07-28). 전엔 회색 바탕 + 흰 카드였는데, 번호 섹션만 흰색으로 바꾸니 흰·회색이 뒤섞여 누더기처럼 보였다(사장님 지적) → 전체를 흰 바탕으로 통일한다. */ background: #fff; /* 내용이 짧은 챕터에서 리더 배경이 글 높이에서 끝나고 아래로 흰 페이지가 드러나던 문제 (2026-07-26) — 최소 높이로 화면을 채우고, 페이지 자체도 같은 색으로 맞춘다. */ min-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top)); } /* 유료 리더가 떠 있는 동안은 페이지 바탕도 같은 색 (:has 미지원 브라우저는 위 min-height가 처리) */#page-qresult:has(#qt-paid.qr-reader){ background: var(--dg-surface); } /* 위 목록에 안 들어간 글(안전 안내·체크목록·비교 문장·큰숫자 제목 등)도 마지막 줄에 한 어절만 남는 일이 있었다 — 「…긴급 도움을 이용해 / 주세요.」 (2026-07-31, 320px 재검수). text-wrap 은 상속되므로 리더 전체에 한 번만 건다. 위 줄은 word-break 때문에 그대로 둔다. */#qt-paid.qr-reader{ text-wrap: pretty; }.qt-exit{ width:44px; height:44px; margin-right:-10px; display:flex; align-items:center; justify-content:center; background:none; border:none; font-size:18px; line-height:1; color:var(--dg-text-secondary); cursor:pointer; flex-shrink:0; } /* 팝업이 떠 있는 동안 뒤 화면이 같이 밀리지 않게 (2026-07-27). ⚠️ 이 사이트는 스크롤 주체가 body 가 아니라 html 이라, html 에도 걸어야 실제로 멈춘다. */html.modal-open, body.modal-open{ overflow: hidden; } /* 빈 화면·오류 화면 — 안내만 두지 않고 다음에 할 일을 준다 (2026-07-27) */.empty-box{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px 0 56px; text-align:center; } /* 좌우는 화면의 20px 기준선을 그대로 쓴다(또 주면 40px 이 된다) · 위는 화면 여백 24px 과 합쳐 56px — 가이드 16-5 */ /* ⚠️ display:flex 가 hidden 속성(UA의 display:none)을 덮어써, 결과가 있는데도 «이 카테고리에는 저장된 결과가 없어요»가 같이 뜨던 문제 (2026-08-04 수정) */ .empty-box[hidden]{ display:none; }.empty-title{ font-size:16px; font-weight:700; color:var(--dg-text-primary); }.empty-desc{ font-size:14px; color:var(--dg-text-secondary); line-height:1.6; }.empty-btn{ margin-top:16px; min-height:44px; padding:0 40px; border:none; border-radius:var(--dg-radius-full); background:var(--dg-accent); color:#fff; font-size:16px; font-weight: var(--fw-semibold); font-family:var(--font-sans); cursor:pointer; }.empty-btn:active{ transform:scale(0.98); } /* ============================================================ 유료 리포트 — 클로드 디자인 «유료 리포트 뷰어 v5» 틀 반영 (2026-07-28) 사장님 지시: 틀(표지·구획·하단 바)만 입히고 본문 카드·지표 막대는 그대로 둔다. ============================================================ */ /* 챕터 표지 — CHAPTER NN(왼쪽) · N개 중 M번째(오른쪽) · 굵은 선 · 큰 제목 ⚠️ 좌우 패딩 없음 — .qresult-body 가 이미 좌우 20px 을 주므로, 여기 또 주면 표지만 본문보다 안쪽으로 밀려 시작선이 어긋난다(2026-07-28 수정 전 44px). */#qt-paid.qr-reader .qt-chap-cover{ padding:56px 0 40px; text-align:left; }#qt-paid.qr-reader .qt-chap-kick{ display:flex; align-items:center; justify-content:space-between; gap:16px; }#qt-paid.qr-reader .qt-chap-kicker{ font-size:14px; font-weight:800; color:var(--dg-text-primary); letter-spacing:.1em; }#qt-paid.qr-reader .qt-chap-meta{ font-size:12px; font-weight:700; color:var(--dg-text-secondary); letter-spacing:.06em; }#qt-paid.qr-reader .qt-chap-rule{ margin-top:16px; height:2px; background:#191F28; }#qt-paid.qr-reader .qt-chap-title{ margin-top:32px; font-size:32px; font-weight:800; line-height:1.35; letter-spacing:-.04em; color:#191F28; text-wrap:pretty; text-align:left; } /* margin 좌우 0 — 옛 표지 규칙(margin:8px 10px 0)의 좌우 10px 이 남아 제목과 시작선이 어긋났다 */#qt-paid.qr-reader .qt-chap-sub{ margin:12px 0 0; font-size:16px; font-weight:500; color:#4E5968; line-height:1.75; text-wrap:pretty; text-align:left; } /* 들어가며·에필로그는 표지 장식 없이 제목만 */#qt-paid.qr-reader .qt-chap-cover.pro{ padding:56px 0 24px; }#qt-paid.qr-reader .qt-chap-cover.pro .qt-chap-title{ margin-top:0; text-align:center; } /* 하단 고정 바 — 목차 · 위치 · 이전/다음(다음은 오렌지) */#qt-paid.qr-reader ~ .qr-foot, .qr-reader .qr-foot{ height:calc(64px + env(safe-area-inset-bottom)); padding:0 20px env(safe-area-inset-bottom); background:rgba(15,15,15,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--color-border); box-shadow:none; }.qr-reader .qr-foot-toc{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#191F28; }.qr-reader .qr-foot-arrows{ display:flex; align-items:center; gap:12px; }.qr-reader .qr-foot-arrow{ width:44px; height:44px; border:1px solid var(--color-border); border-radius:12px; display:flex; align-items:center; justify-content:center; background: var(--dg-surface); }.qr-reader .qr-foot-arrow[disabled]{ opacity:.35; }.qr-reader .qr-foot-arrow.qr-arrow-next{ border-color:transparent; background:var(--dg-accent); color:#fff; /* 오렌지 버튼 위이므로 화살표를 흰색으로(그림이 글자색을 따라간다) */ box-shadow:none; } /* 빛나는 듯한 오렌지 그림자를 뺐다 (2026-09-03 사장님) */ /* 하단 바 위치 표시 «3 / 13» */.qr-reader .qr-foot-pos{ font-size:12px; font-weight:700; color:#4E5968; } /* ── 유료 본문 섹션 — 클로드 디자인 v5 (2026-07-28) ── 디자인은 «흰 바탕 위 글 + 회색 띠로 구분» 구조다. 우리 리더는 바탕이 회색(#F1F1F1)이라 그대로 두면 회색 띠가 배경에 묻혀 구분이 안 보인다(사장님 지적) → 섹션 구간만 흰 바탕으로. ⚠️ 좌우 여백 상쇄값(--qp2-pad)은 리더일 때의 .qresult-body 좌우 패딩과 같아야 한다. 다르면 구분 띠가 좌우로 튀어나가거나 못 미친다. */ /* 유료 리더 좌우 여백 — 메인 화면과 같은 20px 기준선 (2026-08-04 사장님 지시로 전 화면 통일. 그전엔 24px 이었다). 헤더·하단 바도 같은 20px 이라 시작선이 맞는다. */#page-qresult:has(#qt-paid.qr-reader) .qresult-body{ padding-left: 20px; padding-right: 20px; }#qt-paid.qr-reader{ --qp2-pad: 20px; } /* ── 비밀번호 «보기» 눈 버튼 (2026-07-30 검수) ───────────────────────────── 비밀번호 칸을 JS(initPasswordToggles)가 .pw-wrap 으로 감싸고 눈 버튼을 넣는다. ⚠️ 기존 «.input-wrap input» · «.login-email-field input» 규칙이 자손 선택자라 감싸도 그대로 적용된다. 여기서는 눈 자리(오른쪽 여백)만 더한다. */.pw-wrap{ position:relative; display:block; }.pw-wrap input{ width:100%; padding-right:48px; }.pw-eye{ position:absolute; top:50%; right:6px; transform:translateY(-50%); width:36px; height:36px; padding:0; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--dg-text-secondary); border-radius:var(--dg-radius-sm); transition:color var(--transition-fast); }.pw-eye svg{ width:20px; height:20px; }.pw-eye:hover{ color:var(--color-text-primary); }.pw-eye.on{ color:var(--dg-accent); } /* 보이는 중 — 포인트색으로 상태를 알린다 */.pw-eye:focus-visible{ outline:2px solid var(--dg-accent); outline-offset:2px; } /* 번호칸 아래 «이미 가입된 번호» 같은 오류 안내 */.input-hint-err{ color:#D64B2E; } /* 가이드 색표의 «오류» */.input-hint-err a{ color:#D64B2E; text-decoration:underline; } /* 진행 중 화면(로그인·가입·조회) — 헤더가 없으므로 화면 전체를 쓴다. 나머지 값(스피너·제목·안내)은 «결과를 분석하고 있어요»와 같은 .ql-* 를 그대로 쓴다. */ #page-authloading .ql-wrap{ min-height:100vh; min-height:100dvh; } /* ══════════ 후기 작성 (2026-08-05) ══════════ ① page-review-write — 어떤 결제 건인지 고른다 ② page-review-form — 그 건의 후기를 쓴다 ⚠️ 값은 [[디자인 가이드]]와 대조해 맞춘 것이다 (2026-08-05 검수). 글자 10/12/14/16/20 · 여백 4의 배수 · 카드 테두리 1px #E1E1E1 · 둥글기 12(버튼·카드·입력) · 오렌지는 «선택 상태»와 «버튼»에만. 가이드에 없는 색을 새로 지어내지 않는다. */ /* ── 안내 띠 (두 화면 공통) ── ⚠️ 오렌지 면을 쓰지 않는다 — 누를 곳이 아니다. 강조는 색이 아니라 굵기로. */ .rw-reward{ display:flex; align-items:center; gap:var(--dg-space-3); padding:var(--dg-space-4); border-radius:var(--dg-radius-md); background: var(--dg-surface-soft); margin:0 0 var(--dg-space-6); } .rw-reward-ic{ font-size:20px; line-height:1; flex:none; } .rw-reward p{ margin:0; font-size:14px; line-height:1.5; color:var(--dg-text-body); } .rw-reward b{ color:var(--dg-text-primary); font-weight:var(--fw-bold); } /* ── 질문 문장 ── */ .rw-q{ margin:0 0 var(--dg-space-1); font-size:20px; font-weight:var(--fw-bold); line-height:1.3; color:var(--dg-text-primary); } .rw-sub{ margin:0 0 var(--dg-space-4); font-size:12px; line-height:1.5; color:var(--dg-text-secondary); } /* 칩 바로 위 한 줄 안내 — 제목이 아니라 «고르는 법» 설명이라 12px 보조색. 부분과 부분 사이는 구분선 없이 24px 로만 띄운다 (2026-08-05 사장님 지시). */ /* ── ① 결제 건 카드 ── */ .rw-pay{ display:flex; align-items:center; gap:var(--dg-space-3); width:100%; text-align:left; padding:var(--dg-space-4); border:1px solid var(--dg-divider); border-radius:var(--dg-radius-md); background: var(--dg-surface); font-family:var(--font-sans); font-size:16px; cursor:pointer; margin-bottom:var(--dg-space-2); } .rw-pay:active{ background: var(--dg-surface-soft); } .rw-pay-th{ width:48px; height:48px; border-radius:var(--dg-radius-sm); background:var(--dg-fill); flex:none; background-size:cover; background-position:center; } .rw-pay-in{ flex:1; min-width:0; } .rw-pay-nm{ display:block; font-size:16px; font-weight:var(--fw-semibold); line-height:1.3; color:var(--dg-text-primary); } .rw-pay-dt{ display:block; margin-top:var(--dg-space-1); font-size:12px; line-height:1.4; color:var(--dg-text-secondary); } .rw-pay-go{ flex:none; color:var(--dg-line-2); display:flex; } .rw-pay-go svg{ width:20px; height:20px; } /* 이미 후기를 쓴 건 — 회색 면으로 내려앉고 누를 수 없다 (수정도 없다) */ .rw-pay.done{ background: var(--dg-surface-soft); border-color:var(--dg-divider); cursor:default; } .rw-pay.done .rw-pay-nm{ color:var(--dg-text-secondary); } .rw-done-tag{ display:inline-block; margin-left:var(--dg-space-2); padding:var(--dg-space-1) var(--dg-space-2); border-radius:var(--dg-radius-full); background:var(--dg-fill); font-size:10px; font-weight:var(--fw-bold); line-height:1.3; color:var(--dg-text-secondary); vertical-align:1px; } .rw-pay-mini{ display:flex; gap:0; margin-top:var(--dg-space-1); } .rw-pay-mini .review-star{ width:12px; height:12px; color:var(--dg-divider); } .rw-pay-mini .review-star.on{ color:var(--dg-accent); } /* 별 — 로고 주황 (2026-09-09) */ /* 결제한 게 없을 때 */ .rw-empty{ text-align:center; padding:44px 0; } .rw-empty .rw-cta{ margin-top:var(--dg-space-8); } .rw-empty-t{ margin:0 0 var(--dg-space-2); font-size:16px; font-weight:var(--fw-bold); line-height:1.3; color:var(--dg-text-primary); } .rw-empty-d{ margin:0; font-size:14px; line-height:1.5; color:var(--dg-text-secondary); } /* ── ② 고른 결제 건 띠 ── */ .rw-picked{ display:flex; align-items:center; gap:var(--dg-space-3); padding:var(--dg-space-3) var(--dg-space-4); border-radius:var(--dg-radius-md); background: var(--dg-surface-soft); margin-bottom:var(--dg-space-6); } .rw-picked-th{ width:36px; height:36px; border-radius:var(--dg-radius-sm); background:var(--dg-fill); flex:none; background-size:cover; background-position:center; } .rw-picked-nm{ display:block; font-size:14px; font-weight:var(--fw-semibold); line-height:1.3; color:var(--dg-text-primary); } .rw-picked-dt{ display:block; margin-top:var(--dg-space-1); font-size:12px; line-height:1.4; color:var(--dg-text-secondary); } /* ── ② 별점 ── */ /* 별 — «누르는 자리»는 가이드대로 44×44 로 두되, 그 안을 별이 거의 꽉 채우게 한다(40px). ⚠️ 별을 작게 두면 남는 자리가 그대로 «별 사이 간격»으로 보인다. 32px 일 때는 좌우 6px 씩 남아 별 사이가 12px 로 벌어져 흩어져 보였다 (2026-08-05 사장님 지적). 36px 이면 남는 자리가 4px 씩이라 눈에 보이는 간격이 8px 이 된다(40px 은 커 보였다). ⚠️ margin-left:-4px 는 «첫 별의 왼쪽 끝»을 화면 좌우 기준선(20px)에 맞추기 위한 것. 누르는 자리가 별보다 4px 넓어서, 그대로 두면 별이 제목보다 4px 안으로 들어가 보인다. (가이드의 «4의 배수가 아니어도 되는 예외 ①터치 영역 보정»에 해당) */ .rw-stars{ display:flex; gap:0; margin:var(--dg-space-4) 0 0 -4px; } .rw-stars button{ border:0; background:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; } .rw-stars svg{ width:36px; height:36px; fill:var(--dg-divider); transition:fill .12s; } .rw-stars button.on svg{ fill:var(--dg-accent,#FF5600); } /* ── ② 글상자 ── */ .rw-ta{ display:block; width:100%; min-height:120px; margin-top:var(--dg-space-6); border:1px solid var(--dg-divider); border-radius:var(--dg-radius-md); padding:var(--dg-space-4); font-family:var(--font-sans); font-size:16px; line-height:1.6; color:var(--dg-text-primary); resize:none; } .rw-ta::placeholder{ color:var(--dg-text-faint); } .rw-ta:focus{ outline:none; border-color:var(--dg-accent,#FF6E3F); } /* 남은 글자수 = 진행 표시라 오렌지를 쓴다. 최소 글자수를 넘기면 회색으로 내려 CTA와 겹치지 않게. ⚠️ 좌우 4px 은 «일부러» 준 것이다 (2026-08-05 사장님 지시) — 글상자 모서리에 딱 붙어 있으면 답답해 보인다. 기준선(20px)에서 4px 안으로 들어오는 유일한 자리라, 검수에서 «어긋났다»고 되돌리지 말 것. */ .rw-count{ margin:var(--dg-space-2) 0 0; padding:0 var(--dg-space-1); text-align:right; font-size:12px; line-height:1.4; color:var(--dg-text-secondary); } .rw-count b{ color:var(--dg-accent,#FF6E3F); } .rw-count.ok b{ color:var(--dg-text-secondary); } /* ── ② 하단 바 ── 결제 화면(.checkout-footer)과 같은 구조·같은 값. 가이드 §4의 «하단 바 위 그림자»는 위로만 진다 — 0 -6px 6px -6px rgba(17,17,17,.16). 아래·옆으로 번지지 않는다. */ /* 하단 바가 바로 뒤에 오므로 본문 아래 기본 여백(60px)을 24px 로 줄인다 — 60 은 여백 단(4·8·12·16·20·24·32·40)에 없는 값이고, 형제 화면인 결제도 24px 이다. */ #page-review-form .page-body{ padding-bottom:var(--dg-space-6); } /* 하단 바를 «화면 맨 아래»에 붙인다. ⚠️ 그냥 두면 내용이 짧을 때 바가 화면 중간에 떠 있는다 (2026-08-05 사장님이 잡아냄). .page 는 이미 min-height:100dvh 이므로, 세로 flex 로 만들고 본문이 남는 자리를 먹게 하면 바가 바닥으로 밀려난다. 내용이 길면 평소처럼 내용 뒤에 오고 화면이 스크롤된다. ⚠️ 선택자에 id 를 쓰는 이유: .page.active{display:block} 을 이겨야 한다. */ #page-review-form.active{ display:flex; flex-direction:column; } #page-review-form .page-body{ flex:1; } .rw-footer{ padding:var(--dg-space-3) var(--dg-space-5) calc(var(--dg-space-5) + env(safe-area-inset-bottom)); background: var(--color-bg); box-shadow:0 -6px 6px -6px rgba(17,17,17,.16); } /* 버튼 위 한 줄 안내 — 박스도 이모지도 없이 (2026-08-05 사장님 지시: «박스 필요없고 폰트도 너무 크잖아»). 가이드의 «보조 설명 12/400 보조색»에 맞춘다. 강조는 색이 아니라 굵기로. */ .rw-note{ margin:0 0 var(--dg-space-3); text-align:center; font-size:12px; line-height:1.5; color:var(--dg-text-secondary); } .rw-note b{ color:var(--dg-text-primary); font-weight:var(--fw-semibold); } .rw-cta{ display:block; width:100%; height:56px; padding:0; border:0; border-radius:var(--dg-radius-md); background:var(--dg-accent,#FF6E3F); color:#fff; font-family:var(--font-sans); font-size:16px; font-weight: var(--fw-semibold); cursor:pointer; } .rw-cta:disabled{ background:var(--dg-fill); color:var(--dg-text-faint); cursor:default; } .rw-cta:active:not(:disabled){ transform:scale(0.99); } /* ============================================================ «무료 결과» — 한 화면에 한 마디씩 (틀만 남김) ⚠️ 값은 시안에서 «진짜 앱을 재서» 맞춘 것이다. 임의로 바꾸지 말 것 — 헤더 60 / 본문 좌우 20 / 하단 20·32 / 버튼 56·라운드12·16px·600 / 버튼 아래 문구 12px·400·#A1A1A1·줄높이 12·위 12 / 라벨 14·600 / 큰 제목 26·700·1.3 / 본문 16·1.6 / 카드·칩 라운드 8. ⚠️ 진행 점·«1 / 5» 표시는 넣지 않는다 (사장님 지시로 뺐다). ============================================================ */ /* 이 화면에서는 결과 헤더 제목을 «가운데»로 (2026-09-03 사장님 지시) */ #page-qresult.v2res .qr-header{ position:relative; justify-content:center; } #page-qresult.v2res .qr-head-info{ text-align:center; } #page-qresult.v2res .sub-exit{ position:absolute; right:20px; top:50%; transform:translateY(-50%); } /* 뒤로가기 «←» — 다른 속화면 14개와 같은 자리·크기·색. 첫 장에서는 hidden 으로 감춘다. ⚠️ .v2res 일 때만 보인다 — 옛 결과 화면(상세·유료)에서는 눌러도 갈 데가 없다. (2026-09-03 사장님 «뒤로가기가 왜 없어») */ #page-qresult .qr-back{ display:none; } #page-qresult.v2res .qr-back{ display:flex; align-items:center; justify-content:center; position:absolute; left:20px; top:50%; transform:translateY(-50%); width:24px; height:24px; } #page-qresult.v2res .qr-back[hidden]{ display:none; } /* 이 화면은 «한 화면에 딱» 들어와야 한다 — 페이지를 세로 flex 로 세우고 본문이 남는 높이를 다 먹게 한다(그래야 버튼이 아래에 붙는다). */ #page-qresult.v2res.active{ display:flex; flex-direction:column; height:100dvh; overflow:hidden; } #page-qresult.v2res .qresult-body{ /* ⚠️ width:100% 가 없으면 위 «.qresult-body{margin:0 auto}» 와 세로 flex 가 겹쳐 본문이 «글자 폭»만큼 쪼그라든다 → 버튼이 화면보다 훨씬 좁아진다 (2026-09-03 사장님 «밑에 버튼은 디자인 가이드가 아예 반영이 안된 것 같다»). */ width:100%; flex:1; min-height:0; display:flex; flex-direction:column; padding:0 20px 32px; overflow:hidden; } .v2{ flex:1; min-height:0; display:flex; flex-direction:column; } /* 문항 앞머리 — 본문보다 한 톤 낮게 (2026-09-03 축 개편: 앞머리+본문이 한 문장) */ .qt-q-lead{ font-size:16px; line-height:1.5; color:var(--dg-text-secondary); margin:0 0 6px; word-break:keep-all; } /* ══ 썸네일 화면 (2026-09-03 사장님 확정) ══════════════════════════════ 구조: 헤더(투명·떠 있음) → 배경 칸(영상 + 글자) → 버튼 → 안내. ⚠️ 배경은 «버튼 바로 위»까지 내려오고, 제목 글자는 그 위에 떠 있다. 버튼·안내만 자리를 차지하므로 폰이 짧아도 절대 안 겹친다. */ /* ⚠️ 반드시 .active 를 붙인다 — id 만 쓰면 «안 보여야 할 때도» 보여서 다른 화면(테스트 소개 등) 위를 덮는다. (2026-09-03 실제로 그랬다) */ #page-thumb.active{ display:flex; flex-direction:column; height:100dvh; background: var(--dg-surface); } /* 헤더 높이·노치 여백은 다른 화면(#main-header 60px + safe-area)과 같게 맞춘다 — 소개 화면으로 넘어갈 때 로고가 어긋나 보이지 않도록 (2026-09-03) */ .thumb-top{ position:absolute; top:0; left:0; right:0; z-index:3; height:calc(var(--header-height) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); display:flex; align-items:center; justify-content:space-between; padding-left:20px; padding-right:20px; background:transparent; } .thumb-stage{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; } .thumb-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 4%; } /* 아래에서 위로 «흰색 → 투명» — 글자가 앉는 자리를 하얗게 */ .thumb-stage::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:42%; pointer-events:none; background:linear-gradient(to top, #0F0F0F 0%, rgba(15,15,15,.99) 26%, rgba(15,15,15,.88) 48%, rgba(15,15,15,.55) 72%, rgba(15,15,15,0) 100%); } .thumb-copy{ position:absolute; left:0; right:0; bottom:18px; z-index:1; padding:0 20px; text-align:center; font-family:'IBM Plex Sans KR','Pretendard Variable',Pretendard,system-ui,sans-serif; letter-spacing:-0.055em; } .thumb-label{ margin:0; font-size:15px; font-weight:700; color:var(--dg-accent); } .thumb-title{ margin:10px 0 0; font-size:36px; font-weight:700; line-height:1.15; color:var(--dg-text-primary); } .thumb-sub { margin:12px 0 0; font-size:14px; color:var(--dg-text-secondary); } .thumb-foot{ flex:0 0 auto; padding:0 20px calc(32px + env(safe-area-inset-bottom)); } .thumb-cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; } .thumb-cta svg{ width:20px; height:20px; } .thumb-note{ margin:12px 0 0; text-align:center; font-size:12px; color:var(--dg-text-light, #8E8E93); } /* ── 썸네일 → 소개 넘어가는 모션 (2026-09-03 사장님 지시) ────────────────── «영상은 뒤로 서서히 사라지고, 글자는 위로 올라온다». 떠나는 썸네일 화면을 잠깐 «위에» 붙잡아 둔 채 뒤로 물러나며 지우고(.thumb-leaving), 그 아래에서 소개 화면의 글자가 차례로 올라온다(.si-enter). ⚠️ 붙였다 떼는 일은 2-forms.js 의 siPlayEnter() 가 한다. */ /* ⚠️ position:fixed 는 화면(브라우저) 전체를 기준으로 잡는다 → 그냥 inset:0 만 주면 떠나는 썸네일이 «앱 폭 448px»을 벗어나 브라우저 전체 너비로 확 벌어졌다. max-width + margin:0 auto 로 #app-container 와 같은 폭·같은 자리에 맞춘다. (2026-09-03 사장님 지적) */ #page-thumb.thumb-leaving{ display:flex; flex-direction:column; height:100dvh; background: var(--dg-surface); position:fixed; inset:0; margin:0 auto; width:auto; max-width:var(--max-width); z-index:1200; pointer-events:none; animation:thumbLeave .48s cubic-bezier(.4,0,.2,1) forwards; } @keyframes thumbLeave{ from{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(.94); } } #page-service.si-enter .si-label, #page-service.si-enter .si-headline, #page-service.si-enter .si-subtitle, #page-service.si-enter .si-meta, #page-service.si-enter .si-about{ animation:siRise .52s cubic-bezier(.25,.46,.45,.94) both; } #page-service.si-enter .si-label { animation-delay:.12s; } #page-service.si-enter .si-headline{ animation-delay:.18s; } #page-service.si-enter .si-subtitle{ animation-delay:.26s; } #page-service.si-enter .si-meta { animation-delay:.34s; } #page-service.si-enter .si-about { animation-delay:.40s; } @keyframes siRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } } /* 움직임을 줄이도록 설정한 손님에게는 모션을 안 준다 */ @media (prefers-reduced-motion: reduce){ #page-thumb.thumb-leaving{ display:none; animation:none; } #page-service.si-enter .si-label, #page-service.si-enter .si-headline, #page-service.si-enter .si-subtitle, #page-service.si-enter .si-meta, #page-service.si-enter .si-about{ animation:none; } } /* ============================================ 로그인 팝업 (2026-09-10 · 시안 «로그인 팝업») ============================================ */ /* 시트 머리 규칙 — 왼쪽 ←(없으면 같은 크기 빈 자리) · 가운데 제목 · 오른쪽 ✕. 사이트의 화면 머리(sub-header)와 같은 규칙이다. 생년월일시 시트도 이 규칙을 따른다. ⚠️ 제목이 절대 배치라, 왼쪽에 ← 나 .sheet-sp 가 «반드시» 있어야 ✕ 가 오른쪽에 남는다. */ .sheet-head{ position:relative; height:32px; margin-bottom:12px; } /* «로그인 중»에는 머리를 통째로 감춘다 — .sheet-head 에 display:flex 가 걸려 있어 hidden 만으로는 안 사라진다 */ .sheet-head[hidden]{ display:none; } .sheet-head span{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; } .sheet-sp{ width:32px; height:32px; flex:none; } .sheet-back{ padding:4px; width:32px; height:32px; background:none; border:0; color:var(--dg-text-faint); cursor:pointer; } .sheet-back .ic, .sheet-close .ic{ width:22px; height:22px; display:block; } /* ⚠️ .ls-sub·.ls-load 는 로그인 팝업과 «결과 다시보기» 팝업이 함께 쓴다 (2026-09-10) */ .sheet .ls-sub{ margin:2px 0 20px; font-size:var(--fs-body-small); line-height:1.5; color:var(--dg-text-secondary); text-align:center; } .login-sheet .login-actions{ gap:10px; } /* 「일반 로그인」 — 밑줄 글씨가 아니라 테두리 단추. 카카오와 크기·모양을 맞춰야 «고를 수 있는 길이 둘»이라는 게 눈에 보인다 (밑줄 글씨는 «덤»처럼 읽혔다). */ .login-sheet .login-alt-link{ display:flex; align-items:center; justify-content:center; width:100%; height:54px; border:1px solid #3A3A3A; border-radius:var(--dg-radius-md); background:none; color:var(--dg-text-primary); font-size:16px; font-weight:var(--fw-semibold); text-decoration:none; } .login-sheet .login-alt-link:active{ background:var(--dg-fill); } /* 약관 줄은 폰 폭에 따라 글자가 줄어들며 «한 줄»을 지킨다 — 두 줄로 접히면 「니다」 한 마디만 아래로 떨어져 보기 나빴다 (2026-09-10). */ .login-sheet .login-terms-note{ margin-top:20px; font-size:min(12px, calc((100vw - 40px) * .037)); white-space:nowrap; } .login-sheet .login-guide{ margin:0 0 16px; } .login-sheet .btn-dark{ margin-top:20px; } .login-sheet .login-links{ margin-top:20px; } /* ③ 로그인 중 — 시트 안에서 기다린다 */ .sheet .ls-load{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 0 26px; } .sheet .ls-load .ql-title{ margin-top:20px; } /* 안내 띠(토스트)는 팝업이 떠 있는 동안 위로 올린다 — 시트 글자와 겹쳐 읽기 어려웠다 */ body:has(#login-sheet:not([hidden])) .toast, body:has(#rv-sheet:not([hidden])) .toast{ bottom:auto; top:calc(20px + env(safe-area-inset-top)); } /* ============================================ 주황 단추 위 글자는 «흰색» (2026-09-10 사장님 지시) ============================================ 바탕을 검정 → 주황으로 갈아입힐 때 «색»만 바꾸고 «글자색»은 그대로 둬서, 주황 위에 검은 글자(#0F0F0F)가 남은 자리가 넷 있었다 — 아이디·비밀번호 찾기 · 회원가입 · 일반 로그인 · 회원정보 저장 · 생년월일 저장 · 결제하기 · 썸네일. («로그인하고 점수 보기»는 2026-09-10 에 먼저 고쳤고, 나머지를 여기서 맞춘다.) ⚠️ 카카오 단추(노랑 위 검정)는 카카오 규정이라 그대로 둔다. ⚠️ 상품 소개의 「정보 입력하기」는 «흰 바탕»이라 검은 글자가 맞다 — 색을 정하실 때 함께 정한다. */ .btn-dark, .btn-primary, .checkout-pay-btn{ color:#fff; } /* ══════════════════════════════════════════════════════════════════════ 단추 규칙 하나로 (2026-09-10 사장님 확정 · 시안 «버튼 통일안») ══════════════════════════════════════════════════════════════════════ ① 본문에서 폭을 꽉 채우는 단추 … 56 · 둥글기 12 · 16 / 700 (주=주황+흰 글자) ② 카드·팝업·칸 «안»에서 폭을 채우는 단추 … 48 · 둥글기 12 · 14 / 600 ③ 글자만큼만 넓은 단추 … 알약. 홀로 서면 44, 줄·띠·카드 안에 붙으면 34 ④ 입력칸 옆·고르는 칸 … 네모 12. 옆 입력칸과 같은 높이(52) ⑤ 글씨만 있는 단추 … 14 / 500 · 회색 · 밑줄 없음 ⑥ 아이콘 단추 … 보이는 그림은 24 그대로, «누르는 자리»만 44 (가이드 §18) ⚠️ 왜 «폭»으로 가르나 — 2026-08-05 에 «버튼은 전부 12px»로 한 번 정리한 까닭이 «로그인은 알약, 결제하기는 네모»라 뒤죽박죽이어서였다. «크다/작다»로 가르면 그 애매함이 돌아온다. «폭을 꽉 채우나»는 볼 때마다 답이 하나다. ⚠️ 이 덩어리는 파일 «맨 뒤»에 있어야 앞의 옛 값들을 이긴다. 값을 고칠 땐 여기서만 고친다. ⚠️ 내 정보 바로가기 세 칸(둥글기 8)은 가이드 16-5-1 이 따로 정해 둔 자리라 건드리지 않는다. ⚠️ 카카오 단추의 노랑·검정 글자는 카카오 규정이라 그대로 둔다(높이·둥글기만 맞춘다). */ /* ── ① 본문 폭 꽉 = 56 · 16/700 ───────────────────────────────────── */ /* ⚠️ #page-checkout·#page-intake 안의 규칙이 id 라 더 세다 — 그 둘만 여기서 같이 못박는다 */ #page-checkout .checkout-pay-btn, #page-intake .intake-next{ height:56px; border-radius:var(--dg-radius-md); font-size:16px; font-weight:var(--fw-bold); color:#fff; } .btn-dark, .btn-primary, .checkout-pay-btn, .rw-cta, .qintro-btn, .intake-next, .si-cta, .service-intro-btn, .rv-submit, .btn-outline, .btn-kakao, .login-sheet .login-alt-link, #page-reviews .rvall-more{ height:56px; min-height:56px; padding-top:0; padding-bottom:0; border-radius:var(--dg-radius-md); font-size:16px; font-weight:var(--fw-bold); } /* 상품 소개의 「정보 입력하기」 — 흰 바탕 18px 이던 것을 주황으로 (2026-09-10 사장님 «주황으로 통일») */ .service-intro-btn{ background:var(--dg-accent); color:#fff; box-shadow:none; letter-spacing:inherit; } .service-intro-btn:active{ background:var(--dg-accent); opacity:.95; } .service-intro--text .service-intro-btn{ background:var(--dg-accent); color:#fff; box-shadow:none; } /* 「전체 아이디를 문자로 받기」·「더 보기」 — 둥글기 8 이던 것을 12 로 (가이드 §5 «버튼은 전부 12») */ .btn-outline, #page-reviews .rvall-more{ border-radius:var(--dg-radius-md); } /* ── ② 카드·팝업·칸 안 = 48 · 14/600 ──────────────────────────────── */ .checkout-coupon-btn, .app-modal-btn{ height:48px; min-height:48px; border-radius:var(--dg-radius-md); font-size:14px; font-weight:var(--fw-semibold); } /* ── ③ 글자만큼만 넓은 단추 = 알약 ────────────────────────────────── */ /* 홀로 서는 것 — 빈 화면 안내 (지금 모습 그대로 44) */ .empty-btn{ height:44px; border-radius:var(--dg-radius-full); font-size:16px; font-weight:var(--fw-bold); } /* 굵기는 알약 34 와 같은 700 */ /* 줄·띠·카드 안에 붙는 것 — 34 하나로 */ #page-today .tday-strip button, .sj-me .saju-cta button, .sj-me .saju-cta button.ghost, .profile-edit-btn{ height:34px; padding:0 15px; border-radius:var(--dg-radius-full); font-size:13px; font-weight:var(--fw-bold); } /* ⚠️ 연필 동그라미만 예외. 위 규칙의 좌우 여백 15 가 여기까지 내려와 34px 단추 속을 꽉 채우는 바람에 아이콘이 2px 로 찌그러져 안 보였다 (2026-09-10 고침). */ .sj-me .saju-cta button.icon{ width:34px; padding:0; } /* 내 정보의 「회원정보 수정 / 로그인」 — 네모 40 이던 것을 알약 34 로 */ .profile-edit-btn{ background:var(--dg-surface); border:1px solid var(--dg-divider); color:var(--dg-text-body); } /* ── ④ 입력칸 옆·고르는 칸 = 네모 12 · 입력칸과 같은 높이 ────────── */ .login-email-field input{ height:52px; padding:0 16px; } .btn-verify, .btn-coupon-register{ height:52px; min-height:52px; padding:0 16px; border-radius:var(--dg-radius-md); font-size:14px; font-weight:var(--fw-semibold); } .si-g{ height:48px; border-radius:var(--dg-radius-md); font-size:14px; font-weight:var(--fw-semibold); } /* 결과 다시보기에서 «어느 것»을 고르는 줄 — 둥글기 8 이던 것을 12 로 */ .rv-result-row{ border-radius:var(--dg-radius-md); } /* ── ⑤ 글씨만 있는 단추 = 14/500 · 회색 · 밑줄 없음 ───────────────── */ /* 가이드 §8 «전체 보기 ›»: 14 / 500 / #757575 한 가지 모양만. 밑줄은 기본 상태에서 쓰지 않는다. */ .withdraw-link, .pay-error-close, .storage-del-btn, .coupon-picker-clear, .storage-guest-text{ font-size:14px; font-weight:var(--fw-medium); color:#757575; text-decoration:none; } /* ── ⑥ 아이콘 단추 = 누르는 자리 44 (그림은 24 그대로) ───────────── */ /* 가이드 §18 «터치 영역 최소 44×44». 겉모습은 하나도 안 바뀐다 — 눌리는 네모만 커진다. ⚠️ 음수 여백은 «그림이 있던 자리»를 지키려는 것이다. 안 넣으면 아이콘이 10px 씩 안쪽으로 밀린다. */ .back-btn, .qr-back{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin-left:-10px; margin-right:-10px; } .sub-exit, .ql-exit, .qt-exit, .intake-back{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; } .sub-exit, .ql-exit{ margin-right:-10px; } .pw-eye{ width:44px; height:44px; } .sheet-head{ height:44px; } .sheet-close, .sheet-back, .sheet-sp, .coupon-picker-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; } /* ⚠️ display:flex 를 줬으니 hidden 도 다시 못박아야 한다 — 안 그러면 첫 걸음에서 ← 가 보인다 */ .sheet-back[hidden], .sheet-sp[hidden]{ display:none; } .sheet-close{ margin-right:-11px; } .sheet-back{ margin-left:-11px; }