/* 심리톡톡 디자인 v1 (2026-11-04 사용자 선택, 컬러는 같은 날 브랜드 컬러 ‘세이지 정원’으로 교체)
   컬러·폰트·크기·레이아웃·버튼·보고서·진행 = A 고요한 노트, 응답 = C 글 보기 목록,
   대화 = B 둥근 말풍선, 그래픽 = E 겹치는 두 원. 기존 CSS 뒤에 불러와 덮어쓴다. */
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&display=swap");

:root{
  --n-bg:#f8f5ea;--n-sf:#fffdf7;--n-ink:#33291f;--n-mu:#7d7466;--n-ln:#e6dfcf;
  --n-ac:#5f7a4b;--n-ac2:#e2ab9c;--n-soft:#e9eedd;
  --n-fd:"Gowun Batang","Noto Serif KR",Batang,serif;
  --n-fb:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --n-t:24px;--n-b:16px;--n-c:13px;--n-lh:1.7;
  --n-circles:radial-gradient(circle at 38% 50%,rgba(95,122,75,.9) 0 29%,transparent 29.6%),radial-gradient(circle at 62% 50%,rgba(226,171,156,.78) 0 29%,transparent 29.6%);
}
:root,html,body{background:var(--n-bg)}
body{color:var(--n-ink);font-family:var(--n-fb);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
button,input,textarea,select{font-family:var(--n-fb)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--n-ac);outline-offset:3px}

