@import url('https://fonts.googleapis.com/css2?family=Song+Myung&family=Gowun+Dodum&display=swap'); :root { --paper: #ede6d6; --paper-2: #e3dac4; --paper-3: #d9cdb0; --ink: #201d1a; --ink-soft: #57524a; --ink-faint: #857e70; --line: rgba(32, 29, 26, 0.14); --seal: #8B5E83; --seal-deep: #6B4460; --seal-tint: rgba(139, 94, 131, 0.1); --indigo: #2b4570; --indigo-tint: rgba(43, 69, 112, 0.12); --gold: #E8735B; --gold-tint: rgba(232, 115, 91, 0.14); --wood: #4c7a52; --fire: #c81e2c; --earth: #b98a3d; --metal: #8d8375; --water: #2b4570; --shadow: 0 1px 2px rgba(32, 24, 16, 0.06), 0 8px 24px -12px rgba(32, 24, 16, 0.22); --radius: 14px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #1b1712; --paper-2: #242019; --paper-3: #2f2a20; --ink: #ede4d2; --ink-soft: #c2b8a3; --ink-faint: #8d8371; --line: rgba(237, 228, 210, 0.14); --seal: #C48BB8; --seal-deep: #E3A8D9; --seal-tint: rgba(196, 139, 184, 0.16); --indigo: #7e9dd4; --indigo-tint: rgba(126, 157, 212, 0.16); --gold: #FF9478; --gold-tint: rgba(255, 148, 120, 0.18); --wood: #7fb086; --fire: #e6533f; --earth: #d9ae64; --metal: #b6ac9a; --water: #7e9dd4; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { --paper: #1b1712; --paper-2: #242019; --paper-3: #2f2a20; --ink: #ede4d2; --ink-soft: #c2b8a3; --ink-faint: #8d8371; --line: rgba(237, 228, 210, 0.14); --seal: #C48BB8; --seal-deep: #E3A8D9; --seal-tint: rgba(196, 139, 184, 0.16); --indigo: #7e9dd4; --indigo-tint: rgba(126, 157, 212, 0.16); --gold: #FF9478; --gold-tint: rgba(255, 148, 120, 0.18); --wood: #7fb086; --fire: #e6533f; --earth: #d9ae64; --metal: #b6ac9a; --water: #7e9dd4; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } /* (2026-08-24 추가) 연애 캐릭터/궁합 유형 카드가 뜰 때 모바일 화면이 좌우로 흔들린다는 피드백의 근본 원인은 카드 reveal 애니메이션이 transform: scale()+rotate()를 썼던 것 (아래 lcReveal도 함께 손봄)이었지만, 앞으로 비슷한 실수가 또 생겨도 페이지 자체가 가로로는 절대 안 밀리도록 뿌리에서 한 번 더 막아둔다. overflow-y는 그대로 두므로 세로 스크롤/좌표 기반 sticky(챕터 목차 탭 등)에는 영향이 없다. */ html, body { margin: 0; padding: 0; overflow-x: hidden; } /* 챕터형 리포트 목차(chapter-toc.blade.php)의 탭/목록 클릭이 자연스럽게 스크롤되도록. prefers-reduced-motion 사용자를 위한 처리는 아래 별도 미디어 쿼리에서 끔. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: radial-gradient(circle at 12% 8%, rgba(0,0,0,0.035) 0, transparent 40%), radial-gradient(circle at 85% 92%, rgba(0,0,0,0.035) 0, transparent 40%), var(--paper); color: var(--ink); font-family: 'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--seal-tint); } a { color: var(--seal); } .wrap { max-width: 780px; margin: 0 auto; padding: 40px 20px 100px; } /* ---------- 폰 프레임 레이아웃(PC/태블릿에서도 모바일 폭으로 고정) ---------- 소비자용 화면(홈/코인 충전/결제 완료/리포트함/리포트 상세)에만 붙는 한정 적용. 관리자 대시보드(/admin)는 표/그래프가 많아 넓은 화면이 유리해서 이 클래스를 의도적으로 붙이지 않았고, 기존 .wrap(780px, 좌우 중앙 정렬)이 그대로 적용됩니다. 640px 미만(실제 폰 화면)에서는 지금까지와 완전히 동일하게 보입니다 — 이 프레임 연출은 화면이 넓을 때만 켜지는 장식이라, 이미 좁은 화면에서는 아무 변화도 주지 않습니다. */ @media (min-width: 640px) { body.phone-app { display: flex; justify-content: center; padding: 40px 16px; min-height: 100vh; /* body 기본 배경(위 radial-gradient 장식)과 같은 결을 유지하되, 마지막 색만 한 톤 더 짙은 --paper-3로 바꿔서 그 위에 얹히는 .wrap(카드)이 배경과 구분돼 보이게 함. */ background: radial-gradient(circle at 12% 8%, rgba(0, 0, 0, 0.035) 0, transparent 40%), radial-gradient(circle at 85% 92%, rgba(0, 0, 0, 0.035) 0, transparent 40%), var(--paper-3); } body.phone-app .wrap { max-width: 440px; width: 100%; margin: 0; background: var(--paper); border-radius: 28px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line); } } /* ---------- Hero ---------- */ .hero { display: flex; align-items: center; gap: 22px; padding: 6px 4px 30px; border-bottom: 1px solid var(--line); margin-bottom: 28px; } .seal-mark { flex: none; width: 64px; height: 64px; } .hero-text h1 { font-family: 'Song Myung', serif; font-weight: 400; font-size: 2.6rem; letter-spacing: 0.04em; margin: 0 0 4px; color: var(--ink); text-wrap: balance; } .hero-text p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; } .hero-text .sub { font-size: 0.82rem; color: var(--ink-faint); margin-top: 6px; } /* ---------- 홈 랜딩페이지 히어로 (2026-08-25 추가) ---------- 계산기 화면의 .hero(좌측 인장+우측 텍스트, 가로 정렬)와 달리, 홈은 첫인상용 페이지라 인장을 위에 두고 슬로건을 가운데 정렬로 크게 보여준다 — myeongsado.com의 "중앙 정렬 대형 슬로건 + 단일 CTA" 구조를 참고하되 색/타이포는 결 palette 그대로. */ .home-hero { text-align: center; padding: 18px 4px 30px; border-bottom: 1px solid var(--line); margin-bottom: 24px; } .home-hero h1 { font-family: 'Song Myung', serif; font-weight: 400; font-size: 2rem; line-height: 1.4; letter-spacing: 0.02em; margin: 0 0 14px; color: var(--ink); } .home-hero p { margin: 0 auto 22px; max-width: 320px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; } .home-hero-cta { display: block; width: 100%; text-align: center; padding: 15px 20px; font-size: 1.02rem; } /* ---------- 홈 히어로: 도장이 "쾅" 찍히는 연출 (2026-08-25 3차 수정) ---------- 원래는 명사도의 "중앙 로고+네 노드 연결선" 구조를 네 기둥(년/월/일/시)으로 재해석해서 썼는데, 사용자가 ① 연결선이 가운데 인장의 투명한 안쪽을 그대로 뚫고 지나가 보이는 문제 ② 임팩트가 약하고 명사도와 구조가 너무 비슷하다는 점을 지적했다. 그래서 다이어그램을 걷어내고, 결의 기존 브랜드 모티프인 "도장(인장)"이 위에서 회전하며 떨어져 찍히는 순간 잉크 파동이 두 겹으로 번져나가는 연출로 바꿨다 — 명사도와는 전혀 다른 모션이라 비슷해 보이지 않는다. .home-hero-stamp는 정사각형 고정 박스(위치 기준점), 도장(.home-hero-center)과 파동 링(.home-hero-stamp-ring) 둘 다 이 박스 안에서 절대좌표로 중앙 정렬된다. 도장의 rect에 불투명 배경(fill: var(--paper))을 줘서, 링이 도장 뒤에서 시작해 바깥으로 번질 때 도장 안쪽으로 비쳐 보이지 않게 했다(전에 선이 인장 안쪽을 뚫고 지나가 보이던 것과 같은 문제를 방지). */ .home-hero-stamp { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; } .home-hero-center { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; z-index: 2; opacity: 0; transform-origin: 50% 50%; animation: homeStampDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* 시작(위에서 회전한 채 큼직하게) → 55%(살짝 통통 튀는 "쾅" 착지, 이 지점에 파동 링 타이밍을 맞춤) → 75%(가볍게 되튐) → 100%(정착). translate(-50%,-50%)를 매 스텝마다 같이 써줘야 중앙 정렬이 유지된다(transform 프로퍼티는 하나만 남기면 앞 값이 사라짐). */ @keyframes homeStampDrop { 0% { opacity: 0; transform: translate(-50%, -50%) translateY(-42px) rotate(-12deg) scale(1.18); } 55% { opacity: 1; transform: translate(-50%, -50%) translateY(3px) rotate(1.5deg) scale(1.05); } 75% { opacity: 1; transform: translate(-50%, -50%) translateY(-2px) rotate(-0.5deg) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, -50%) translateY(0) rotate(0deg) scale(1); } } .home-hero-stamp-ring { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; border: 1.5px solid var(--seal); z-index: 1; opacity: 0; animation: homeStampRing 0.65s ease-out forwards; /* 도장이 착지하는 지점(약 0.33s, 위 keyframe의 55%)에 맞춰 파동이 시작되게 함 */ animation-delay: 0.33s; } .home-hero-stamp-ring--2 { border-color: var(--gold); animation-delay: 0.42s; } @keyframes homeStampRing { 0% { opacity: 0.6; transform: scale(0.55); } 100% { opacity: 0; transform: scale(2.3); } } /* ---------- 홈 히어로: 스포트라이트 + 스태거드 리빌 (2026-08-25 4차 수정) ---------- 사용자가 스크린샷에 빨간 박스로 표시한 영역(도장+제목+부제+버튼+안내문구) 전체에 애니메이션을 원해서, 도장 하나만 움직이던 것에서 히어로 전체가 함께 "깨어나는" 연출로 확장했다. 두 겹으로 구성된다. ① .home-hero 자체에 거는 "조명이 켜지는" 스윕 — 시작 시 아주 잠깐 어둡고(brightness 낮춤) 흐릿하게(blur) 살짝 작게(scale) 있다가 0.45초에 걸쳐 정상으로 돌아온다. 완전히 안 보이는 상태가 아니라 "어둑했다가 밝아지는" 정도라 콘텐츠가 아예 숨는 건 아니다. ② 제목→부제→버튼→안내문구가 도장이 착지하는 시점(약 0.33~0.42초) 직후부터 80ms 간격으로 아래에서 살짝 떠오르며 나타난다(Linear.app/Stripe.com 로드 리듬 참고). 버튼(.home-hero-cta)은 직접 애니메이션을 걸지 않고 감싸는 .home-hero-cta-wrap에 걸었다 — 에 transform 애니메이션을 forwards로 걸면 그 뒤로 .btn:active { transform: scale(0.98) } 같은 클릭 피드백이 눌러도 안 먹는 문제가 생기기 때문(애니메이션이 fill-mode:forwards로 transform을 계속 붙잡고 있어서 일반 규칙의 transform이 덮어써지지 않음). */ .home-hero { animation: homeHeroWake 0.45s ease-out both; } @keyframes homeHeroWake { from { filter: brightness(0.55) blur(5px); transform: scale(0.965); } to { filter: brightness(1) blur(0); transform: scale(1); } } .home-hero h1, .home-hero p, .home-hero-cta-wrap, .home-hero-hint { opacity: 0; transform: translateY(14px); animation: homeTextUp 0.5s ease-out forwards; } .home-hero h1 { animation-delay: 0.42s; } .home-hero p { animation-delay: 0.50s; } .home-hero-cta-wrap { animation-delay: 0.58s; } .home-hero-hint { animation-delay: 0.66s; } @keyframes homeTextUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .home-hero-center, .home-hero-stamp-ring { animation: none; opacity: 1; } .home-hero-center { transform: translate(-50%, -50%); } .home-hero-stamp-ring { display: none; } .home-hero { animation: none; filter: none; transform: none; } .home-hero h1, .home-hero p, .home-hero-cta-wrap, .home-hero-hint { animation: none; opacity: 1; transform: none; } } /* ---------- 홈 "왜 결인가요" 섹션 전용 (2026-08-25 5차 추가) ---------- report-trust-grid(결제 CTA 아래 붙는 작은 신뢰 배지)를 재활용했다가, 홈페이지 정식 섹션치고는 아이콘/글자가 작고 여백이 빡빡해서 가독성·전문성이 떨어진다는 피드백을 받고 홈 전용으로 분리했다. 아이콘을 색이 있는 뱃지 안에 넣어서(이모지 단독보다 "디자인된 컴포넌트"처럼 보이게) Stripe/Linear류 SaaS 사이트의 기능 카드 처리 방식을 참고했고, 카드 padding과 글자 크기를 report-trust보다 한 단계 키웠다. 제목 색은 일부러 seal 강조색을 안 쓰고 var(--ink)로 중립적으로 뒀다 — 아이콘 뱃지 하나로만 포인트 컬러를 주는 게 네 칸 전부 핑크 제목보다 더 정돈되어 보인다. */ .home-feature-kicker { font-size: 0.78rem; font-weight: 700; /* (2026-08-25 6차 수정) 원래 영문 킥커("WHY 결")를 염두에 두고 letter-spacing:0.12em + uppercase로 만들었는데, 한글 킥커("결의 차별점")로 바뀌면서 그 정도 자간은 한글에서 과하게 벌어져 보인다. 자간을 줄이고 uppercase는 한글에 의미가 없어서 제거했다. */ letter-spacing: 0.02em; color: var(--seal); margin-bottom: 6px; } .home-feature-intro { color: var(--ink-soft); font-size: 0.88rem; margin: -6px 0 18px; } .home-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .home-feature-item { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; } .home-feature-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--seal-tint); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 12px; } .home-feature-head { font-weight: 700; color: var(--ink); font-size: 0.98rem; margin-bottom: 5px; } .home-feature-desc { color: var(--ink-soft); font-size: 0.84rem; line-height: 1.55; } @media (max-width: 380px) { .home-feature-grid { grid-template-columns: 1fr; } } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 6px; margin-bottom: 26px; border-bottom: 1px solid var(--line); } .tab-btn { appearance: none; background: none; border: none; font-family: 'Gowun Dodum', sans-serif; font-size: 0.95rem; color: var(--ink-faint); padding: 10px 4px 12px; margin-right: 22px; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .tab-btn:hover { color: var(--ink); } .tab-btn.active { color: var(--seal); border-bottom-color: var(--seal); font-weight: 700; } .panel { display: none; } .panel.active { display: block; animation: fadeIn 0.25s ease; } /* (2026-08-25 추가) /calculator에 ?tab=으로 들어왔을 때 히어로/탭 스트립을 시각적으로만 숨긴다. DOM에서 완전히 지우면 안 되는데, activateTabFromQuery()가 .tab-btn을 찾아 .click()을 호출해 탭 전환 로직을 그대로 재사용하기 때문이다(app.js 참고). */ .is-hidden { display: none !important; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Cards / form ---------- */ .card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 20px; } .card h2 { font-family: 'Song Myung', serif; font-weight: 400; font-size: 1.3rem; margin: 0 0 14px; letter-spacing: 0.01em; } .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 12px; } label { display: block; font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 5px; letter-spacing: 0.02em; } input[type="number"], input[type="text"], select { width: 100%; font-family: 'Gowun Dodum', sans-serif; font-size: 0.95rem; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; } input:focus, select:focus, button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; } .check-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; font-size: 0.86rem; color: var(--ink-soft); } .check-row input { width: auto; } .btn { appearance: none; border: none; border-radius: 999px; padding: 11px 26px; font-family: 'Gowun Dodum', sans-serif; font-size: 0.95rem; font-weight: 700; cursor: pointer; background: var(--seal); color: #fbf3e9; box-shadow: 0 6px 16px -6px var(--seal-tint); transition: transform 0.12s ease, background 0.15s ease; } .btn:hover { background: var(--seal-deep); } .btn:active { transform: scale(0.98); } .btn.outline { background: transparent; color: var(--seal-deep); border: 1.6px solid var(--seal); box-shadow: none; } .btn.outline:hover { background: var(--seal-tint); } .btn.secondary { background: transparent; color: var(--indigo); border: 1px solid var(--indigo); box-shadow: none; } .btn.secondary:hover { background: var(--indigo-tint); } /* (2026-08-24 추가) 리포트 결제 버튼 전용 — 다른 곳의 .btn(공유하기/폼 제출 등)과 크기가 같아서 화면에서 눈에 잘 안 띈다는 피드백에 대응. 가로 폭을 꽉 채우고, 글자/여백을 키우고, 그라데이션 + 은은하게 커졌다 작아졌다 하는 그림자 펄스로 "지금 눌러야 할 버튼"이라는 걸 시각적으로 확실히 구분해준다. */ .btn-buy { display: block; width: 100%; padding: 15px 20px; font-size: 1.02rem; border-radius: 14px; background: linear-gradient(135deg, var(--seal), var(--seal-deep)); box-shadow: 0 10px 24px -8px var(--seal); animation: btn-buy-pulse 2.6s ease-in-out infinite; } .btn-buy:hover { background: linear-gradient(135deg, var(--seal), var(--seal-deep)); filter: brightness(1.05); } @keyframes btn-buy-pulse { 0%, 100% { box-shadow: 0 10px 24px -8px var(--seal); } 50% { box-shadow: 0 12px 30px -6px var(--seal-deep); } } @media (prefers-reduced-motion: reduce) { .btn-buy { animation: none; } } .btn-center { display: block; width: fit-content; margin: 18px auto 0; } .hint { font-size: 0.78rem; color: var(--ink-faint); margin-top: -4px; margin-bottom: 14px; } /* ---------- 사주 명식표 ---------- */ .myeongsik { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 6px; } .pillar { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; text-align: center; padding: 10px 4px 12px; } .pillar .role { font-size: 0.72rem; color: var(--ink-faint); margin-bottom: 6px; letter-spacing: 0.04em; } .pillar .hanja { font-family: 'Song Myung', serif; font-size: 1.9rem; line-height: 1.15; } .pillar .hangul { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; } .pillar .stem-el { color: var(--el-color, var(--ink)); } .pillar .branch-el { color: var(--el-color2, var(--ink)); } .el-목 { --el-color: var(--wood); } .el-화 { --el-color: var(--fire); } .el-토 { --el-color: var(--earth); } .el-금 { --el-color: var(--metal); } .el-수 { --el-color: var(--water); } .day-note { text-align: center; font-size: 0.75rem; color: var(--ink-faint); margin-bottom: 18px; } /* ---------- 오행 바 ---------- */ .oheang-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; } .oheang-row { display: grid; grid-template-columns: 52px 1fr 24px; align-items: center; gap: 10px; font-size: 0.84rem; } .oheang-row .lab { color: var(--ink-soft); } .oheang-track { height: 9px; border-radius: 999px; background: var(--paper-3); overflow: hidden; } .oheang-fill { height: 100%; border-radius: 999px; } .oheang-row .cnt { text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* ---------- 결과 텍스트 ---------- */ .result-block { margin-top: 6px; } .result-block h3 { font-size: 0.98rem; margin: 18px 0 6px; color: var(--ink); display: flex; align-items: center; gap: 8px; } .result-block h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--seal); flex: none; } .result-block p { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.92rem; } .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; padding: 5px 12px; border-radius: 999px; background: var(--gold-tint); color: var(--gold); border: 1px solid var(--gold-tint); } .badge.seal { background: var(--seal-tint); color: var(--seal); } .badge.indigo { background: var(--indigo-tint); color: var(--indigo); } /* ---------- 궁합 ---------- */ /* (2026-08-24 수정) 예전엔 뷰포트 560px 이상에서 A/B를 좌우 2열로 배치했는데, 18단계에서 도입한 "폰 프레임"(body.phone-app, 640px 이상에서 .wrap을 440px로 고정) 때문에 실제 사용 가능한 폭은 항상 440px 안팎이라 2열이면 한 칸이 200px 남짓으로 너무 좁아져서 입력 필드가 답답해 보였음(21단계에서 고친 .rpt-os-grid 카드 레이아웃 버그와 같은 종류의 문제). 사용자 피드백으로도 위/아래가 낫다고 판단해서 항상 1열(세로 스택)로 고정. */ .compat-people { display: grid; grid-template-columns: 1fr; gap: 20px; } .compat-person { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 20px 16px 16px; } .compat-person-label { position: absolute; top: -11px; left: 14px; background: var(--indigo); color: #fbf3e9; font-family: 'Gowun Dodum', sans-serif; font-size: 0.72rem; font-weight: 700; line-height: 1; padding: 4px 11px; border-radius: 999px; } .compat-person-b .compat-person-label { background: var(--seal); } .compat-score-wrap { text-align: center; padding: 18px 10px 6px; } .compat-score { font-family: 'Song Myung', serif; font-size: 3.2rem; color: var(--seal); line-height: 1; } .compat-score span { font-size: 1.3rem; color: var(--ink-faint); font-family: 'Gowun Dodum', sans-serif; } .compat-score-label { color: var(--ink-soft); font-size: 0.85rem; margin-top: 6px; } /* (2026-08-24 추가) 궁합 폼의 "현재 관계 단계 / 지금 가장 궁금한 것" 선택 UI — 명사도 같은 경쟁사의 정밀 맞춤 인테이크 화면을 참고해서, 프리미엄 궁합분석 리포트가 관계 단계(썸/ 커플/부부/헤어짐)와 관심사(지속가능성/관계발전/앞으로흐름/충돌완화)에 맞춰 쓰이도록 선택값을 받는다(app.js가 클릭으로 단일 선택 토글, reports.js buildTwoPersonInput이 relationshipStage/primaryConcern/concernDetail로 전송, CompatibilityReportType.php가 프롬프트에 반영). 결과 자체가 아니라 입력 폼이라 나의 연애 사주 폼과 같은 --paper 카드 톤을 그대로 씀(경쟁사처럼 어두운 별도 테마를 쓰지 않음 — 우리 브랜드 일관성 유지). */ .compat-context { margin-top: 22px; } .compat-context-label { font-weight: 700; color: var(--ink); font-size: 0.92rem; margin: 18px 0 4px; } .compat-context-label:first-child { margin-top: 0; } .compat-context-optional { font-weight: 400; color: var(--ink-faint); font-size: 0.78rem; } .compat-context-hint { color: var(--ink-faint); font-size: 0.8rem; margin-bottom: 10px; } .compat-stage-row { display: flex; flex-wrap: wrap; gap: 8px; } .compat-stage-chip { flex: 1 1 auto; min-width: 70px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); font-family: 'Gowun Dodum', sans-serif; font-size: 0.86rem; font-weight: 600; text-align: center; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .compat-stage-chip:hover { border-color: var(--seal); } .compat-stage-chip.active { background: var(--seal); border-color: var(--seal); color: #fbf3e9; } .compat-concern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .compat-concern-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .compat-concern-card:hover { border-color: var(--seal); } .compat-concern-card.active { background: var(--seal-tint); border-color: var(--seal); } .compat-concern-icon { font-size: 1.2rem; line-height: 1; } .compat-concern-title { font-weight: 700; color: var(--ink); font-size: 0.86rem; } .compat-concern-desc { color: var(--ink-faint); font-size: 0.74rem; line-height: 1.4; } #c-concern-detail { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: 'Gowun Dodum', sans-serif; font-size: 0.86rem; } @media (max-width: 420px) { .compat-concern-grid { grid-template-columns: 1fr; } } /* (2026-08-24 추가, 2026-08-25 궁합→연애운분석까지 공유하도록 클래스명을 report-teaser로 일반화) 무료 결과 화면의 "실제 콘텐츠 일부 공개" 티저(app.js startChapterPreview/ renderTeaserContent, 원래 이름 startCompatPreview) — 결제 전에 리포트 첫 챕터를 실제로 생성해서, concern_answer(있으면)는 완전 공개하고 paragraphs 1번째도 완전 공개, 나머지는 진짜 텍스트를 그대로 둔 채 .report-teaser-fade로 시각적으로만 블러 처리한다(더미 텍스트 아님 — 결제 후에도 같은 내용이 그대로 이어짐). 궁합분석 (compat_overview)과 연애운분석(origin_profile) 둘 다 이 컴포넌트를 그대로 쓴다. */ .report-teaser { margin-top: 20px; } .report-teaser-label { font-weight: 700; color: var(--ink); font-size: 0.92rem; margin-bottom: 10px; } .report-teaser-loading { padding: 4px 0 2px; } .report-teaser-loading-row { display: flex; align-items: center; gap: 9px; color: var(--ink-faint); font-size: 0.84rem; margin-bottom: 14px; } .report-teaser-spinner { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--paper-3); border-top-color: var(--seal); animation: report-teaser-spin 0.8s linear infinite; } @keyframes report-teaser-spin { to { transform: rotate(360deg); } } /* 실제 콘텐츠가 들어올 자리 모양을 미리 잡아두는 스켈레톤 — 로딩 중에도 "지금 뭔가 만들어지고 있다"는 실감을 주고, 콘텐츠가 도착했을 때 레이아웃이 갑자기 위아래로 튀지 않도록(스켈레톤 높이 ≈ 실제 콘텐츠 높이) 완충 역할도 한다. */ .report-teaser-skeleton { display: flex; flex-direction: column; gap: 8px; } .report-teaser-skel-block, .report-teaser-skel-line { border-radius: 8px; background: linear-gradient(90deg, var(--paper-3) 25%, var(--paper-2) 37%, var(--paper-3) 63%); background-size: 400% 100%; animation: report-teaser-shimmer 1.6s ease infinite; } .report-teaser-skel-block { height: 64px; border-radius: 12px; margin-bottom: 2px; } .report-teaser-skel-line { height: 12px; } @keyframes report-teaser-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .report-teaser-spinner { animation: none; } .report-teaser-skel-block, .report-teaser-skel-line { animation: none; } } .report-teaser-cta { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--seal-tint); color: var(--seal); font-size: 0.8rem; font-weight: 600; text-align: center; } /* 실제 텍스트(rpt-p) 위에 blur + 그라데이션 마스크를 얹어서 "읽다가 흐려지는" 느낌을 낸다 — backdrop-filter로 블러를 만들고, mask-image로 위쪽(투명, 안 흐림)에서 아래쪽(불투명, 완전히 흐림)까지 자연스럽게 번지게 한다. 콘텐츠 자체는 실제 생성된 그대로라(더미 아님) 결제 후에도 이 블러만 벗겨지고 내용은 안 바뀐다. */ .report-teaser-fade { position: relative; max-height: 130px; overflow: hidden; } .report-teaser-fade::after { content: ''; position: absolute; inset: 0; -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 30%, #000 75%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 30%, #000 75%); } .report-teaser-fade::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--paper-2)); pointer-events: none; } /* ---------- 연애 캐릭터 카드 / 궁합 유형 카드 (love-character.js, compat-character.js) ---------- (2026-08-24 전면 개정) 원래는 어두운 그라디언트 배경 + 네온 글로우 + 굵은 포스터체(Black Han Sans)를 쓰는 "모바일 게임 카드" 톤이었는데, 사이트 나머지(종이색 --paper, 먹색 --ink, 인주색 --seal, 세리프 Song Myung 헤딩)와 결이 너무 달라 "튄다"는 피드백을 받았다. 그래서 다른 프리미엄 리포트 블록(.rpt-quote/.rpt-os-card/.rpt-advice-card 등)과 같은 문법 — 종이 배경 + 가는 --line 보더 + 포인트만 오행/관계 색(--lc-accent, JS가 --wood/--fire/ --seal 같은 사이트 전역 변수를 그대로 물려줌) — 으로 다시 그렸다. 라이트/다크 테마 전환도 다른 카드들처럼 자동으로 따라간다. 또한 예전 reveal 애니메이션이 transform: scale()+rotate()를 썼는데, 회전된 박스의 "스크롤 가능 오버플로" 영역이 모바일에서 순간적으로 뷰포트 폭을 넘어서면서 카드가 뜰 때 화면이 좌우로 흔들리는 원인이었다(모바일 스크롤 wobble 피드백). translateY 페이드로 바꿔서 애초에 가로 방향으로 튀어나올 여지를 없앴고, html/body의 overflow-x: hidden(위 전역 규칙)까지 이중으로 막아둔다. */ .lc-card { position: relative; border-radius: 20px; padding: 22px 20px 20px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 18px; animation: lcReveal 0.45s ease both; } /* 카드 색 정체성 — 진한 배경 대신, 모서리에 오행/관계 색을 아주 은은하게 번지는 먹빛 번짐(블롭)으로만 표시한다. 채도를 낮게 두려고 opacity를 옅게 줬다. */ .lc-card::before { content: ''; position: absolute; top: -35%; right: -25%; width: 65%; height: 130%; background: var(--lc-accent, var(--seal)); opacity: 0.1; filter: blur(46px); pointer-events: none; } @keyframes lcReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .lc-topline { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; position: relative; z-index: 1; } .lc-kicker { font-size: 0.7rem; letter-spacing: 0.06em; font-weight: 700; color: var(--ink-faint); background: var(--paper-3); padding: 5px 12px; border-radius: 999px; } .lc-rarity { font-size: 0.92rem; letter-spacing: 0.04em; color: var(--gold); } .lc-greet { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 2px; position: relative; z-index: 1; } .lc-type { font-family: 'Song Myung', serif; font-weight: 400; font-size: clamp(1.5rem, 6vw, 1.9rem); line-height: 1.3; margin: 0 0 14px; color: var(--ink); position: relative; z-index: 1; } .lc-attr-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; position: relative; z-index: 1; } .lc-attr-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); padding: 6px 13px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; } .lc-oneliner { background: var(--paper); border-left: 3px solid var(--lc-accent, var(--seal)); border-radius: 0 12px 12px 0; padding: 13px 16px; font-size: 0.94rem; line-height: 1.65; color: var(--ink); margin-bottom: 16px; position: relative; z-index: 1; } .lc-oneliner span { display: block; } .lc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; position: relative; z-index: 1; } .lc-tag { font-size: 0.72rem; background: var(--paper-3); padding: 5px 10px; border-radius: 999px; color: var(--ink-soft); } .lc-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; margin-bottom: 12px; position: relative; z-index: 1; } .lc-panel:last-of-type { margin-bottom: 0; } .lc-panel-title { font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-faint); margin-bottom: 12px; } .lc-stat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; } .lc-stat-row:last-child { margin-bottom: 0; } .lc-stat-label { width: 62px; flex: none; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); } .lc-stat-track { flex: 1; height: 9px; border-radius: 999px; background: var(--paper-3); overflow: hidden; } .lc-stat-fill { height: 100%; border-radius: 999px; background: var(--lc-accent, var(--seal)); } .lc-stat-value { width: 28px; flex: none; text-align: right; font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--ink-faint); } .lc-stat-row--signature .lc-stat-label { color: var(--gold); } .lc-stat-row--signature .lc-stat-fill { background: var(--gold); } .lc-trait-title, .lc-weakness-title { font-weight: 700; font-size: 0.96rem; margin: 2px 0 4px; color: var(--ink); } .lc-trait-desc, .lc-weakness-desc { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.6; } .lc-trait-label, .lc-weakness-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 4px; } .lc-weakness { border-left: 3px solid var(--fire); } .lc-skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lc-skill { background: var(--paper-3); border-radius: 12px; padding: 12px 12px; } .lc-skill-name { font-size: 0.82rem; font-weight: 700; margin-bottom: 4px; color: var(--ink); } .lc-skill-name::before { content: '✦ '; color: var(--lc-accent, var(--seal)); } .lc-skill-desc { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.5; } .lc-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 0.68rem; color: var(--ink-faint); position: relative; z-index: 1; } /* 캐릭터 카드 바로 아래 "이 카드 공유하기" 버튼 줄 */ .lc-share-row { margin: 6px 0 20px; text-align: center; } /* 공유용 캡처(reports.js renderCharacterCardShare)에서만 카드 맨 아래에 덧붙는 유입 유도 문구. 온페이지에 실제로 보이는 .lc-card에는 렌더링되지 않고, 캡처 직전 복제본에만 추가됨. */ .lc-share-footer { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); text-align: center; position: relative; z-index: 1; } .lc-share-footer-cta { font-family: 'Song Myung', serif; font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; } .lc-share-footer-host { font-size: 0.72rem; letter-spacing: 0.03em; color: var(--ink-faint); } @media (max-width: 420px) { .lc-skill-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .lc-card { animation: none; } } /* 캐릭터 카드 아래 "자세한 사주 풀이" 접이식 섹션 */ .saju-detail-toggle { margin-top: 4px; } .saju-detail-toggle > summary { cursor: pointer; font-weight: 700; font-size: 0.86rem; color: var(--ink-soft); padding: 10px 4px; } .saju-detail-toggle > summary:hover { color: var(--seal); } .saju-detail-toggle .card { margin-top: 8px; } /* ---------- 상담 가이드 ---------- */ .concern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 4px 0 18px; } .concern-chip { appearance: none; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px; cursor: pointer; font-family: 'Gowun Dodum', sans-serif; color: var(--ink); font-size: 0.88rem; transition: border-color 0.15s ease, background 0.15s ease; } .concern-chip:hover { border-color: var(--seal); } .concern-chip.active { background: var(--seal-tint); border-color: var(--seal); color: var(--seal-deep); font-weight: 700; } .guide-card { border-left: 3px solid var(--seal); padding: 4px 0 4px 16px; } .guide-card .field-label { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 14px 0 4px; } .guide-card .field-label:first-child { margin-top: 2px; } .guide-card p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; } .stamp { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1.6px solid var(--seal); border-radius: 6px; color: var(--seal); font-family: 'Song Myung', serif; font-size: 0.95rem; transform: rotate(-4deg); flex: none; } .placeholder-note { background: var(--indigo-tint); border: 1px dashed var(--indigo); border-radius: 10px; padding: 12px 14px; font-size: 0.82rem; color: var(--ink-soft); margin-top: 18px; } /* 리포트 생성 대기 화면(pending.blade.php)의 원형 게이지 — 실제 진행률이 아니라 예상 소요 시간을 기준으로 한 시각적 진행 표시(가짜 진행률)입니다. 원 전체가 천천히 계속 회전(rpt-gauge-spin)하면서, 안쪽 링(rpt-gauge-fill)은 진행률만큼 키컬러로 채워져서 "차오르는 원이 빙글빙글 도는" 느낌을 줍니다. */ .rpt-gauge { position: relative; width: 128px; height: 128px; margin: 18px auto 0; } .rpt-gauge-spin { width: 100%; height: 100%; animation: rpt-gauge-spin 3.2s linear infinite; } @keyframes rpt-gauge-spin { to { transform: rotate(360deg); } } .rpt-gauge-svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .rpt-gauge-track { fill: none; stroke: var(--paper-3); stroke-width: 9; } .rpt-gauge-fill { fill: none; stroke: var(--seal); stroke-width: 9; stroke-linecap: round; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease; } .rpt-gauge-percent { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .rpt-gauge-spin { animation: none; } } /* (2026-08-24 추가) 챕터형 리포트 "생성 중" 화면(chapter-progress.blade.php)의 진행 단계 체크리스트 — 경쟁사(명사도)가 "두 분의 명식을 펼칩니다 / 만세력을 분석합니다 …" 식으로 단계별 문구를 보여주는 것을 참고했다. 다만 가짜 타이머가 아니라 실제 챕터 완료율 (completed+failed)/total 구간에 맞춰 체크(✓)/진행중(●)/대기(○) 상태를 계산해서 보여준다 — "전문적으로 집중 탐구하는 느낌"을 실제 진행 상황과 어긋나지 않게 준다. */ .progress-steps { margin-top: 18px; text-align: left; } .progress-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; } .progress-step-icon { flex: none; width: 20px; text-align: center; font-size: 0.9rem; line-height: 1.5; color: var(--ink-faint); } .progress-step.done .progress-step-icon { color: var(--wood); } .progress-step.active .progress-step-icon { color: var(--seal); animation: progress-step-pulse 1.4s ease-in-out infinite; } .progress-step-body { flex: 1; min-width: 0; } .progress-step-title { font-size: 0.86rem; color: var(--ink-faint); line-height: 1.5; } .progress-step.done .progress-step-title { color: var(--ink-soft); } .progress-step.active .progress-step-title { color: var(--ink); font-weight: 700; } .progress-step-desc { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5; margin-top: 3px; } @keyframes progress-step-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .progress-step.active .progress-step-icon { animation: none; } } .empty-state { color: var(--ink-faint); font-size: 0.88rem; padding: 10px 2px 4px; } /* ---------- 결제 완료 페이지 ---------- */ .complete-badge { width: 56px; height: 56px; border-radius: 50%; background: var(--wood); color: #fbf3e9; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 14px; box-shadow: 0 6px 16px -6px rgba(76, 122, 82, 0.4); } .complete-title { text-align: center; margin-bottom: 26px; } .complete-title h2 { margin-bottom: 6px; } .complete-title p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; } .receipt { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 4px 16px; margin-bottom: 18px; } .receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 0.9rem; } .receipt-row + .receipt-row { border-top: 1px dashed var(--line); } .receipt-row dt { color: var(--ink-faint); } .receipt-row dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .receipt-row.total dd { color: var(--seal-deep); font-size: 1.02rem; } .complete-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } /* ---------- 심층/궁합 프리미엄 리포트 ---------- */ /* (2026-08-24 수정) 결제 버튼이 다른 버튼들과 똑같은 크기/색이라 눈에 잘 안 띈다는 피드백에 대응해, CTA 영역 전체를 점선 구분선짜리 텍스트 블록에서 은은한 카드형 "구매존"으로 바꿨다 — 배경 틴트 + 라운드 보더 + 그림자로 화면에서 시선이 멈추는 지점을 만든다. */ .report-cta { margin-top: 20px; padding: 22px 18px 20px; border-radius: 18px; background: linear-gradient(180deg, var(--seal-tint), transparent 65%); border: 1px solid var(--seal-tint); box-shadow: 0 12px 28px -18px var(--seal); text-align: center; } .report-cta-headline { margin: 0 0 14px; font-size: 0.98rem; font-weight: 700; color: var(--ink); } /* (2026-08-24 추가) 결제 버튼 바로 아래 붙는 신뢰 배지 4칸 그리드 — 경쟁사(명사도)가 "4대 학파 교차판독 / 6중 멀티 엔진 검증" 식으로 과장된 방법론을 내세우는 것과 달리, 우리가 실제로 만든 기능(20챕터 심층 분석/1~2분 완성/챕터별 자동 재시도/평생 소장)만 정직하게 카드로 보여준다(reports.js buildTrustBadges). */ .report-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; text-align: left; } .report-trust-item { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 13px; } .report-trust-icon { font-size: 1.15rem; line-height: 1; margin-bottom: 6px; } .report-trust-head { font-weight: 700; color: var(--seal-deep); font-size: 0.84rem; margin-bottom: 3px; } .report-trust-desc { color: var(--ink-faint); font-size: 0.74rem; line-height: 1.45; } @media (max-width: 380px) { .report-trust-grid { grid-template-columns: 1fr; } } /* 결제 전 "목차 미리보기" — .chapter-toc-*(구매 후 실제 목차)와 같은 시각 언어를 재사용하되, 링크가 아니라 잠금 아이콘이 달린 정적 목록이라 별도 클래스로 둔다. */ .report-toc-toggle { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); text-align: left; } .report-toc-toggle > summary { cursor: pointer; font-weight: 700; font-size: 0.86rem; color: var(--ink-soft); padding: 6px 4px; } .report-toc-toggle > summary:hover { color: var(--seal); } .report-toc-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .report-toc-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: 10px; } .report-toc-item:hover { background: var(--paper-2); } .report-toc-num { flex: none; width: 22px; padding-top: 1px; font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--seal); } .report-toc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .report-toc-title { font-size: 0.86rem; font-weight: 600; color: var(--ink); } .report-toc-teaser { font-size: 0.76rem; color: var(--ink-faint); line-height: 1.5; } .report-toc-lock { flex: none; align-self: center; font-size: 0.8rem; opacity: 0.55; } /* 결제 전 FAQ — .saju-detail-toggle과 같은 접이식 시각 언어를 재사용. */ .report-faq { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); text-align: left; } .report-faq-title { font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; } .report-faq-item { border-top: 1px solid var(--line); padding: 2px 0; } .report-faq-item:last-child { border-bottom: 1px solid var(--line); } .report-faq-item > summary { cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--ink); padding: 10px 4px; } .report-faq-item > summary:hover { color: var(--seal); } .report-faq-item p { margin: 0 0 12px; padding: 0 4px; font-size: 0.82rem; line-height: 1.6; color: var(--ink-faint); } .report-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.8rem; color: var(--ink-faint); margin-bottom: 18px; } .report-body h3 { font-family: 'Song Myung', serif; font-weight: 400; font-size: 1.08rem; color: var(--seal-deep); margin: 22px 0 8px; } .report-body h3:first-child { margin-top: 0; } .report-body p { margin: 0 0 10px; line-height: 1.75; font-size: 0.92rem; } .report-body ul { margin: 0 0 10px; padding-left: 20px; line-height: 1.75; font-size: 0.92rem; } .report-list { display: flex; flex-direction: column; gap: 8px; } .share-card-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; } .share-preview { margin-top: 16px; text-align: center; } .share-preview img { max-width: 260px; width: 100%; border-radius: 10px; box-shadow: var(--shadow); border: 1px solid var(--line); } .login-gate-inline { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } /* ---------- 심층 연애 리포트 — 구조화 JSON 렌더링(reports/partials/single-report) ---------- */ .rpt { margin-top: 4px; } .rpt-section { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--line); } .rpt-section:first-child { margin-top: 8px; padding-top: 0; border-top: none; } .rpt-section-title { font-family: 'Song Myung', serif; font-weight: 400; font-size: 1.05rem; color: var(--seal-deep); margin: 0 0 12px; } .rpt-p { margin: 0 0 10px; line-height: 1.75; font-size: 0.92rem; color: var(--ink-soft); } .rpt-quote { background: var(--paper); border-left: 3px solid var(--seal); border-radius: 0 12px 12px 0; padding: 12px 16px; font-size: 0.94rem; line-height: 1.7; color: var(--ink); margin-top: 10px; } .rpt-quote--final { border-left-color: var(--gold); font-weight: 600; } /* concern_answer 블록 — 궁합 폼에서 사용자가 직접 선택/입력한 "가장 궁금한 것"에 대한 직접적인 답을 강조하는 카드. compat_overview(첫 챕터) 맨 위에서만 쓰인다. */ .rpt-concern-answer { background: var(--gold-tint); border: 1px solid var(--gold); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; } .rpt-concern-answer-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: var(--gold); margin-bottom: 6px; } .rpt-concern-answer-question { font-family: 'Song Myung', serif; font-size: 0.92rem; color: var(--ink); margin-bottom: 8px; line-height: 1.5; } .rpt-concern-answer-body { font-size: 0.88rem; line-height: 1.7; color: var(--ink-soft); } .rpt-character-link { background: var(--seal-tint); border-radius: 14px; padding: 16px; border-top: none; margin-top: 20px; } .rpt-character-link .rpt-p { color: var(--ink); } /* LOVE SCORE / COMPATIBILITY 게이지 바 — 오행 바(.oheang-*)와 같은 시각 언어 재사용 */ .rpt-score-list { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; } .rpt-score-row { display: grid; grid-template-columns: 84px 1fr 30px; align-items: center; gap: 10px; font-size: 0.82rem; } .rpt-score-label { color: var(--ink-soft); } .rpt-score-track { height: 9px; border-radius: 999px; background: var(--paper-3); overflow: hidden; } .rpt-score-fill { height: 100%; border-radius: 999px; background: var(--gold); } .rpt-score-fill--indigo { background: var(--indigo); } .rpt-score-row .rpt-score-value { text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* LOVE OS / WHO ATTRACTS YOU / PARTNER'S VIEW 카드 그리드 */ .rpt-os-grid, .rpt-attract-grid, .rpt-partner-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .rpt-os-card, .rpt-attract-card, .rpt-partner-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .rpt-os-title { font-size: 0.86rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .rpt-os-line { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; margin-top: 4px; } .rpt-os-line span { display: inline-block; font-size: 0.68rem; font-weight: 700; color: var(--seal); background: var(--seal-tint); border-radius: 6px; padding: 1px 6px; margin-right: 6px; vertical-align: middle; } /* LOVE SIGNAL */ /* STRENGTH / WEAKNESS */ .rpt-sw-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 10px; } .rpt-sw-line { font-size: 0.88rem; line-height: 1.65; color: var(--ink-soft); margin-top: 6px; } .rpt-sw-line:first-child { margin-top: 0; } .rpt-sw-line span { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 2px; } .rpt-sw-strength span { color: var(--gold); } .rpt-sw-escalation span { color: var(--ink-faint); } .rpt-sw-weakness span { color: var(--seal); } /* RECURRING PATTERN */ .rpt-pattern-flow { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .rpt-pattern-step { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; } .rpt-pattern-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo-tint); color: var(--indigo); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* RELATIONSHIP ADVICE */ .rpt-advice-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 10px; } .rpt-advice-num { font-size: 0.72rem; font-weight: 700; color: var(--gold); letter-spacing: 0.05em; margin-bottom: 6px; } .rpt-final { background: var(--gold-tint); border-radius: 14px; padding: 18px; border-top: none; margin-top: 26px; } /* (2026-08-24 추가) 시각 블록 4종 — score_bars/step_flow/paragraphs 같은 기존 데이터 모양을 그대로 쓰거나(radar_chart, timeline) 새 필드를 더한(keyword_chips, compare_cards) 블록들. "27,000원인데 글만 있다"는 지적에 대응해 연애운분석 20챕터 중 표현력/안정감/궁합 지표(점수 3개), 반복 패턴(타임라인 1개), 리포트 요약형 챕터(키워드 칩 2개), 대비형 챕터(비교 카드 3개) — 총 9개 챕터를 이 블록들로 전환했습니다(21단계 노트 참고). RADAR CHART — score_bars와 같은 scores/scores_note 데이터를 SVG 방사형 차트로. */ .rpt-radar-wrap { display: flex; justify-content: center; margin-top: 6px; } .rpt-radar-svg { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; } .rpt-radar-ring { fill: none; stroke: var(--line); stroke-width: 1; } .rpt-radar-axis { stroke: var(--line); stroke-width: 1; } .rpt-radar-shape { fill: var(--seal-tint); stroke: var(--seal); stroke-width: 2; stroke-linejoin: round; } .rpt-radar-dot { fill: var(--seal); } .rpt-radar-label { font-size: 9.5px; fill: var(--ink-soft); font-family: inherit; } .rpt-radar-value { font-size: 11px; font-weight: 700; fill: var(--seal); font-variant-numeric: tabular-nums; font-family: inherit; } /* TIMELINE — step_flow와 같은 steps/key_point 데이터를 연결선 + 오행 색 순환 노드로. */ .rpt-timeline { position: relative; margin-top: 4px; padding-left: 34px; } .rpt-timeline::before { content: ''; position: absolute; left: 13px; top: 4px; bottom: 4px; width: 2px; background: var(--line); } .rpt-timeline-step { position: relative; padding-bottom: 16px; } .rpt-timeline-step:last-child { padding-bottom: 0; } .rpt-timeline-num { position: absolute; left: -34px; top: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; } .rpt-timeline-text { font-size: 0.88rem; line-height: 1.65; color: var(--ink-soft); padding-top: 3px; } .rpt-timeline-key-point { margin-top: 14px; background: var(--gold-tint); border-radius: 12px; padding: 12px 14px; font-size: 0.88rem; color: var(--ink); display: flex; gap: 8px; align-items: flex-start; } /* KEYWORD CHIPS — love_profile/final_verdict의 keywords 배열을 태그 pill로. */ .rpt-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .rpt-chip-row--tight { margin-top: 8px; gap: 6px; } .rpt-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; } .rpt-chip-row--tight .rpt-chip { padding: 4px 11px; font-size: 0.74rem; } .rpt-chip--seal { background: var(--seal-tint); color: var(--seal); } .rpt-chip--indigo { background: var(--indigo-tint); color: var(--indigo); } .rpt-chip--gold { background: var(--gold-tint); color: var(--gold); } /* COMPARE CARDS — who_attracts_you/opposite_type/compatibility_match의 compare.left/ right를 VS 구분선을 사이에 둔 세로 스택으로. 폰 프레임 폭(~440px)에서 좌우 2열보다 세로 스택이 한글 문장 줄바꿈에 훨씬 안전해서 이 레이아웃을 택함. */ .rpt-compare { display: flex; flex-direction: column; margin-top: 6px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); } .rpt-compare-side { padding: 14px 16px; background: var(--paper); } .rpt-compare-side--left { border-left: 4px solid var(--indigo); } .rpt-compare-side--right { border-left: 4px solid var(--gold); } .rpt-compare-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 6px; } .rpt-compare-side--left .rpt-compare-label { color: var(--indigo); } .rpt-compare-side--right .rpt-compare-label { color: var(--gold); } .rpt-compare-text { font-size: 0.88rem; line-height: 1.65; color: var(--ink-soft); } .rpt-compare-divider { display: flex; align-items: center; justify-content: center; padding: 6px 0; background: var(--paper-2); font-family: 'Song Myung', serif; font-size: 0.78rem; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.08em; } /* (2026-08-24 삭제) 예전엔 화면이 560px 이상이면 이 카드들을 2열로 배치했는데, 18단계에서 소비자 화면 전체에 "폰 프레임"(body.phone-app, 640px 이상에서 .wrap을 440px로 고정)을 도입한 뒤로는 이 미디어쿼리가 뷰포트 폭 기준이라 여전히 켜져서, 실제 사용 가능한 폭은 440px 안팎인데 그 안에 억지로 2열을 우겨넣는 상태가 됐다 — 카드 한 개짜리 챕터(호감이 생길 때 등)는 그 카드가 왼쪽 절반에만 놓이고 오른쪽 절반이 통째로 빈 공간으로 남는 버그가 여기서 비롯됨. 폰 프레임 도입 이후로는 이 카드들이 놓이는 실제 폭이 항상 모바일 수준이라 2열이 다시 필요할 일이 없어서, 아예 삭제하고 1열(위에서 이미 지정된 grid-template-columns: 1fr)로 고정했다. */ /* ---------- 챕터형(schema_version=2) 리포트 목차/리더(chapter-toc, chapter-reader) ---------- LoveFortune/Compatibility 등 20챕터+ 리포트 타입 전용. 레거시(schema_version=1) single/compat 리포트에는 쓰이지 않습니다. */ .chapter-toc-wrap { margin-top: 4px; } /* 상단에 붙는 가로 번호 탭 스트립. report-toc.js(IntersectionObserver)가 스크롤에 따라 .active를 토글합니다. 기존 .tabs/.tab-btn과 같은 시각 언어(밑줄 강조)를 쓰되, sticky로 화면 상단에 계속 붙어있는다는 점이 다릅니다. */ .chapter-tab-strip { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; background: var(--paper); padding: 8px 0; margin-bottom: 18px; border-bottom: 1px solid var(--line); overflow-x: auto; } .chapter-tab { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-faint); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .chapter-tab:hover { color: var(--ink); background: var(--paper-2); } .chapter-tab.active { color: var(--seal); background: var(--seal-tint); } /* 전체 챕터를 세로로 나열하는 목차 목록. */ .chapter-toc-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 2px; } .chapter-toc-item a { display: flex; align-items: flex-start; gap: 12px; padding: 11px 8px; border-radius: 10px; text-decoration: none; color: inherit; transition: background 0.15s ease; } .chapter-toc-item a:hover { background: var(--paper-2); } .chapter-toc-num { flex: none; width: 26px; padding-top: 1px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--seal); } .chapter-toc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .chapter-toc-title { font-size: 0.9rem; font-weight: 600; color: var(--ink); } .chapter-toc-teaser { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5; } .chapter-toc-badge { flex: none; align-self: center; font-size: 0.68rem; } .chapter-toc-badge--ready { background: var(--seal-tint); color: var(--seal); } .chapter-toc-badge--failed { background: var(--gold-tint); color: var(--gold); } .chapter-toc-badge--pending, .chapter-toc-badge--generating { background: var(--paper-3); color: var(--ink-faint); } /* 챕터 리더(chapter-reader.blade.php)에서 아직 준비 안 됐거나 실패한 챕터의 안내. */ .chapter-pending-note { background: var(--paper); border: 1px dashed var(--line); border-radius: 10px; padding: 14px 16px; font-size: 0.86rem; color: var(--ink-faint); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .chapter-retry-btn { flex: none; padding: 8px 14px; font-size: 0.82rem; } /* 챕터형 진행 화면(chapter-progress.blade.php)의 "N / 총 챕터 완료" 카운터. 원형 게이지(.rpt-gauge)는 레거시 pending.blade.php와 동일한 컴포넌트를 재사용합니다. */ .chapter-progress-count { text-align: center; margin-top: 10px; font-size: 0.82rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* 12개월 흐름/대운·세운 타임라인 등은 4단계(연간전략/인생전략)에서 실제로 쓰일 때 구현합니다(지금은 연애운분석/궁합분석만 다루므로 아직 필요 없음). */ footer { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--ink-faint); line-height: 1.7; } /* (2026-08-26 수정) 사업자 정보를 항목별 줄바꿈 목록으로 정리 + 개인정보 처리방침 링크/인스타그램 아이콘 행 추가. */ .business-footer { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 0.74rem; color: var(--ink-faint); } .business-footer-list { list-style: none; margin: 0 0 4px; padding: 0; } .business-footer-list li { margin: 0 0 2px; } .business-footer p, .business-footer-contact { margin: 0 0 4px; } .business-footer a { color: var(--ink-faint); text-decoration: underline; } .business-footer a:hover { color: var(--seal); } .business-footer-links { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .business-footer-links a { text-decoration: underline; } .business-footer-instagram { display: inline-flex; align-items: center; justify-content: center; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- AI 상담(챗봇) ---------- */ #chat-error { display: none; background: var(--seal-tint); border: 1px solid var(--seal); color: var(--seal-deep); border-radius: 10px; padding: 10px 14px; font-size: 0.84rem; margin-bottom: 14px; } #chat-room { display: none; } #chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding: 4px 2px 12px; margin-bottom: 12px; } .chat-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; } .chat-assistant { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); } .chat-user { align-self: flex-end; background: var(--seal); color: #fbf3e9; border-bottom-right-radius: 4px; } .chat-system { align-self: center; background: transparent; color: var(--ink-faint); font-size: 0.76rem; max-width: 100%; text-align: center; padding: 2px 6px; } #chat-typing { display: none; align-self: flex-start; color: var(--ink-faint); font-size: 0.8rem; padding: 0 4px 6px; } .chat-input-row { display: flex; gap: 8px; } .chat-input-row input { flex: 1; } /* ---------- 로그인 바 ---------- */ .topbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 2px 0; font-size: 0.84rem; } .social-btn { appearance: none; border: none; border-radius: 8px; padding: 8px 14px; font-family: 'Gowun Dodum', sans-serif; font-size: 0.84rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .social-btn.kakao { background: #FEE500; color: #191600; } .social-btn.naver { background: #03C75A; color: #ffffff; } .social-btn:hover { filter: brightness(0.96); } /* .user-chip 계열은 2026-08-24 헤더/하단탭 개편으로 saju.blade.php의 예전 .topbar가 빠지면서 더 이상 어디서도 쓰이지 않아 제거함(계정 정보/로그아웃은 마이페이지로 이동). */ .chip-link { color: var(--gold); text-decoration: none; font-weight: 700; border: 1px solid var(--gold-tint); background: var(--gold-tint); border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; } .chip-link:hover { filter: brightness(0.96); } /* ---------- 전역 헤더 (site-header.blade.php, 2026-08-24 신설) ---------- 좌측 "결" 워드마크 + 우측 코인 칩/로그인 링크만 가볍게. 예전 .topbar(로그인 폼+코인+ 리포트함+로그아웃을 한 줄에 다 넣은 버전)를 대체한다 — 무거운 계정 관리는 전부 마이페이지로 옮겼다. */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 0; margin-bottom: 6px; } .site-header-logo { font-family: 'Song Myung', serif; font-weight: 400; font-size: 1.4rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; } .site-header-logo-img { height: 28px; width: auto; display: block; } .site-header-coin { color: var(--gold); text-decoration: none; font-weight: 700; border: 1px solid var(--gold-tint); background: var(--gold-tint); border-radius: 999px; padding: 6px 13px; font-size: 0.78rem; } .site-header-coin:hover { filter: brightness(0.96); } .site-header-login { color: var(--seal); text-decoration: none; font-weight: 700; font-size: 0.86rem; } /* ---------- 전역 하단 탭바 (site-bottom-nav.blade.php, 2026-08-24 신설) ---------- 화면 하단에 고정해서 스크롤 중에도 항상 손 닿는 곳에 둔다. 데스크톱에서는 사이트 전체가 "폰 프레임"(body.phone-app, .wrap을 440px로 고정 — 위 phone 프레임 규칙 참고) 으로 보이는데, 이 바도 max-width:440px + margin auto로 똑같이 가운데 정렬해서 프레임 폭과 어긋나지 않게 맞춘다. env(safe-area-inset-bottom)은 iPhone 홈 인디케이터 영역을 피하기 위한 것으로, 가 있어야 실제로 값이 들어간다 (이 바를 쓰는 페이지들에 함께 추가함). */ .site-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; max-width: 440px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-around; background: var(--paper-2); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 40; } .site-bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; text-decoration: none; color: var(--ink-faint); font-size: 0.68rem; font-weight: 700; } .site-bottom-nav-item.active { color: var(--seal); } .site-bottom-nav-icon { width: 22px; height: 22px; } /* "사주"는 실제 매출 진입점이라 원형 뱃지로 살짝 튀어나오게 강조(경쟁사 화면의 "가운데 탭 강조" 구조만 참고, 색은 사이트 결 그대로 seal 톤). 항상 이 톤을 유지하고, 선택된 상태는 라벨 색(위 .active 규칙)으로만 구분해서 "항상 강조되지만 지금 선택된 건 아니다" 와 "지금 선택됐다"가 둘 다 자연스럽게 읽히게 했다. */ .site-bottom-nav-item--primary { position: relative; } .site-bottom-nav-badge { width: 42px; height: 42px; border-radius: 50%; background: var(--seal); color: #fbf3e9; font-family: 'Song Myung', serif; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-top: -22px; box-shadow: 0 8px 18px -6px var(--seal); border: 3px solid var(--paper-2); } .site-bottom-nav-item--primary .site-bottom-nav-label { color: var(--ink-soft); } .site-bottom-nav-item--primary.active .site-bottom-nav-label { color: var(--seal); } .site-bottom-nav-item--primary.active .site-bottom-nav-badge { box-shadow: 0 0 0 3px var(--seal-tint), 0 8px 18px -6px var(--seal); } /* 하단 탭바가 고정으로 떠 있는 만큼, 이 바를 쓰는 페이지의 .wrap 맨 아래 콘텐츠가 가려지지 않게 여백을 더 확보한다(body에 has-bottom-nav 클래스를 붙인 페이지만). */ body.has-bottom-nav .wrap { padding-bottom: 130px; } /* ---------- 마이페이지 (my.blade.php, 2026-08-24 신설) ---------- */ .my-coin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .my-coin-count { font-family: 'Song Myung', serif; font-size: 1.8rem; color: var(--ink); } .my-coin-count span { font-size: 1rem; font-family: 'Gowun Dodum', sans-serif; color: var(--ink-faint); margin-left: 3px; } /* ---------- 사전 (dictionary.blade.php, 2026-08-24 신설) ---------- */ .dict-term-list { display: flex; flex-direction: column; gap: 14px; } .dict-term { padding-bottom: 14px; border-bottom: 1px dashed var(--line); } .dict-term:last-child { border-bottom: none; padding-bottom: 0; } .dict-term-name { font-family: 'Song Myung', serif; font-size: 1rem; color: var(--seal-deep); margin-bottom: 4px; } .dict-term-desc { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.65; } /* ---------- 코인 충전(결제) 페이지 ---------- */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 24px 0; } .plan-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 18px 20px; box-shadow: var(--shadow); } .plan-card.highlight { border-color: var(--seal); box-shadow: 0 6px 20px -8px var(--seal-tint); } .plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--seal); color: #fbf3e9; font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; } .plan-name { font-family: 'Song Myung', serif; font-size: 1.1rem; margin-bottom: 8px; } .plan-credits { font-family: 'Song Myung', serif; font-size: 2.4rem; color: var(--seal); line-height: 1; } .plan-credits span { font-size: 1rem; color: var(--ink-faint); font-family: 'Gowun Dodum', sans-serif; } .plan-desc { color: var(--ink-soft); font-size: 0.84rem; margin: 8px 0 14px; min-height: 2.6em; } .plan-price { font-size: 1.15rem; font-weight: 700; color: var(--ink); } .plan-unit { font-size: 0.74rem; color: var(--ink-faint); margin: 4px 0 16px; } .plan-card .btn { width: 100%; } /* ---------- 로그인 필요 안내 (AI 상담 탭) ---------- */ .login-gate { text-align: center; padding: 24px 10px 8px; } .login-gate p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 16px; } .login-gate .social-btn { padding: 11px 22px; font-size: 0.9rem; margin: 0 5px; } /* ---------- 이전 대화 목록 ---------- */ #chat-history { margin-bottom: 16px; } #chat-history .field-label { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 6px; } .chat-history-item { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; margin-bottom: 6px; font-size: 0.84rem; color: var(--ink); cursor: pointer; font-family: 'Gowun Dodum', sans-serif; } .chat-history-item:hover { border-color: var(--seal); } .chat-history-item .meta { color: var(--ink-faint); font-size: 0.76rem; } .chat-new-btn { background: none; border: 1px dashed var(--line); border-radius: 9px; padding: 9px 12px; width: 100%; text-align: center; color: var(--ink-faint); font-family: 'Gowun Dodum', sans-serif; font-size: 0.84rem; cursor: pointer; margin-bottom: 4px; } /* ---------- 관리자 대시보드 ---------- */ .admin-tabs { display: flex; gap: 8px; margin: 22px 0 18px; border-bottom: 1px solid var(--line); } .admin-tab { display: inline-block; padding: 8px 4px; margin-bottom: -1px; font-size: 0.88rem; font-weight: 700; color: var(--ink-faint); text-decoration: none; border-bottom: 2px solid transparent; } .admin-tab:hover { color: var(--ink); } .admin-tab.active { color: var(--seal); border-bottom-color: var(--seal); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; } .stat-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .stat-card.highlight { background: var(--seal-tint); border-color: var(--seal); } .stat-label { font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.02em; margin-bottom: 8px; } .stat-value { font-family: 'Song Myung', serif; font-size: 1.9rem; color: var(--ink); line-height: 1.2; } .stat-value span { font-family: 'Gowun Dodum', sans-serif; font-size: 0.9rem; color: var(--ink-faint); margin-left: 4px; } .stat-sub { font-size: 0.78rem; color: var(--ink-faint); margin-top: 6px; } .chart-block { margin-bottom: 26px; } .chart-block:last-child { margin-bottom: 0; } .chart-block-label { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 10px; font-weight: 700; } .bar-chart { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 2px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; } .bar-value { font-size: 0.64rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 3px; white-space: nowrap; } .bar-track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 110px; } .bar { width: 100%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 2px; } .bar-label { font-size: 0.62rem; color: var(--ink-faint); margin-top: 6px; white-space: nowrap; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .admin-table th, .admin-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .admin-table th { color: var(--ink-faint); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.02em; } .admin-table tbody tr:hover { background: var(--paper); } .wrap-narrow { max-width: 620px; } .chart-note { font-size: 0.78rem; color: var(--ink-faint); background: var(--indigo-tint); border-radius: 8px; padding: 8px 12px; margin: -4px 0 16px; } /* ---------- 관리자 기간/사용자 검색 ---------- */ .filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; } .filter-field { display: flex; flex-direction: column; gap: 4px; } .filter-field label { margin-bottom: 0; } .filter-field input { font-family: 'Gowun Dodum', sans-serif; font-size: 0.84rem; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); } .filter-submit { appearance: none; border: none; background: var(--seal); color: #fbf3e9; border-radius: 8px; padding: 8px 16px; font-family: 'Gowun Dodum', sans-serif; font-size: 0.84rem; font-weight: 700; cursor: pointer; } .filter-submit:hover { filter: brightness(0.96); } .filter-reset { font-size: 0.78rem; color: var(--ink-faint); text-decoration: none; padding: 8px 4px; } .filter-reset:hover { color: var(--seal); } /* ---------- 관리자: 상담 세션 목록 ---------- */ .chat-session-list { display: flex; flex-direction: column; gap: 8px; } .chat-session-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: var(--ink); } .chat-session-row:hover { border-color: var(--seal); } .chat-session-main { min-width: 0; flex: 1; } .chat-session-user { font-weight: 700; font-size: 0.9rem; margin-bottom: 3px; } .chat-session-preview { font-size: 0.82rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-session-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 0.74rem; color: var(--ink-faint); flex: none; white-space: nowrap; } /* ---------- 관리자: 상담 대화 뷰어 ---------- */ .chat-transcript { display: flex; flex-direction: column; gap: 4px; } .chat-date-divider { align-self: center; color: var(--ink-faint); font-size: 0.76rem; padding: 10px 6px 6px; } .chat-turn { display: flex; flex-direction: column; max-width: 82%; margin-bottom: 6px; } .chat-turn-user { align-self: flex-end; align-items: flex-end; } .chat-turn-assistant { align-self: flex-start; align-items: flex-start; } .chat-turn .chat-bubble { max-width: 100%; } .chat-meta { font-size: 0.68rem; color: var(--ink-faint); margin: 3px 4px 0; } .chat-new-btn:hover { border-color: var(--seal); color: var(--seal); } /* ---------- "사주" 종목 고르기 페이지 (sagu.blade.php, 2026-08-24 신설) ---------- 상단 카테고리 필터(알약 모양) + 종목 카드 목록. 참고로 준 경쟁사 화면의 구조(카테고리 필터→카드 목록)만 가져오고, 색은 어두운 네온 대신 사이트 결(종이/먹색/인주색)을 그대로 쓴다. 카드 뱃지는 사이트에 이미 있는 seal-mark(테두리 사각형 안에 세리프 글자 하나)와 같은 문법을 재사용해서, 새 아이콘 세트를 따로 만들지 않고도 카드마다 다르게 보이게 했다. */ .sagu-cat-row { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; } .sagu-cat-btn { appearance: none; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-soft); font-family: 'Gowun Dodum', sans-serif; font-size: 0.86rem; font-weight: 700; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sagu-cat-btn:hover { border-color: var(--seal); } .sagu-cat-btn.active { background: var(--seal); border-color: var(--seal); color: #fbf3e9; } .sagu-panel { display: none; } .sagu-panel.active { display: block; animation: fadeIn 0.25s ease; } .sagu-card-list { display: flex; flex-direction: column; gap: 12px; } .sagu-card { display: flex; align-items: center; gap: 14px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.12s ease; } a.sagu-card:hover { border-color: var(--seal); } a.sagu-card:active { transform: scale(0.99); } .sagu-card-badge { flex: none; width: 46px; height: 46px; border-radius: 10px; border: 1.6px solid var(--seal); display: flex; align-items: center; justify-content: center; font-family: 'Song Myung', serif; font-size: 1.25rem; color: var(--seal); } .sagu-card-body { flex: 1; min-width: 0; } .sagu-card-title { font-family: 'Song Myung', serif; font-weight: 400; font-size: 1.02rem; color: var(--ink); margin-bottom: 3px; } .sagu-card-desc { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; } .sagu-card-price { flex: none; font-size: 0.76rem; font-weight: 700; color: var(--seal); background: var(--seal-tint); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .sagu-card--soon { opacity: 0.55; } .sagu-card--soon .sagu-card-badge { border-color: var(--ink-faint); color: var(--ink-faint); } .sagu-card--soon .sagu-card-price { background: var(--paper-3); color: var(--ink-faint); } /* (2026-08-25 추가) 종목 카드가 아래에서 살짝 올라오며 나타나는 연출("스윽 올라오는 느낌" 피드백 반영). .sagu-panel이 display:none → block으로 바뀔 때마다(카테고리 탭 전환, /sagu·홈 페이지 진입) 브라우저가 이 애니메이션을 매번 새로 재생해준다 — 별도 JS 트리거 없이 CSS만으로 카테고리를 바꿀 때마다 카드가 다시 스윽 올라온다. nth-child로 살짝씩 시차를 둬서 한 번에 튀어나오지 않고 순서대로 올라오게 했다. */ .sagu-card-list .sagu-card { animation: saguCardIn 0.45s ease both; } .sagu-card-list .sagu-card:nth-child(1) { animation-delay: 0.02s; } .sagu-card-list .sagu-card:nth-child(2) { animation-delay: 0.09s; } .sagu-card-list .sagu-card:nth-child(3) { animation-delay: 0.16s; } .sagu-card-list .sagu-card:nth-child(4) { animation-delay: 0.23s; } .sagu-card-list .sagu-card:nth-child(5) { animation-delay: 0.30s; } .sagu-card-list .sagu-card:nth-child(n+6) { animation-delay: 0.37s; } @keyframes saguCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .sagu-card-list .sagu-card { animation: none; } } .sagu-empty { text-align: center; color: var(--ink-faint); font-size: 0.88rem; padding: 40px 10px; border: 1px dashed var(--line); border-radius: 16px; background: var(--paper-2); } @media (max-width: 420px) { .sagu-card { padding: 14px; gap: 12px; } .sagu-card-badge { width: 40px; height: 40px; font-size: 1.1rem; } .sagu-card-price { font-size: 0.7rem; padding: 5px 10px; } } /* ============================================================ * 리포트함 카드 (2026-08-25 추가, 로드맵 4번) * * 예전엔 reports/index.blade.php가 관리자 상담 세션 목록용으로 만든 * .chat-session-row를 그대로 재활용했다 — 용도가 다른 컴포넌트를 재활용하다 보니 * 제목/부제 두 줄만 있는 밋밋한 리스트였다(이 세션에서 이미 report-trust-grid를 * 홈페이지에 재활용했다가 겪은 것과 같은 문제 패턴). 사용자가 참고로 준 경쟁사 * "나의 보관함" 화면(아이콘+뱃지+상대방 이름+날짜/영구보관+버튼 2개로 구성된 카드)의 * 구조는 그대로 가져오되, 색은 결의 종이/먹색/인주색 palette로, 아이콘은 홈페이지 * "결의 차별점" 섹션에서 이미 쓴 동그란 뱃지 스타일(.home-feature-icon)을 재사용해서 * 사이트 전체 시각 언어를 통일했다. * ============================================================ */ .report-card-list { display: flex; flex-direction: column; gap: 14px; } .report-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 18px; } .report-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .report-card-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--seal-tint); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; } .report-card-subject { font-family: 'Song Myung', serif; font-weight: 400; font-size: 1.1rem; color: var(--ink); margin-bottom: 6px; line-height: 1.4; } .report-card-heart { color: var(--seal); font-size: 0.85em; margin: 0 2px; } .report-card-meta { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-faint); margin-bottom: 16px; } .report-card-dot { opacity: 0.6; } .report-card-actions { display: flex; gap: 10px; } .report-card-actions .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 12px; font-size: 0.86rem; } /* ============================================================ * 인쇄 / PDF 저장 (2026-08-25 추가, 로드맵 4번) * * 서버에서 PDF 파일을 직접 만드는(dompdf 등) 대신 브라우저 인쇄 기능을 활용한다. * 이유: PDF 생성 라이브러리는 한글 폰트를 파일로 별도로 심어줘야 하는데, 이 사이트 * 콘텐츠가 전부 한글이라 폰트 파일 하나가 잘못되면 리포트 전체가 네모(□)로 깨져 * 나오는 치명적인 실패가 된다. 반면 브라우저 인쇄(Ctrl+P → "PDF로 저장")는 사용자 * 기기에 이미 설치된 한글 폰트를 그대로 쓰기 때문에 깨질 위험이 없고, 텍스트가 살아 * 있는 진짜 PDF(선택·복사 가능)가 나온다 — 이미지로 캡처하는 공유 카드(html2canvas) * 보다도 품질이 좋다. "PDF 저장" 버튼은 인쇄 대화상자를 띄우기만 하고, 실제 * "PDF로 저장"은 그 안에서 사용자가 인쇄 대상을 고르는 표준 브라우저 기능이다. */ @media print { body.phone-app { background: #fff; } .site-header, .site-bottom-nav, .no-print, .chapter-tab-strip, .chapter-toc-badge, .home-hero-stamp, .home-hero-hint { display: none !important; } .wrap, .wrap-narrow { max-width: none !important; padding: 0 !important; } .card { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; } .chapter-section { break-inside: avoid; page-break-inside: avoid; } .btn, .chapter-retry-btn, .report-card-actions { display: none !important; } } /* ---------- 개인정보 처리방침 (2026-08-26 신설) ---------- */ .policy-meta { color: var(--ink-faint); font-size: 0.8rem; margin: -6px 0 18px; } .policy-section { margin-bottom: 22px; } .policy-section:last-child { margin-bottom: 0; } .policy-section h3 { font-family: 'Song Myung', serif; font-weight: 400; font-size: 1.02rem; margin: 0 0 8px; } .policy-section p { margin: 0 0 8px; } .policy-section ul, .policy-section ol { margin: 0 0 8px; padding-left: 1.3em; } .policy-section li { margin: 0 0 4px; } .policy-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 0 0 8px; } .policy-table th, .policy-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .policy-table th { background: var(--paper-3); font-weight: 600; white-space: nowrap; }