/* ---------- 버튼: 잉크색 사각 + 보조는 테두리 ---------- */
.primary,.secondary{min-height:52px;border-radius:8px;font-size:var(--n-b);font-weight:500;letter-spacing:-.01em}
.primary{background:var(--n-ink);color:var(--n-bg)}
.secondary{background:transparent;color:var(--n-ink);border:1px solid #dcd3bf}
.center.story .stack .secondary{background:var(--n-ink);color:var(--n-bg);border:0}
.back,.hint{color:var(--n-mu)}

/* ---------- 레이아웃: 좌측 정렬, 위에서부터 노트처럼, 버튼은 아래 ---------- */
.center{max-width:440px;min-height:calc(100svh - 25px);padding:clamp(72px,16vh,150px) 26px 40px;justify-content:flex-start;text-align:left}
.center h1{font-family:var(--n-fd);font-size:var(--n-t);line-height:1.45;font-weight:700;letter-spacing:-.01em;color:var(--n-ink);margin:0 0 10px}
.center p{font-size:var(--n-b);line-height:var(--n-lh);color:var(--n-mu)}
.center .eyebrow{font-size:var(--n-c);color:var(--n-mu);margin-bottom:6px}
.center .stack{margin-top:auto;padding-top:40px;gap:10px}
.center .back{align-self:flex-start;padding:16px 0}
.counter{top:22px;right:26px;font-size:var(--n-c);color:var(--n-mu)}
.name-input{height:54px;border:0;border-bottom:1px solid var(--n-ln);border-radius:0;background:transparent;padding:12px 2px;margin:28px 0 auto;font-size:var(--n-b);color:var(--n-ink)}
.name-input:focus{border-bottom-color:var(--n-ink);outline:0}
form.center>.primary{margin-top:40px}
.note{border:1px solid var(--n-ln);background:var(--n-sf);border-radius:10px;color:var(--n-mu)}

/* 도입 이야기: 두 원 아래 명조로 */
.center.story{font-size:18px;line-height:1.85}
.center.story::before{content:"";display:block;width:132px;height:72px;margin:0 0 32px -10px;background:var(--n-circles)}
.center.story>p:first-child{font-family:var(--n-fd);font-size:18px;line-height:1.85;color:var(--n-ink)}
.story .hint{font-size:var(--n-c);margin-top:14px;padding:0;text-align:left}

/* 출생연도 시트 */
.overlay{background:#33291f66}
.sheet,.sheet header,.sheet button{background:var(--n-sf);color:var(--n-ink)}
.years button{border-bottom:1px solid var(--n-ln)}

/* ---------- 설문: 1px 진행선 + 글 보기 목록 ---------- */
.questions{max-width:440px;padding:22px 26px 90px}
.qtop{font-size:var(--n-c);color:var(--n-mu)}
.qtop span:last-child{color:var(--n-ink);font-variant-numeric:tabular-nums}
.progress{height:1px;background:var(--n-ln);border-radius:0;margin-top:12px}
.progress i{height:1px;background:var(--n-ac)}
.chapter-dots{display:none}
.qno{text-align:left;color:var(--n-mu);font-size:var(--n-c);margin:clamp(40px,9vh,96px) 0 10px}
.qtext{font-family:var(--n-fd);font-size:22px;line-height:1.5;font-weight:700;text-align:left;margin:0 0 30px;min-height:0;color:var(--n-ink)}
.answers{gap:8px}
.answer{border:1px solid var(--n-ln);background:var(--n-sf);border-radius:12px;padding:15px 18px;min-height:56px;font-size:var(--n-b);line-height:1.55;color:var(--n-ink);transition:border-color .15s,background .15s}
.answer span{display:none}
.answer:hover{border-color:var(--n-ac);box-shadow:0 0 0 1px var(--n-ac)}
.answer.selected{border-color:var(--n-ac);background:var(--n-soft);box-shadow:0 0 0 1px var(--n-ac)}
.questions .back{padding:18px 0;font-size:14px}
.q-reference{margin:28px 0 0;border-left:2px solid var(--n-ac);background:var(--n-soft);color:var(--n-ink)}
.q-reference strong{font-size:var(--n-c);color:var(--n-ac)}
.q-reference p{font-size:14px;color:var(--n-mu)}

/* ---------- 아이작 대화: 둥근 말풍선 ---------- */
.portrait{width:96px;height:56px;margin:0 0 28px -8px;border-radius:0;background:var(--n-circles);color:transparent;font-size:0}
.isaac-followup .portrait,.center .portrait{margin-left:-8px}
.chat-intro-text{font-family:var(--n-fd);font-size:22px;line-height:1.55}
.ai-label{color:var(--n-ac);font-size:var(--n-c);margin:0 0 10px;letter-spacing:.02em}
section.conversation{max-width:440px;padding:16px 20px 10px}
section.conversation header{min-height:56px;font-size:15px}
section.conversation header strong{font-family:var(--n-fd);font-weight:700}
section.conversation header button{background:transparent;border:1px solid var(--n-ln);border-radius:8px;color:var(--n-ink);padding:6px 10px}
section.conversation #clock,.chat-mode{color:var(--n-mu)}
.chat-mode{display:none}
.chat-progress{font-size:12px;color:var(--n-mu)}
.chat-progress>div{height:1px;background:var(--n-ln);margin:8px 0 0}
.chat-progress i{height:1px;background:var(--n-ac);border-radius:0}
.chat-messages{gap:12px;padding:18px 0}
.bubble{max-width:84%;padding:12px 16px;font-size:15px;line-height:1.7;background:var(--n-sf);border:1px solid var(--n-ln);border-radius:20px 20px 20px 6px;color:var(--n-ink)}
.bubble.user{background:var(--n-ac);border-color:var(--n-ac);color:#fff;border-radius:20px 20px 6px 20px}
section.conversation form{padding:10px 0;border-top:1px solid var(--n-ln)}
section.conversation input,section.conversation textarea{background:var(--n-sf);border:1px solid var(--n-ln);border-radius:22px;padding:11px 16px;color:var(--n-ink)}
section.conversation form button{background:var(--n-ac);color:#fff;border-radius:22px;padding:11px 16px;font-weight:500}
#new-messages{background:var(--n-ink)}
.typing i{background:var(--n-mu)}
.completion-overlay{background:#33291f80}
.completion-overlay>section{background:var(--n-sf);border-radius:16px;text-align:left}
.completion-overlay h2{font-family:var(--n-fd)}

/* 보고서 생성 대기: 두 원 + 1px 진행선 */
.loading-graph,.report-generating .loading-graph{width:150px;height:84px;margin:36px 0;border:0;background:var(--n-circles)}
.loading-graph i,.report-generating .loading-graph::after{display:none}
.report-generating p{font-size:var(--n-c);letter-spacing:.04em}
.report-build-progress{margin:18px 0;max-width:none}
.report-build-progress strong{font-size:14px;color:var(--n-ink)}
.report-build-progress>span{color:var(--n-mu);font-size:12px}
.report-build-progress>div{height:1px;border-radius:0;background:var(--n-ln)}
.report-build-progress>div i{background:var(--n-ac);border-radius:0}
.api-error{border-color:#e7c9c5;background:#fbf4f2}

.study{background:#f8f5eaee;color:var(--n-mu);font-size:11px}

/* ---------- 보고서: 종이 바탕, 큰 명조 제목 + 가는 선 + 문장 ---------- */
html .ecr-report-host,html .ecr-report-host.er-theme-night{--er-ink:var(--n-ink);--er-muted:var(--n-mu);--er-line:var(--n-ln);--er-paper:var(--n-sf);--er-accent:var(--n-ac);--er-dark:var(--n-bg);font-family:var(--n-fb);background:#efe9da;color:var(--n-ink)}
html .ecr-report-host .er-app,html .ecr-report-host .er-page,html .ecr-report-host .er-stage,html .ecr-report-host .er-page-nav,html .ecr-report-host .er-complete-wrap{background:var(--n-bg);color:var(--n-ink);box-shadow:none}
html .ecr-report-host .er-toolbar{background:rgba(248,245,234,.94);color:var(--n-ink)}
html .ecr-report-host .er-toolbar *,html .ecr-report-host .er-page-nav button{color:var(--n-ink)}
html .ecr-report-host .er-tool,html .ecr-report-host .er-counter{color:var(--n-mu)}
html .ecr-report-host .er-chat-open,html .ecr-report-host .er-share{background:transparent;border:1px solid var(--n-ln)}
html .ecr-report-host .er-page{padding:44px 28px 72px}
html .ecr-report-host .er-page-heading{margin-bottom:28px;text-align:left}
html .ecr-report-host .er-page-heading::after{content:"";display:block;width:48px;height:1px;background:var(--n-ln);margin-top:20px}
html .ecr-report-host .er-kicker,html .ecr-report-host.er-theme-night .er-kicker{color:var(--n-mu);font-size:var(--n-c);font-weight:400;letter-spacing:.06em;text-transform:none;margin-bottom:10px}
html .ecr-report-host .er-page h1,html .ecr-report-host.er-theme-night .er-page-heading h1{font-family:var(--n-fd);font-size:var(--n-t);line-height:1.45;font-weight:700;letter-spacing:-.01em;color:var(--n-ink)}
html .ecr-report-host .er-deck{color:var(--n-mu);font-size:14px}
html .ecr-report-host .er-prose,html .ecr-report-host .er-short-card,html .ecr-report-host .er-card,html .ecr-report-host .er-role-card{background:transparent;border-color:var(--n-ln);color:var(--n-ink);box-shadow:none}
html .ecr-report-host .er-prose{font-family:var(--n-fb);font-size:var(--n-b);line-height:1.85;letter-spacing:-.005em;padding:0;border:0}
html .ecr-report-host .er-prose p,html .ecr-report-host .er-short-card p,html .ecr-report-host .er-role-card p,html .ecr-report-host .er-card p{font-family:var(--n-fb);font-size:var(--n-b);line-height:1.85;color:var(--n-ink)}
html .ecr-report-host .er-prose p{margin:0 0 20px}
html .ecr-report-host .er-short-card{border-left:2px solid var(--n-ac);padding:4px 0 4px 18px}
html .ecr-report-host .er-card{border:1px solid var(--n-ln);border-radius:12px;background:var(--n-sf);padding:18px}
html .ecr-report-host .er-card>span,html .ecr-report-host .er-role-number{color:var(--n-mu);font-size:12px;letter-spacing:.06em}
html .ecr-report-host .er-role-card{background:var(--n-sf);border:1px solid var(--n-ln);border-radius:12px}
html .ecr-report-host .er-role-card h3,html .ecr-report-host .er-card span,html .ecr-report-host .er-card h3{color:var(--n-ac);font-size:15px;font-weight:700}
html .ecr-report-host .er-quote{background:var(--n-soft);font-family:var(--n-fd);font-style:normal;border-radius:12px}
html .ecr-report-host .er-note,html .ecr-report-host .er-evidence{background:var(--n-soft);color:var(--n-ink);border-color:var(--n-ac)}
html .ecr-report-host .er-page-foot{color:var(--n-mu);font-size:11px}
/* 표지(기존 어두운 페이지): 종이 위 두 원 + 큰 명조 */
html .ecr-report-host .er-page-dark,html .ecr-report-host.er-theme-night .er-page-dark{background:var(--n-bg);color:var(--n-ink)}
html .ecr-report-host .er-layout-dark .er-page-heading,html .ecr-report-host.er-theme-night .er-layout-dark .er-page-heading{border-top:0;padding-top:0;text-align:left;margin:auto 0}
html .ecr-report-host .er-layout-dark .er-page-heading::before{content:"";display:block;width:150px;height:84px;margin:0 0 36px -12px;background:var(--n-circles)}
html .ecr-report-host.er-theme-night .er-layout-dark .er-page-heading h1,html .ecr-report-host .er-layout-dark .er-page-heading h1{font-size:30px;line-height:1.4}
html .ecr-report-host .er-page-dark .er-kicker,html .ecr-report-host .er-page-dark .er-deck{color:var(--n-mu)}
html .ecr-report-host .er-axis text{fill:var(--n-mu)}
html .ecr-report-host .er-axis-legend,html .ecr-report-host.er-theme-night .er-axis-legend{color:var(--n-mu)}
html .ecr-report-host .er-axis-legend b{color:var(--n-ink)}
/* 페이지 이동: 1px 진행선 + 사각 버튼 */
html .ecr-report-host .er-page-nav{border-top:1px solid var(--n-ln)}
html .ecr-report-host .er-page-nav button,html .ecr-report-host.er-theme-night .er-prev,html .ecr-report-host.er-theme-night .er-next{background:transparent;border:1px solid var(--n-ln);border-radius:8px;color:var(--n-ink)}
html .ecr-report-host .er-page-dots{background:var(--n-ln);height:1px}
html .ecr-report-host .er-page-dots i.active{background:var(--n-ac);height:1px}
html .ecr-report-host .er-complete,html .ecr-report-host .er-paywall button{background:var(--n-ink);color:var(--n-bg);border-radius:8px}
html .ecr-report-host .er-paywall{background:var(--n-sf);border:1px solid var(--n-ln);box-shadow:none;border-radius:12px}
html .ecr-report-host .er-feedback button{background:transparent;border:1px solid var(--n-ln);border-radius:8px;color:var(--n-ink)}
html .ecr-report-host .er-feedback button[aria-pressed=true]{background:var(--n-ink);border-color:var(--n-ink);color:var(--n-bg)}
html .ecr-report-host .er-sheet{background:var(--n-sf);color:var(--n-ink)}
html .ecr-report-host .er-message{background:var(--n-sf);border:1px solid var(--n-ln);border-radius:20px 20px 20px 6px;font-size:14px}
html .ecr-report-host .er-message.user{background:var(--n-ac);border-color:var(--n-ac);color:#fff;border-radius:20px 20px 6px 20px}
html .ecr-report-host .er-chat-form button{background:var(--n-ac)}
.preview-unlock,.er-theme-night .preview-unlock{background:var(--n-sf);color:var(--n-ink);border:1px solid var(--n-ln);box-shadow:0 -4px 18px rgba(51,41,31,.06);text-align:left}
.preview-unlock button{background:var(--n-ink);color:var(--n-bg);border-radius:8px}
.preview-unlock .text-link{background:none;color:var(--n-mu);text-align:center}
.preview-unlock small{color:var(--n-mu)}
.access-link-box button{background:var(--n-sf);color:var(--n-ink);border-color:var(--n-ln)}
.access-link-box p{background:var(--n-sf);color:var(--n-ink);border:1px solid var(--n-ln)}
.er-share-summary{background:transparent;border:1px solid var(--n-ln);border-radius:8px;color:var(--n-ink)}
/* 카카오톡 공유 버튼은 카카오 디자인 가이드의 노란색·검은 글자를 따른다. */
.er-share-kakao{width:100%;min-height:48px;border:0;border-radius:8px;background:#fee500;color:rgba(0,0,0,.85);font-size:15px;font-weight:500;margin-bottom:8px}
.app-info-panel{background:var(--n-sf);color:var(--n-ink)}

/* ---------- 심층 보고서 안내 (report-offer): 기본 vs 심층 비교 + 실제 목차 ---------- */
.offer-v2{font-size:var(--n-b)}
.offer-v2 nav{height:60px;padding:0 26px;color:var(--n-mu);font-size:14px}
.offer-v2 nav button{width:36px;height:36px;border:1px solid var(--n-ln);border-radius:8px;background:transparent;color:var(--n-ink);display:grid;place-items:center}
.offer-v2 main{width:400px;max-width:100%;padding:16px 26px 72px;margin:0 auto}
.offer-v2 .ov-eyebrow{font-size:var(--n-c);color:var(--n-ac);font-weight:500;margin:0 0 10px}
.offer-v2 h1{font-family:var(--n-fd);font-weight:700;font-size:23px;line-height:1.5;text-align:left;margin:0 0 12px;color:var(--n-ink)}
.offer-v2 .ov-sub{font-size:15px;line-height:1.75;color:var(--n-mu);margin:0}
.ov-table{margin-top:26px}
.ov-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.ov-table thead th{font-size:14px;font-weight:500;color:var(--n-mu);text-align:center;width:52px;padding:0 0 2px}
.ov-table thead th:first-child{width:auto}
.ov-table thead .ov-dh,.ov-pages .ov-dh{color:var(--n-ac)}
.ov-pages td{font-family:var(--n-fd);font-weight:700;font-size:20px;text-align:center;color:var(--n-mu);padding:0 0 10px;border-bottom:1.5px solid var(--n-ink);font-variant-numeric:tabular-nums}
.ov-table tbody td{padding:10px 0;border-bottom:1px solid var(--n-ln);text-align:center}
.ov-table tbody td:first-child{text-align:left;padding-right:8px}
.ov-table .ov-g th{text-align:left;font-family:var(--n-fd);font-weight:700;font-size:16px;color:var(--n-ink);padding:22px 0 6px;border-bottom:1px solid var(--n-ln)}
.ov-table .ov-g:first-child th{padding-top:14px}
.ov-table tbody td:last-child{background:var(--n-soft)}
.ov-y{color:var(--n-ac);font-weight:700}
.ov-n{color:#c9c0ad}
.ov-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--n-ac);margin-left:6px;vertical-align:middle}
.ov-table .ov-legend{font-size:var(--n-c);color:var(--n-mu);margin:12px 0 0;display:flex;align-items:center;gap:6px}
.ov-table .ov-legend .ov-dot{margin:0}
.ov-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.ov-talk{margin:34px 0 0;font-size:14px;line-height:1.7;color:var(--n-mu)}
.ov-talk a{color:var(--n-ink);text-decoration:underline;text-underline-offset:3px}
.ov-buy{margin-top:20px}
.ov-buy a{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:8px;background:var(--n-ink);color:var(--n-bg);font-weight:500;text-decoration:none}
.ov-buy p{text-align:center;font-size:var(--n-c);color:var(--n-mu);margin:12px 0 0}
.offer-v2 #notice{text-align:center;font-size:var(--n-c);color:var(--n-mu);margin-top:8px}
@media(min-width:1200px){.offer-v2 nav{height:60px;font-size:14px}.offer-v2 main{width:400px}}

/* ---------- 결제 (checkout) ---------- */
body:has(.checkout-header){color:var(--n-ink)}
.checkout-header{border-bottom:1px solid var(--n-ln);background:var(--n-bg)}
.checkout-header h1{font-family:var(--n-fd);font-size:20px}
.checkout-header p{color:var(--n-mu);font-size:var(--n-c)}
.quote-strip{border-bottom:1px solid var(--n-ln)}
.quote-strip p{font-family:var(--n-fd);font-style:normal;color:var(--n-ink);font-size:16px}
.quote-strip small{color:var(--n-mu);font-size:var(--n-c)}
.stars{color:var(--n-ac)}
.product-card{border:1px solid var(--n-ln);border-radius:12px;background:var(--n-sf)}
.product-card h2{font-size:var(--n-b);font-weight:500}
.product-card p{font-size:var(--n-c);color:var(--n-mu)}
.payment-content h2{font-family:var(--n-fd);font-size:20px}
.method{border-color:var(--n-ln);border-radius:8px;background:var(--n-sf)}
.method[aria-pressed=true]{border-color:var(--n-ink);box-shadow:0 0 0 1px var(--n-ink)}
.card-selector{background:var(--n-sf);border:1px solid var(--n-ln)}
.card-selector select{border-color:var(--n-ln)}
.benefits,.purchase-policy,#status,.secure-payment,.text-button{color:var(--n-mu)}
.preview-agreement{color:var(--n-ink);font-size:14px}
.preview-agreement input{accent-color:var(--n-ac)}
.payment-footer{background:var(--n-bg);border-top:1px solid var(--n-ln)}
.dark-button{background:var(--n-ink);color:var(--n-bg);border-radius:8px;font-size:var(--n-b);font-weight:500}
.dark-button:disabled{background:#dcd3bf;color:var(--n-bg)}
.contact-step h2{font-family:var(--n-fd)}
.contact-step input{border-color:var(--n-ln);border-radius:8px;background:var(--n-sf)}
.contact-step input:focus{border-color:var(--n-ink)}
.seller-info{color:var(--n-mu)}
@media(max-width:600px){.product-card p{font-size:12px}.preview-agreement{font-size:13px}}

/* ---------- 약관·정책 ---------- */
.legal-wrap{max-width:680px;padding:36px 26px 72px}
.legal-wrap h1{font-family:var(--n-fd);font-size:var(--n-t)}
.legal-wrap h2{font-family:var(--n-fd);font-size:19px;border-top-color:var(--n-ln)}
.legal-meta{color:var(--n-mu)}
.legal-wrap a,.legal-nav a{color:var(--n-ac)}
.legal-nav{border-top-color:var(--n-ln)}
.legal-nav a[aria-current=page]{color:var(--n-ink)}
.legal-note{background:var(--n-sf);border-color:var(--n-ln)}
.legal-note.strong{background:var(--n-soft);border-color:var(--n-ac2)}
.legal-wrap th{background:var(--n-sf)}
.legal-wrap th,.legal-wrap td{border-color:var(--n-ln)}

/* ---------- 보고서 생성 대기: 숨 쉬는 두 원 + 6초마다 바뀌는 애착 이야기 ---------- */
.gen-slides{margin:30px 0 8px}
.gen-circles{width:132px;height:72px;margin-left:-10px;background:var(--n-circles);}
.gen-slide{min-height:132px;margin-top:22px;animation:gen-in 6s ease-in-out both}
.gen-slide h2{font-family:var(--n-fd);font-size:20px;line-height:1.45;font-weight:700;margin:0 0 8px;color:var(--n-ink)}
.center .gen-slide p{font-size:15px;line-height:1.7;color:var(--n-mu)}
.gen-dots{display:flex;gap:6px}
.gen-dots i{width:5px;height:5px;border-radius:50%;background:var(--n-ln)}
.gen-dots i.on{background:var(--n-ac)}
@keyframes gen-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes gen-in{0%{opacity:0}14%{opacity:1}86%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.gen-circles,.gen-slide{animation:none}}