/* 이 파일: 기존 기능을 유지하며 모든 앱 화면에 같은 차분한 정원 디자인을 적용합니다. */
.gr-calm {
  --background: #fcfbf9; /* 화면 바탕은 따뜻한 흰색입니다. */
  --foreground: #302f33; /* 본문은 선명한 먹색입니다. */
  --card: #ffffff; /* 정보 영역은 흰색입니다. */
  --card-foreground: #302f33; /* 정보 영역의 글자색입니다. */
  --muted: #f3f1ee; /* 보조 영역은 중성색입니다. */
  --muted-foreground: #716d77; /* 작은 설명도 읽히는 색입니다. */
  --border: #e8e4e9; /* 구분선은 연한 회색입니다. */
  --accent: #75628e; /* 선택 상태를 표시하는 색입니다. */
  --accent-light: #f0eaf8; /* 선택 상태의 연한 바탕입니다. */
  --accent-rose: #9d677f; /* 분홍색 강조도 채도를 낮춥니다. */
  --primary: #443750; /* 주요 버튼의 글자색입니다. */
  --primary-foreground: #ffffff; /* 진한 버튼 위의 글자색입니다. */
  --radius: 16px; /* 공통 모서리 크기입니다. */
  --gradient-primary: linear-gradient(135deg, #79648f 0%, #6f5c82 100%); /* 기존 흰 글자와 진행 막대의 대비를 유지합니다. */
  --gradient-button: linear-gradient(135deg, #eee6f8 0%, #ded0f0 100%); /* 주요 버튼만 은은하게 빛납니다. */
  --gradient-soft: linear-gradient(135deg, #f7f3fb 0%, #f0eaf8 100%); /* 선택 영역의 옅은 배경입니다. */
  --gradient-warm: linear-gradient(135deg, #faf5ed 0%, #f5eeee 100%); /* 따뜻한 보조 배경입니다. */
  background: var(--background); /* 새 배경색을 적용합니다. */
  color: var(--foreground); /* 새 본문색을 적용합니다. */
}
.gr-calm::before, .gr-calm::after { content: none; } /* 화면 전체의 장식 배경을 없앱니다. */
.gr-calm .container { max-width: 680px; padding: 20px 24px 40px; } /* 읽기 편한 화면 폭을 유지합니다. */
.gr-calm .container.has-tabbar { padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important; } /* 기존 고정 여백보다 우선해 아이폰 하단 공간까지 확보합니다. */
.gr-calm h1 { font-size: 22px; font-weight: 650; line-height: 1.45; letter-spacing: -.035em; word-break: keep-all; overflow-wrap: anywhere; } /* 제목이 캐릭터보다 커지지 않습니다. */
.gr-calm :is(h2, h3, p, .subtitle, .callout-text, .sec-title) { word-break: keep-all; overflow-wrap: anywhere; } /* 긴 한글과 외국어를 안전하게 줄바꿈합니다. */
.gr-calm :is(button, a, input, textarea, select):focus-visible { outline: 3px solid #8d77a8; outline-offset: 3px; } /* 키보드로 선택한 위치가 보입니다. */
.gr-calm :is(button, input, textarea, select) { font-family: inherit; } /* 입력과 버튼의 글꼴을 통일합니다. */
.gr-calm .header { margin: 22px 0 26px; } /* 페이지 제목 주변 여백입니다. */
.gr-calm .header-badge { background: transparent; color: var(--muted-foreground); padding: 0; margin-bottom: 8px; font-weight: 500; } /* 작은 안내는 배지 상자 없이 표시합니다. */
.gr-calm .subtitle { font-size: 14px; letter-spacing: 0; line-height: 1.65; } /* 설명은 차분한 크기입니다. */

/* 이 구역: 언어 선택과 로고를 모든 페이지에서 공통으로 사용합니다. */
.gr-brandbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 44px; } /* 로고와 언어를 한 줄에 둡니다. */
.gr-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--foreground); text-decoration: none; flex-shrink: 0; font-size: 16px; font-weight: 650; letter-spacing: -.035em; border: 0; background: transparent; padding: 0; min-height: 44px; cursor: pointer; } /* 작은 브랜드 이름입니다. */
.gr-brand img { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; } /* 원래 물방울 브랜드 아이콘의 자리입니다. */
.gr-calm .lang-selector { position: static; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 100px; background: #fff; box-shadow: none; transform: none; width: auto; flex-shrink: 0; } /* 언어 선택이 본문 위에 뜨지 않게 합니다. */
.gr-calm .lang-selector .lang-btn { min-width: 29px; min-height: 30px; padding: 4px 5px; border-radius: 100px; font-size: 13px; line-height: 1.2; color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; } /* 언어 버튼 크기를 일정하게 합니다. */
.gr-calm .lang-selector .lang-flag { display: none; } /* 작은 국기 장식을 덜어냅니다. */
.gr-calm .lang-selector .lang-label { display: inline; font-size: 13px; } /* 언어 이름은 계속 보입니다. */
.gr-calm .lang-selector .lang-btn.active { background: var(--accent-light); color: var(--primary); box-shadow: none; } /* 선택 언어를 부드럽게 강조합니다. */
.gr-calm .lang-selector.collapsed .lang-btn { display: inline-flex; } /* 스크롤 중에도 언어 버튼이 사라지지 않습니다. */

/* 이 구역: 첫 방문 화면은 16종 정지 도감과 시작 버튼이 중심입니다. */
.gr-affiliate-label { text-align: center; font-size: 13px; color: #786448; margin: 8px 0 0; } /* 제휴 고지는 읽을 수 있게 유지합니다. */
.gr-calm .landing-hero { text-align: center; padding: 28px 0 10px; } /* 첫 화면의 과도한 빈 공간을 줄입니다. */
.gr-calm .landing-hero h1 { font-size: 24px; font-weight: 650; color: var(--foreground); background: none; -webkit-text-fill-color: currentColor; margin-bottom: 0; } /* 첫 제목도 절제된 크기입니다. */
.landing-plant-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; width: min(100%, 368px); margin: 18px auto 12px; } /* 16종 모두 같은 크기로 네 줄에 배치합니다. */
.gr-calm .landing-plant-grid .codex-portrait { display: block; min-width: 0; min-height: 44px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 18px; background: transparent; box-shadow: none; transform: none; transition: background .2s ease; } /* 사진 바깥의 상자와 유형 코드를 덜어냅니다. */
.gr-calm .landing-plant-grid .codex-portrait:hover { background: #f1ecf5; transform: none; box-shadow: none; } /* 가만히 있는 식물에 마우스를 올리면 바탕만 옅어집니다. */
.codex-portrait-art { display: block; width: 100%; height: 100%; } /* 누르는 영역과 그림의 크기를 맞춥니다. */
.gr-calm .landing-plant-grid .gr-char { display: block; width: 100%; height: 100%; animation: none; } /* 첫 화면에서는 영상을 불러오거나 그림을 움직이지 않습니다. */
.gr-welcome-copy { max-width: 420px; margin: 8px auto 0; font-size: 15px; color: var(--muted-foreground); line-height: 1.75; white-space: pre-line; word-break: keep-all; } /* 앱 설명은 문장별로 줄을 나눕니다. */
.gr-welcome-meta { text-align: center; margin-top: 10px; font-size: 13px; color: var(--muted-foreground); } /* 소요 시간은 보조 정보입니다. */
.gr-calm .gr-start-button { margin-top: 16px; } /* 시작 버튼을 그림 가까이 둡니다. */
.gr-calm .db-stats-line { padding: 0; background: none; border: none; color: var(--muted-foreground); font-weight: 400; margin-top: 12px; } /* 제품 수는 작은 참고 정보로 남깁니다. */
.gr-calm .feature-grid { gap: 0; margin: 26px 0; border-top: 1px solid var(--border); } /* 기능 소개는 평평하게 구분합니다. */
.gr-calm .feature-item { display: grid; min-width: 0; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-content: start; padding: 20px 12px; text-align: left; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0; box-shadow: none; } /* 긴 외국어가 있어도 기능 소개의 두 열을 유지합니다. */
.gr-calm .feature-item :is(.label, .desc) { min-width: 0; overflow-wrap: anywhere; } /* 설명 때문에 화면 전체에 가로 스크롤이 생기지 않게 합니다. */
.gr-calm .feature-item:hover { transform: none; box-shadow: none; } /* 설명 카드가 불필요하게 튀지 않습니다. */
.gr-calm .feature-item .icon { grid-row: 1 / 3; font-size: 21px !important; margin: 0; } /* 기능 아이콘을 작게 합니다. */
.gr-calm .feature-item .label { font-size: 14px; font-weight: 600; } /* 기능 이름 크기입니다. */
.gr-calm .feature-item .desc { font-size: 13px; margin-top: 4px; } /* 설명 크기입니다. */
.codex-control-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* 화면 읽기 도구에는 화살표의 뜻을 알려줍니다. */

/* 이 구역: 식물 소개 팝업은 캐릭터가 가장 크게 보이도록 구성합니다. */
#save-done-pop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(35, 31, 43, .4); } /* 영상 위의 실시간 배경 흐림을 없애 사각형 합성 잔상을 방지합니다. */
.save-pop-plant .save-pop-card { animation: plantPopupFade .18s ease-out; } /* 영상이 들어 있는 상자를 확대하지 않고 투명도만 바꿉니다. */
@keyframes plantPopupFade { from { opacity: 0; } to { opacity: 1; } } /* 캐릭터와 버튼 위치는 처음부터 고정합니다. */
.save-pop-plant .save-pop-card { width: min(100%, 368px); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 16px 24px 24px; border-radius: 28px; } /* 작은 화면에서도 확인 버튼까지 접근할 수 있습니다. */
.plant-motion { position: relative; width: min(240px, 100%); aspect-ratio: 1; margin: 0 auto 10px; isolation: isolate; contain: paint; } /* 영상의 그리기 범위를 식물 자리 안으로 제한합니다. */
.plant-motion-poster, .plant-motion-video { position: absolute; inset: 0; width: 100%; height: 100%; } /* 원본과 영상의 자리를 같게 맞춰 로딩 때 덜컥 움직이지 않습니다. */
.plant-motion-poster svg { display: block; width: 100%; height: 100%; } /* 원본의 비율과 얼굴을 그대로 유지합니다. */
.plant-motion-video { object-fit: contain; opacity: 0; pointer-events: none; } /* 영상이 준비되기 전에는 원본 그림이 보입니다. */
.plant-motion-ready .plant-motion-video { opacity: 1; } /* 실제 재생되는 영상만 보여줍니다. */
.plant-motion-ready .plant-motion-poster { visibility: hidden; } /* 재생 중에는 두 그림이 겹치지 않습니다. */
.save-pop-plant .save-pop-title { font-size: 18px; font-weight: 650; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; } /* 제목은 캐릭터보다 차분한 크기로 둡니다. */
.save-pop-plant .save-pop-sub { margin-top: 8px; line-height: 1.65; overflow-wrap: anywhere; } /* 긴 소개 문장도 편하게 읽히게 합니다. */
.save-pop-plant .save-pop-btn { min-height: 46px; border-radius: 16px; } /* 두 행동 버튼의 높이와 간격을 유지합니다. */
.save-pop-plant .save-pop-btn.primary { background: var(--gradient-button); color: var(--primary); border: 1px solid #e5d8f1; } /* 강한 초록 체크 버튼 대신 기존 앱의 연라일락 버튼입니다. */
@media (max-height: 620px) { .save-pop-plant .plant-motion { width: 160px; } } /* 키가 작은 화면에서는 식물 크기만 줄여 버튼을 살립니다. */
@media (prefers-reduced-motion: reduce) { .save-pop-plant .save-pop-card { animation: none; } .plant-motion-video { display: none; } .plant-motion-poster { visibility: visible; } } /* 움직임을 줄이도록 설정한 기기에는 원본만 보여줍니다. */

/* 이 구역: 버튼·목록·정보 상자를 공통으로 다듬습니다. */
.gr-calm :is(.btn-primary, .lrh-cta, .routine-cta-bottom, .routine-cta-inline-btn, .brand-register-btn, .save-done-go, .age-next-btn, .quiz-fs-submit, .share-btn-save) { background: var(--gradient-button) !important; color: var(--primary) !important; border: 1px solid #e5d8f1; border-radius: 100px; box-shadow: inset 0 1px 0 #fff9, 0 2px 3px #48365305 !important; font-size: 15px; font-weight: 600; min-height: 50px; } /* 주요 버튼은 하나의 연라일락 형태를 사용합니다. */
.gr-calm :is(.btn-primary, .lrh-cta, .routine-cta-bottom):hover { filter: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff9, 0 3px 8px #4836530c !important; } /* 움직임을 작게 유지합니다. */
.gr-calm .btn-green { background: #e5f0e7; color: #36553d; box-shadow: none; } /* 저장 완료 계열은 차분한 초록입니다. */
.gr-calm :is(.my-product-ocr, .product-mini-btn.pick) { background: #eee7f5; color: #51415f; border: 1px solid #e1d6eb; box-shadow: none; font-size: 13px; min-height: 36px; } /* 남아 있던 진한 분홍 보조 버튼도 같은 톤으로 맞춥니다. */
.gr-calm .btn-outline { background: transparent; border: 1px solid var(--border); } /* 보조 버튼은 선으로 구분합니다. */
.gr-calm :is(.card, .callout, .routine-step, .sec-head, .quiz-mode-card, .gender-card, .pregnancy-card, .age-input-card) { border: 1px solid var(--border); box-shadow: none; } /* 모든 정보 상자의 그림자를 덜어냅니다. */
.gr-calm :is(.card, .callout, .routine-step, .sec-head, .quiz-mode-card, .gender-card, .pregnancy-card):hover { transform: none; box-shadow: none; } /* 정보 읽는 영역은 고정합니다. */
.gr-calm .card-header { padding: 20px; } /* 공통 카드 제목 여백입니다. */
.gr-calm .card-body { padding: 20px; } /* 공통 카드 본문 여백입니다. */
.gr-calm .callout { background: #fff !important; border-radius: 16px; padding: 20px; } /* 분석 상자도 흰색으로 정리합니다. */
.gr-calm .callout-header { margin-bottom: 12px; gap: 10px; flex-direction: row; } /* 작은 아이콘과 제목을 한 줄에 둡니다. */
.gr-calm :is(.card-title, .callout-title, .sec-title, .routine-step-title) { font-size: 16px; font-weight: 600; } /* 부제목 크기를 통일합니다. */
.gr-calm :is(.callout-icon, .card-icon, .sec-num, .routine-step-num) { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; background: #f0eaf8 !important; color: var(--primary) !important; box-shadow: none; flex-shrink: 0; } /* 장식 아이콘을 작고 차분하게 만듭니다. */
.gr-calm :is(.callout-text, .routine-step-desc) { line-height: 1.75; } /* 정보는 충분한 줄간격으로 읽습니다. */
.gr-calm .sec-head { border-width: 0 0 1px; border-radius: 0; background: transparent; padding: 16px 0; } /* 접이식 제목을 상자 대신 구분선으로 만듭니다. */
.gr-calm .sec-sub { white-space: normal; overflow: visible; } /* 긴 설명을 말줄임으로 숨기지 않습니다. */
.gr-calm .sec-body { padding-top: 16px; } /* 펼친 내용과 제목을 구분합니다. */
.gr-calm :is(.routine-step, .routine-note) { background: #fff; } /* 루틴의 밝은 바탕입니다. */
.gr-calm .routine-step-body { padding-left: 0; } /* 모바일에서 본문 공간을 충분히 확보합니다. */
.gr-calm .routine-note { border: 1px solid var(--border); color: var(--muted-foreground); } /* 루틴 안내의 강조를 낮춥니다. */
.gr-calm .rec-more-btn { border: 1px solid var(--border); color: var(--accent); background: #fff; min-height: 42px; } /* 더보기 버튼을 단순하게 만듭니다. */
.gr-calm .brand-register-compact { background: transparent; border: 0; color: var(--muted-foreground); box-shadow: none; font-weight: 400; flex-wrap: wrap; text-align: center; } /* 제휴 문의는 보조 정보로 둡니다. */
.gr-calm .product-tier-card { background: transparent; padding: 16px 0 4px; border-radius: 0; } /* 추천 상품을 겹친 상자 대신 목록으로 보여줍니다. */
.gr-calm .product-tier-card > div + div { border-top: 0; } /* 행 자체의 얇은 아래 구분선만 사용합니다. */
.gr-calm .product-tier-name { font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; } /* 긴 제품 이름도 자연스럽게 읽힙니다. */
.gr-calm .product-tier-tabs { gap: 6px; } /* 가격대 버튼 사이 여백입니다. */
.gr-calm .product-tier-tab { border-radius: 100px; min-height: 40px; background: #fff; } /* 가격대 선택도 둥글게 통일합니다. */
.gr-calm .product-tier-tab.active { border-color: #d8cbe6; background: var(--accent-light); color: var(--primary); } /* 선택한 가격대의 색입니다. */
.gr-calm :is(.gender-card-icon, .quiz-mode-card-icon) { background: #f1edf5 !important; width: 44px; height: 44px; font-size: 24px; box-shadow: none; } /* 시작 단계의 원색 아이콘 상자를 줄입니다. */
.gr-calm :is(.gender-card-title, .quiz-mode-card-title) { font-size: 17px; font-weight: 600; } /* 시작 단계 제목도 본문과 균형을 맞춥니다. */
.gr-calm .quiz-mode-card-featured { background: #f8f5fb; border-color: #d8cbe6; } /* 정밀 진단 선택을 옅게 구분합니다. */
.gr-calm .quiz-mode-badge-rec { background: #e8deef; color: var(--primary); } /* 추천 표시는 작은 보조 문구입니다. */
.gr-calm :is(#page-gender-select, #page-pregnancy-status, #page-quiz-mode, #page-age-input) h2 { font-size: 20px !important; font-weight: 600 !important; } /* 시작부터 문항까지 제목 크기를 맞춥니다. */
.gr-calm .quiz-fs-qnum { background: var(--accent-light); color: var(--primary); } /* 문항 번호도 같은 색을 사용합니다. */
.gr-calm .share-size-tab.active { background: var(--accent-light); color: var(--primary); box-shadow: none; } /* 공유 크기 선택의 대비를 유지합니다. */
.gr-calm #result-mbti-text { color: var(--foreground) !important; font-size: 15px !important; font-weight: 500 !important; } /* 캐릭터 설명의 굵기와 색을 차분하게 합니다. */
.gr-calm [data-i18n="result_disclaimer"] { color: var(--muted-foreground) !important; } /* 작은 안내 문구의 대비를 확보합니다. */
.gr-calm .point-display-value { background: none; -webkit-text-fill-color: currentColor; color: var(--accent); font-size: 28px; } /* 보상 숫자가 화면을 압도하지 않습니다. */

/* 이 구역: 문항 선택은 뚜렷하게, 배경 장식은 차분하게 유지합니다. */
.gr-calm .quiz-fullscreen { background: var(--background); } /* 문항마다 화면 전체 색이 바뀌지 않습니다. */
.gr-calm .quiz-answer-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; } /* 답변 버튼의 기본 모양입니다. */
.gr-calm .quiz-answer-card:hover { background: #f7f4fa; } /* 답변에 마우스를 올렸을 때의 색입니다. */
.gr-calm .quiz-answer-card.selected { background: var(--accent-light); border-color: #baa8cd; } /* 선택한 답은 충분히 구분합니다. */
.gr-calm .quiz-answer-card.selected.flash { color: var(--primary); background: #e5d9f1; } /* 선택 순간에도 글자 대비를 유지합니다. */
.gr-calm .quiz-answer-card.selected .quiz-answer-radio { background: var(--accent); } /* 작은 선택 원은 진하게 합니다. */
.gr-calm :is(.progress-bar-fill, .story-progress-fill) { background: var(--accent); } /* 진행률을 알아보기 쉽게 유지합니다. */
.gr-calm :is(.quiz-section-card, .quiz-section-badge) { box-shadow: none; border-color: var(--border); } /* 문항 장식 그림자를 없앱니다. */

/* 이 구역: 결과와 재방문 화면은 투박한 원본 캐릭터를 크게 보여줍니다. */
.gr-calm .landing-return-hero { background: transparent; border: 0; box-shadow: none; padding: 22px 0 12px; } /* 정원 홈의 큰 배경 상자를 없앱니다. */
.gr-calm .lrh-hi { font-size: 20px; color: var(--foreground); font-weight: 600; margin-bottom: 8px; } /* 요청한 정원 제목 크기입니다. */
.gr-calm .lrh-type { background: transparent; border: 0; color: var(--muted-foreground); font-size: 13px; padding: 0; } /* 타입 코드는 작게 남깁니다. */
.gr-calm .lrh-svg { width: 230px; height: 220px; margin: 8px auto 0; } /* 원본 정원 그림의 자리입니다. */
.gr-calm .lrh-svg svg { max-width: 100%; max-height: 100%; filter: none; } /* 캐릭터에 인위적 광택을 주지 않습니다. */
.gr-calm .lrh-name { font-size: 20px; font-weight: 600; } /* 식물 이름도 제목보다 과하게 크지 않습니다. */
.gr-calm .lrh-care span { background: #fff; border: 1px solid var(--border); width: 34px; height: 34px; font-size: 16px; } /* 돌보기 표시는 작게 유지합니다. */
.gr-calm .lrh-links button { border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); font-weight: 500; min-height: 42px; } /* 재방문 바로가기는 덜 강조합니다. */
.gr-calm .result-type-display { padding: 16px 0 24px; } /* 결과 그림 주변의 과한 공백을 줄입니다. */
.gr-calm .result-type-emoji .gr-char { width: 210px; height: 210px; filter: none; } /* 원본의 평면 그림을 유지합니다. */
.gr-calm .result-type-nickname { font-size: 24px; font-weight: 650; background: none; -webkit-text-fill-color: currentColor; color: var(--foreground); } /* 결과 이름을 단정하게 표시합니다. */
.gr-calm .result-type-label { font-size: 15px; font-weight: 500; } /* 결과 속성은 보조 크기로 표시합니다. */
.gr-calm .result-type-letters { font-size: 13px; background: transparent; padding: 2px 0; letter-spacing: .1em; } /* 유형 코드는 작은 참고 정보입니다. */
.gr-calm .result-difficulty .stars { font-size: 14px; letter-spacing: 1px; color: #9a7f4f; } /* 별점의 시각적 비중을 줄입니다. */
.gr-calm .routine-cta-banner { background: var(--gradient-soft); color: var(--primary); box-shadow: none; border: 1px solid var(--border); border-radius: 16px; } /* 결과 아래 루틴 안내를 같은 톤으로 맞춥니다. */
.gr-calm .routine-cta-banner-title { color: var(--primary); font-size: 15px; } /* 안내 제목의 대비를 유지합니다. */
.gr-calm .routine-cta-banner-sub { color: #71617d; font-size: 13px; } /* 안내 설명 크기입니다. */
.gr-calm .routine-cta-inline { background: #fff; border: 1px solid var(--border); box-shadow: none; } /* 중간 안내의 장식을 줄입니다. */
.gr-calm :is(.garden-card, .streak-banner, .points-card, .my-type-badge) { background: #f7f4f9; box-shadow: none; border: 1px solid var(--border); } /* 기록과 정원도 공통 톤입니다. */
.gr-calm .garden-title { font-size: 18px; font-weight: 600; } /* 정원 제목을 작게 유지합니다. */
.gr-calm .garden-card::before { display: none; } /* 정원 카드의 추가 장식을 덜어냅니다. */
.gr-calm .garden-status { font-size: 14px; } /* 상태 설명은 읽기 편한 크기입니다. */

/* 이 구역: 하단 메뉴의 그림은 같은 굵기의 선으로 통일합니다. */
.gr-calm .tab-bar { width: min(100%, 680px); left: 50%; right: auto; transform: translateX(-50%); height: calc(72px + env(safe-area-inset-bottom)); padding: 4px 12px calc(4px + env(safe-area-inset-bottom)); background: #fffefa; border-color: var(--border); box-shadow: none; } /* 하단 메뉴 폭을 본문과 맞춥니다. */
.gr-calm .tab-bar-item { flex: 1; min-width: 0; min-height: 56px; padding: 6px 2px; gap: 4px; color: #76717b; border-radius: 12px; } /* 메뉴 다섯 개가 좁은 화면에도 들어갑니다. */
.gr-calm .tab-bar-item.active { background: transparent; color: var(--accent); } /* 선택된 메뉴는 색으로 표시합니다. */
.gr-calm .tab-bar-item.active::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #b198d1; position: absolute; bottom: 0; } /* 작은 점으로 현재 위치를 알려줍니다. */
.gr-calm .tab-bar-item .tab-icon { display: flex; width: 23px; height: 23px; align-items: center; justify-content: center; transform: none; } /* 메뉴 그림 크기를 통일합니다. */
.gr-calm .tab-bar-item .tab-icon svg { width: 23px; height: 23px; } /* 원본 SVG 선 아이콘의 크기입니다. */
.gr-calm .tab-bar-item .tab-label { font-weight: 500; color: inherit; font-size: 13px; } /* 작은 메뉴 글자도 13px을 유지합니다. */
.gr-calm .tab-badge-dot { animation: none; } /* 알림 점이 반복해서 깜빡이지 않습니다. */

/* 이 구역: 시작 애니메이션도 같은 브랜드 색을 사용합니다. */
.gr-calm #gr-intro { background: var(--background); } /* 첫 실행 배경을 통일합니다. */
.gr-calm #gr-intro .gr-title { font-size: 22px; font-weight: 600; background: none; -webkit-text-fill-color: currentColor; color: var(--foreground); } /* 시작 로고 제목도 작게 합니다. */
.gr-calm #gr-intro .gr-spark { display: none; } /* 추가 반짝임 장식을 덜어냅니다. */

/* 이 구역: 화면이 좁아져도 제목·언어·버튼이 겹치지 않게 합니다. */
@media (max-width: 480px) {
  .gr-calm .container { padding: 14px 20px 32px; } /* 휴대폰 여백입니다. */
  .gr-calm h1 { font-size: 20px; } /* 휴대폰 제목 크기입니다. */
  .gr-calm .landing-hero h1 { font-size: 22px; } /* 첫 질문은 한 단계만 강조합니다. */
  .gr-calm .landing-hero { padding-top: 24px; } /* 첫 화면의 위 여백입니다. */
  .gr-calm .card { padding: 0; } /* 기존 모바일 카드의 이중 여백을 없앱니다. */
  .gr-calm .card-body, .gr-calm .callout { padding: 18px; } /* 작은 화면의 본문 여백입니다. */
  .gr-calm .result-type-nickname { font-size: 22px; } /* 긴 식물 이름의 크기입니다. */
  .gr-calm .feature-item { padding: 18px 8px; column-gap: 8px; } /* 기능 설명 간격입니다. */
}
.gr-calm .share-section { padding: 24px 0; border-top: 1px solid var(--border); } /* 공유는 독립된 간결한 영역입니다. */
.gr-calm .share-preview-wrap { max-width: 400px; box-shadow: none; border: 1px solid var(--border); border-radius: 20px; background: #fcfaf7; } /* 실제 저장 카드를 보여줍니다. */
.gr-calm .share-preview-wrap.is-story { max-width: 300px; } /* 긴 이미지가 페이지를 과하게 차지하지 않습니다. */
.gr-calm :is(.share-btn-story, .share-btn-link, .garden-share-btn) { background: #f0eaf8; color: #443750; border: 1px solid #e5d8f1; box-shadow: none; font-weight: 600; } /* 진한 분홍 그라데이션을 없앱니다. */
.gr-calm .share-btn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* 네 버튼을 두 줄로 나눠 그림보다 커지지 않게 합니다. */
.gr-calm .share-btn-grid .share-btn { min-width: 0; min-height: 52px; border-radius: 16px; padding: 12px 8px; font-size: 13px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } /* 긴 번역도 버튼 안에서 읽히게 합니다. */
.gr-calm .gr-start-tracker { display: block; width: 100%; margin-top: 12px; min-height: 48px; font-size: 15px; } /* 결과 아래 루틴 시작 버튼입니다. */
.gr-calm :is(.routine-cta-inline-title, .routine-cta-inline-sub) { color: var(--primary); } /* 하단 설명의 진한 보라색을 공통 글자색으로 맞춥니다. */
@media (max-width: 380px) {
  .gr-calm .container { padding-inline: 16px; } /* 더 작은 휴대폰의 좌우 공간입니다. */
  .gr-brandbar { gap: 6px; } /* 로고와 언어 사이 간격입니다. */
  .gr-brand { gap: 5px; font-size: 14px; } /* 브랜드가 언어 선택을 밀지 않습니다. */
  .gr-brand img { width: 26px; height: 26px; } /* 작은 화면의 로고 크기입니다. */
  .gr-calm .lang-selector .lang-btn { min-width: 27px; padding-inline: 3px; } /* 언어 선택을 한 줄에 유지합니다. */

}
.gr-share-dialog { position: fixed; inset: 0; margin: auto; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 24px; border: 1px solid #e6dfe8; border-radius: 24px; background: #fcfaf7; color: #38323c; overflow-y: auto; } /* 전역 여백 초기화에도 공유 창을 가운데 놓습니다. */
.gr-share-dialog::backdrop { background: #30283866; backdrop-filter: blur(4px); } /* 배경 내용과 공유 카드를 구분합니다. */
.gr-share-dialog h2 { font-size: 18px; padding-right: 32px; margin: 0 0 16px; word-break: keep-all; overflow-wrap: anywhere; } /* 긴 식물 이름도 자연스럽게 줄바꿈합니다. */
.gr-share-dialog img { width: 100%; height: auto; border-radius: 16px; display: block; } /* 실제 PNG 비율을 유지합니다. */
.gr-share-close { position: absolute; right: 12px; top: 10px; border: 0; background: transparent; color: #766d7b; font-size: 28px; width: 44px; height: 44px; cursor: pointer; } /* 닫기 버튼의 손가락 영역입니다. */
.gr-share-actions { display: grid; gap: 10px; margin-top: 16px; } /* 공유·저장·복사를 따로 구분합니다. */
.gr-share-actions .btn { width: 100%; min-height: 44px; } /* 긴 버튼 문구도 한 칸에 맞춥니다. */
/* 이 구역: 승인한 견본의 정보 순서와 비율을 적용합니다. */
.gr-calm [hidden] { display: none !important; } /* 표시용 스타일이 숨김 속성을 덮지 않게 합니다. */
.gr-calm .container { max-width: 560px; } /* 넓은 화면에서도 휴대폰 앱처럼 읽히는 폭입니다. */
.gr-calm .tab-bar { width: min(100%, 560px); } /* 하단 메뉴도 같은 폭으로 맞춥니다. */
.gr-calm .landing-return-hero { max-width: none; padding: 12px 0; text-align: center; } /* 다른 메뉴와 초대 카드 사이의 과도한 여백을 줄입니다. */
.gr-calm .lrh-hi { text-align: left; font-size: 20px; margin: 4px 0 0; } /* 견본의 작은 정원 제목입니다. */
.gr-calm .lrh-svg { width: 230px; height: 210px; margin: 0 auto; } /* 견본처럼 첫 화면에 상품까지 들어오게 합니다. */
.gr-calm .lrh-svg svg { width: 230px; height: 230px; } /* 원본 캐릭터의 비율은 유지합니다. */
.gr-calm .lrh-name { font-size: 19px; margin-top: -8px; } /* 그림과 이름을 한 덩어리로 보이게 합니다. */
.gr-calm .lrh-meta { font-size: 13px; color: var(--muted-foreground); margin: 6px 0 16px; } /* 짧은 안내만 남깁니다. */
.gr-calm .lrh-cta { width: 100%; min-height: 46px; margin: 0; padding: 12px 18px; } /* 오늘의 루틴을 하나의 주 버튼으로 둡니다. */
.gr-calm .lrh-links { display: flex; gap: 8px; margin: 6px 0 20px; border-bottom: 1px solid var(--border); } /* 결과 보기 등을 얇은 한 줄 메뉴로 만듭니다. */
.gr-calm .lrh-links button { width: 100%; border: 0; border-radius: 0; text-align: left; background: transparent; padding: 12px 4px; } /* 네 개의 상자 버튼을 없앱니다. */
.gr-home-products-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; text-align: left; margin: 14px 0 10px; } /* 상품 제목과 더보기를 나란히 놓습니다. */
.gr-home-products-head button { border: 0; background: transparent; color: #766d7b; font-size: 13px; min-height: 40px; cursor: pointer; } /* 더보기는 주요 버튼보다 작게 둡니다. */
.gr-home-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* 견본처럼 상품 두 개를 비교합니다. */
.gr-home-products > p { grid-column: 1 / -1; font-size: 14px; color: var(--muted-foreground); } /* 준비 중 안내입니다. */
.gr-home-product { border: 0; background: transparent; border-radius: 16px; padding: 8px; display: flex; flex-direction: column; align-items: center; min-width: 0; cursor: pointer; gap: 10px; color: var(--foreground); font-family: inherit; } /* 같은 행의 두 제품을 일정한 여백으로 비교합니다. */
.gr-product-photo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: #f4f1f5; border: 1px solid #eee9f0; border-radius: 14px; } /* 홈과 추천 목록에 같은 부드러운 사진 틀을 사용합니다. */
.gr-product-photo-home { width: 100%; height: 128px; padding: 12px; } /* 상품마다 사진 비율이 달라도 사진 영역 높이는 같습니다. */
.gr-product-photo-list { width: 72px; height: 80px; padding: 6px; border-radius: 12px; } /* 추천 목록에서는 제품 설명을 위한 자리를 확보합니다. */
.gr-product-photo img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } /* 사진을 자르거나 늘리지 않고 틀 안에 맞춥니다. */
.gr-product-photo-empty { position: absolute; font-size: 26px; opacity: .45; } /* 사진이 없어도 제품 자리임을 알 수 있습니다. */
.gr-home-product-name { flex: 1; width: 100%; font-size: 14px; font-weight: 600; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; } /* 제품명 길이가 달라도 두 가격의 높이를 맞춥니다. */
.gr-home-product-price { font-size: 13px; color: var(--muted-foreground); } /* 가격은 이름 아래에 둡니다. */
.gr-home-more { margin-top: 18px; text-align: left; font-size: 13px; color: var(--muted-foreground); } /* 부가 메뉴는 접어둡니다. */
.gr-home-more summary { cursor: pointer; min-height: 44px; padding: 12px 0; } /* 펼치는 영역도 누르기 쉽게 합니다. */
.gr-home-secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--border); } /* 보조 메뉴의 폭과 간격을 똑같이 맞춥니다. */
.gr-home-secondary button { min-width: 0; min-height: 44px; padding: 10px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 13px; line-height: 1.5; text-align: center; word-break: keep-all; overflow-wrap: anywhere; cursor: pointer; transition: background .2s ease, color .2s ease; } /* 글씨는 작고 차분하게, 손가락으로 누르는 영역은 충분하게 둡니다. */
.gr-home-secondary button:hover { background: var(--muted); color: var(--foreground); } /* 선택할 때만 보조 메뉴를 은은하게 강조합니다. */
.gr-home-secondary button:focus-visible { outline: 2px solid #8d77a8; outline-offset: 2px; } /* 키보드로 선택하는 위치를 명확히 보여줍니다. */
.gr-calm #page-tracker > .header { text-align: left !important; margin: 20px 0 16px; } /* 루틴 화면은 작고 직접적인 제목으로 시작합니다. */
.gr-calm #page-tracker > .header .header-badge { display: none; } /* 같은 뜻의 제목 반복을 없앱니다. */
.gr-calm #page-tracker .subtitle { font-size: 13px; } /* 날짜의 비중을 줄입니다. */
.gr-calm #sec-tracker-today > .sec-head, .gr-calm #sec-rec-steps > .sec-head { display: none; } /* 시간대·단계 메뉴가 기존 접이식 보고서 제목을 대신합니다. */
.gr-calm #sec-tracker-today, .gr-calm #sec-rec-steps { border: 0; background: transparent; } /* 중첩 상자를 없앱니다. */
.gr-period-tabs { display: flex; padding: 4px; background: #f2edf6; border-radius: 100px; gap: 4px; margin: 12px 0 16px; } /* 견본의 아침·저녁 전환입니다. */
.gr-period-tabs button { flex: 1; min-width: 0; min-height: 44px; border: 0; border-radius: 100px; background: transparent; color: #766d7b; font: inherit; font-size: 14px; cursor: pointer; } /* 양쪽 탭 크기를 같게 합니다. */
.gr-period-tabs button.active { background: #dfd0ef; color: #443750; font-weight: 600; } /* 선택한 시간대만 강조합니다. */
.gr-calm .routine-check-item { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 18px 0; box-shadow: none; } /* 루틴을 정돈된 목록으로 보여줍니다. */
.gr-calm .routine-check-item > div { min-width: 0; } /* 긴 제품명이 목록 폭을 밀어내지 않습니다. */
.gr-calm .routine-check-item { align-items: flex-start; } /* 체크 원이 긴 제품 설명 중간으로 내려가지 않게 제목에 맞춥니다. */
.gr-calm .routine-checkbox { margin-top: 2px; } /* 체크 원과 첫 줄의 기준선을 맞춥니다. */
.gr-calm :is(.lifestyle-card, .mypage-card) { border: 1px solid var(--border); box-shadow: none; } /* 남아 있는 두 메뉴의 외곽선을 다른 화면과 맞춥니다. */
.gr-calm :is(.lifestyle-card-icon, .mypage-card-icon) { background: var(--accent-light) !important; color: var(--primary) !important; width: 40px; height: 40px; font-size: 20px; border-radius: 12px; flex-shrink: 0; } /* 강한 원색 대신 같은 연한 바탕에서 기존 귀여운 그림을 살립니다. */
.gr-calm .mypage-card-icon.bg-red { background: #faeeee !important; color: #945b5b !important; } /* 삭제 메뉴의 의미는 옅은 붉은색으로 구분합니다. */
.gr-calm #mypage-level-badge { display: none; } /* 바로 아래 진행 막대와 중복되는 레벨 문구만 덜어냅니다. */
.gr-calm .routine-checkbox { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border-color: #d9cde3; } /* 체크를 작은 원형 버튼으로 다듬습니다. */
.gr-calm .routine-check-item.checked { background: #f4f7f1; } /* 완료한 줄을 가볍게 구분합니다. */
.gr-calm .product-mini { background: #f6f3f7; border: 0; box-shadow: none; flex-wrap: wrap; } /* 제품은 루틴 아래 보조 영역입니다. */
.gr-calm .product-mini-info { min-width: 100px; flex: 1; } /* 긴 이름이 버튼과 겹치지 않습니다. */
.gr-calm .garden-card { margin-top: 24px; padding: 18px; background: #f5f3ef; border: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; } /* 정원은 루틴 아래의 작고 독립된 공간입니다. */
.gr-calm .garden-head, .gr-calm .garden-care-row, .gr-calm .garden-share-btn, .gr-calm #calm-garden-tools, .gr-calm #a2hs-garden-slot, .gr-calm #garden-graduate-btn { grid-column: 1 / -1; } /* 조작 영역은 전체 폭으로 유지합니다. */
.gr-calm .garden-days { grid-column: 2; margin: 16px 0 0; font-size: 13px; background: transparent; padding: 0; } /* 일수는 화분 옆의 정보입니다. */
.gr-calm .garden-svg-wrap { grid-column: 1; grid-row: 2 / 6; width: 150px; height: 150px; margin: 0; display: flex; align-items: center; } /* 빈 공간을 줄이고 화분을 왼쪽에 놓습니다. */
.gr-calm .garden-svg-wrap svg { width: 150px; height: 126px; } /* 원본 화분의 비율을 유지합니다. */
.gr-calm .garden-stage-row, .gr-calm .garden-growth-bar-wrap, .gr-calm .garden-status { grid-column: 2; font-size: 13px; margin: 0; } /* 성장 정보는 화분 옆으로 모읍니다. */
.gr-calm .garden-care-row { margin-top: 16px; } /* 돌보기 버튼과 화분을 구분합니다. */
.gr-calm .garden-share-btn { min-height: 44px; font-size: 14px; margin-top: 10px; border-radius: 100px; } /* 공유는 상점과 분리된 보조 버튼입니다. */
.gr-step-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 0 16px; } /* 기존 여섯 단계 구조를 유지하고 아래 카드까지 간격만 통일합니다. */
.gr-step-choice { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: #766d7b; font: inherit; font-size: 13px; line-height: 1.5; min-height: 44px; min-width: 0; cursor: pointer; word-break: keep-all; overflow-wrap: anywhere; } /* 두 줄의 메뉴를 같은 높이와 가운데 기준선에 맞춥니다. */
.gr-step-choice span { font-size: 13px; flex-shrink: 0; color: #8b789e; } /* 순서 번호를 작게 표시합니다. */
.gr-step-choice.active { color: #443750; background: #f0e7f8; border-color: #e1d5ec; } /* 선택한 단계 하나만 강조합니다. */
.gr-calm #recommend-routine-steps .routine-step { border: 1px solid var(--border); padding: var(--rec-inset); margin: 0 0 20px; border-radius: 20px; box-shadow: none; } /* 제목부터 제품 설명까지 같은 안쪽 여백을 둡니다. */
.gr-calm #recommend-routine-steps .routine-step-header { padding: 0; margin: 0 0 16px; } /* 제목 아래 불규칙한 이중 여백을 없앱니다. */
.gr-calm #recommend-routine-steps .prod-thumb { width: 72px; height: 80px; object-fit: contain; float: none; flex-shrink: 0; background: #f8f5f1; border-radius: 12px; } /* 사진 크기를 고정해 상품명 자리를 확보합니다. */
.gr-calm #page-recommend > .header { margin: 18px 0 12px; text-align: left !important; } /* 추천 제목을 작게 왼쪽에 놓습니다. */
.gr-calm #page-recommend > .header .header-badge, .gr-calm #page-recommend > .header .subtitle { display: none; } /* 제목 위아래 중복 설명을 덜어냅니다. */
.gr-calm #page-recommend > .header h1 { font-size: 18px; line-height: 1.5; } /* 긴 이름에도 읽기 편한 제목 크기입니다. */
.gr-calm #recommend-routine-steps .routine-step-header { background: transparent; cursor: default; } /* 제목을 잘못 눌러 내용이 사라지지 않습니다. */
.gr-calm #recommend-routine-steps :is(.routine-step-num, .routine-step-desc, .routine-step-sub, .routine-step-chevron, .routine-step-title > span, .product-tier-title) { display: none; } /* 위 단계 선택과 겹치는 정보를 줄입니다. */
.gr-calm #recommend-routine-steps .routine-step-body { padding: 0; margin: 0; } /* 화면 크기에 따라 추가되던 본문 여백을 통일합니다. */
.gr-calm #recommend-routine-steps .product-tier-section { margin: 0; padding: 0; border: 0; } /* 성분 상자 아래 중복 여백을 제거합니다. */
.gr-calm #recommend-routine-steps .product-tier-card { padding: 0; background: transparent; border: 0; box-shadow: none; } /* 가격대 목록의 외곽 상자를 없앱니다. */
.gr-product-row { padding: 20px 0; border-bottom: 1px solid var(--border); } /* 제품끼리 같은 간격으로 분리합니다. */
.gr-product-row:last-child { border-bottom: 0; padding-bottom: 4px; } /* 마지막 제품 아래 구분선은 겹치지 않습니다. */
.gr-product-score { font-size: 13px; white-space: nowrap; font-weight: 500; } /* 점수를 이름보다 작게 표시합니다. */
.gr-calm .gr-product-row .product-tier-name { font-size: 15px; line-height: 1.5; font-weight: 600; } /* 제품명은 두세 줄 안에 읽히게 합니다. */
.gr-calm .gr-product-row .product-tier-brand { font-size: 13px; line-height: 1.6; margin: 6px 0 0; } /* 긴 가격 설명도 사진 옆에서 안정적으로 줄바꿈합니다. */
.gr-calm .gr-product-row .rec-add-routine { display: block; margin: 14px 0 0; width: 100%; min-height: 42px; border-radius: 12px; padding: 10px 12px; } /* 버튼을 임의로 들여쓰지 않고 카드 본문 전체에 맞춥니다. */
.gr-product-detail summary, .gr-step-explanation summary { cursor: pointer; padding: 12px 2px; min-height: 44px; font-size: 13px; line-height: 1.5; color: #766d7b; } /* 펼치기 버튼도 사진과 동일한 시작점입니다. */
.gr-product-detail summary { margin: 0; } /* 내용과 제목이 서로 다른 위치에서 시작하지 않습니다. */
.gr-step-explanation { margin-top: 12px; border-bottom: 1px solid var(--border); } /* 핵심 성분은 제품 목록 다음에 남깁니다. */
@media (max-width: 380px) { .gr-calm .garden-card { grid-template-columns: 115px minmax(0, 1fr); gap: 4px 10px; } .gr-calm .garden-svg-wrap { width: 115px; } .gr-calm .garden-svg-wrap svg { width: 115px; } .gr-step-choice { padding: 8px 4px; gap: 4px; } } /* 작은 폰에서도 옆 정보가 잘리지 않습니다. */
.gr-calm #page-recommend { --rec-inset: 20px; } /* 추천 화면은 하나의 공통 안쪽 여백을 사용합니다. */
.gr-calm #sec-rec-steps { margin-top: 16px; } /* 페이지 제목과 단계 메뉴 간격을 줄입니다. */
.gr-calm #sec-rec-steps > .sec-body { padding-top: 0; } /* 메뉴 아래와 카드 위에 여백이 중복되지 않습니다. */
.gr-calm #recommend-routine-steps .product-tier-tabs { margin: 0 0 2px; } /* 가격대 탭과 첫 사진 사이에는 제품 행의 여백만 사용합니다. */
.gr-calm .gr-product-heading { gap: 12px !important; } /* 사진과 글자 사이 간격입니다. */
.gr-calm .gr-product-row .product-tier-name { margin: 0; } /* 이름 아래 간격은 가격 영역이 관리합니다. */
.gr-product-detail-body { padding: 14px; background: #f8f6fa; border-radius: 12px; } /* 설명을 펼쳐도 카드 밖으로 튀어나오지 않습니다. */
.gr-calm .gr-product-detail .gr-product-proof { margin: 0 !important; line-height: 1.75 !important; overflow-wrap: anywhere; word-break: normal; } /* 긴 성분명과 개수를 자연스럽게 줄바꿈합니다. */
.gr-product-proof > span { display: block; } /* 핵심·권장·주의 항목을 각각 읽기 쉬운 줄로 표시합니다. */
.gr-product-buy-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } /* 구매처 버튼이 붙거나 높이가 달라지지 않습니다. */
.gr-product-buy-links:first-child { margin-top: 0; } /* 성분 설명이 없을 때 빈 공간을 만들지 않습니다. */
.gr-calm .gr-product-buy-links a { display: inline-flex; justify-content: center; align-items: center; margin: 0; min-height: 40px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; word-break: keep-all; } /* 두 구매 버튼의 규격을 맞춥니다. */
.gr-calm summary:focus-visible { outline: 2px solid #8d77a8; outline-offset: 2px; border-radius: 8px; } /* 키보드 선택은 보라색 테두리로 명확하게 표시합니다. */
.gr-calm summary:focus:not(:focus-visible) { outline: none; } /* 마우스로 펼친 설명에 검은 선택 테두리가 남지 않습니다. */
.gr-landing-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; } /* 앞 영역의 아래 여백과 더해 일정한 간격을 만듭니다. */
.gr-invite-card { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border: 1px solid #e8dfef; border-radius: 20px; background: linear-gradient(135deg, #f6effb 0%, #f0f5ef 100%); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; } /* 부드러운 초대 카드 하나로 기존 공유 기능을 보여줍니다. */
.gr-invite-card:hover { border-color: #c8b8d7; } /* 초대 카드 전체가 눌리는 영역임을 알려줍니다. */
.gr-invite-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } /* 초대 문구 세 줄의 왼쪽을 맞춥니다. */
.gr-invite-copy strong { font-size: 16px; line-height: 1.5; font-weight: 600; word-break: keep-all; } /* 짧은 질문을 주인공으로 둡니다. */
.gr-invite-copy > span { font-size: 13px; line-height: 1.6; color: var(--muted-foreground); word-break: keep-all; overflow-wrap: anywhere; } /* 긴 번역도 잘리지 않습니다. */
.gr-invite-copy .gr-invite-action { margin-top: 4px; color: #75628e; font-weight: 600; } /* 앱 링크를 보낸다는 행동 문구입니다. */
.gr-invite-art { display: flex; align-items: center; width: 92px; height: 88px; flex-shrink: 0; } /* 작은 두 식물로 친구 초대 느낌을 냅니다. */
.gr-invite-art > span { width: 54px; height: 72px; flex-shrink: 0; } /* 기존 캐릭터를 같은 그림 크기로 배치합니다. */
.gr-invite-art > span + span { margin-left: -16px; margin-top: 18px; } /* 식물 두 개를 살짝 포개어 리듬을 줍니다. */
.gr-invite-art svg { display: block; width: 100%; height: 100%; } /* 원본 식물의 비율을 유지합니다. */
.gr-calm .gr-brand-contact { color: var(--foreground); text-decoration: none; border: 1px solid var(--border); box-shadow: none; } /* 브랜드 문의를 기존 마이 메뉴의 카드 형태로 맞춥니다. */
.gr-brand-contact .mypage-card-icon { background: var(--accent-light); color: var(--primary); } /* 문의 아이콘도 앱의 차분한 색상을 사용합니다. */
.gr-calm #page-mypage .mypage-card-text { min-width: 0; } /* 기존 마이 메뉴도 긴 번역 문구가 화살표를 밀어내지 않게 합니다. */
.gr-calm #page-mypage :is(.mypage-card-title, .mypage-card-sub) { overflow-wrap: anywhere; } /* 일본어와 긴 연락처도 카드 안에서 자연스럽게 줄바꿈합니다. */
.gr-brand-contact :is(.mypage-card-title, .mypage-card-sub) { display: block; } /* 제목과 설명을 다른 마이 메뉴처럼 두 줄로 배치합니다. */
.gr-brand-contact .mypage-card-sub { margin-top: 4px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; } /* 제목과 설명 사이를 읽기 편하게 띄웁니다. */
.gr-home-name { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; margin: -8px auto 0; padding: 4px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--foreground); font: inherit; cursor: pointer; } /* 캐릭터 아래 이름을 눌러 편집합니다. */
.gr-calm .gr-home-name .lrh-name { margin: 0; overflow-wrap: anywhere; word-break: keep-all; } /* 긴 별명도 중앙에서 자연스럽게 줄바꿈합니다. */
.gr-home-name-line { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; } /* 이름과 연필의 수직 중심을 맞춥니다. */
.gr-home-name-pencil { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--accent-light); color: #75628e; } /* 작은 연필을 옅은 동그라미 안에 둡니다. */
.gr-home-name-pencil svg { width: 14px; height: 14px; } /* 연필이 이름보다 튀지 않게 합니다. */
.gr-home-name-hint { font-size: 13px; line-height: 1.5; color: #75628e; } /* 아이콘 아래에는 짧은 말로 기능을 알려줍니다. */
.gr-home-name:hover { background: #f3edf8; } /* 이름을 클릭할 수 있음을 부드럽게 표시합니다. */
@media (max-width: 480px) { .gr-calm #page-recommend { --rec-inset: 16px; } .gr-calm #recommend-routine-steps .prod-thumb, .gr-product-photo-list { width: 64px; height: 72px; } .gr-product-photo-home { height: 116px; padding: 10px; } } /* 작은 화면에서도 사진 비율과 양쪽 여백을 맞춥니다. */
@media (prefers-reduced-motion: reduce) {
  .gr-calm *, .gr-calm *::before, .gr-calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* 움직임 줄이기 설정을 존중합니다. */
}

/* 이 구역: 기존 정원을 유지하면서 실제 성장 단계와 개별 캐릭터 움직임을 연결합니다. */
.gr-calm #lrh-svg { display: grid; place-items: center; } /* 씨앗부터 성체까지 같은 그림 자리의 가운데 놓습니다. */
.gr-calm #lrh-svg .garden-scene { background: var(--background); } /* 움직이는 그림의 흰 사각 배경이 홈 바탕과 섞이게 합니다. */
.garden-scene { position: relative; width: 100%; aspect-ratio: 200 / 168; isolation: isolate; } /* 모든 정원에서 같은 비율을 사용합니다. */
.garden-card .garden-scene { background: #f5f3ef; } /* 힉스필드의 흰 바탕을 정원 카드의 바탕색에 맞춥니다. */
.gr-calm .garden-scene > svg { display: block; width: 100%; height: 100%; } /* 화면 크기에 맞춰 그림과 영상이 함께 줄어듭니다. */
.garden-scene .garden-motion-head { position: absolute; height: auto; margin: 0; mix-blend-mode: multiply; } /* 영상의 흰 배경이 화분을 가리지 않게 합니다. */
.garden-has-clip .garden-character-head { visibility: hidden; } /* 같은 자리에 원본과 영상이 겹치지 않습니다. */
.garden-has-clip > svg > .garden-sway { animation: none; } /* 고정된 영상 위치와 줄기가 따로 흔들리지 않게 합니다. */
.garden-scene[data-mood="happy"][data-stage="seed"] .garden-sway { animation: gardenSeedPeek 2.8s ease-in-out infinite; } /* 씨앗은 잠깐 빼꼼 올라왔다 내려갑니다. */
.garden-scene[data-mood="happy"][data-stage="seed"] .garden-pot { transform-origin: 100px 158px; animation: gardenPotRock 4.1s ease-in-out infinite; } /* 씨앗일 때도 화분 얼굴이 살짝 까딱입니다. */
.garden-scene[data-mood="happy"][data-stage="sprout"] .garden-sway { animation: gardenSproutHello 3.4s ease-in-out infinite; } /* 새싹은 작은 잎으로 인사하듯 흔들립니다. */
@keyframes gardenSeedPeek { 0%, 45%, 100% { transform: translateY(0); } 60%, 70% { transform: translateY(-4px); } } /* 씨앗의 짧은 고개 들기입니다. */
@keyframes gardenPotRock { 0%, 65%, 100% { transform: rotate(0); } 73% { transform: rotate(-3deg); } 82% { transform: rotate(3deg); } 90% { transform: rotate(-1deg); } } /* 짧게 움직인 뒤 쉬는 화분입니다. */
@keyframes gardenSproutHello { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-7deg); } 78% { transform: rotate(6deg); } 89% { transform: rotate(-3deg); } } /* 새싹은 씨앗과 다른 동작을 합니다. */
.garden-growth-guide-btn { grid-column: 1 / -1; justify-self: end; padding: 8px 2px; min-height: 40px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } /* 큰 버튼을 늘리지 않고 성장 안내만 작게 연결합니다. */
.growth-guide { width: min(800px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; margin: auto; border: 1px solid var(--border); border-radius: 24px; background: var(--background); color: var(--foreground); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; } /* 작은 휴대폰에서도 창 안에서 끝까지 볼 수 있습니다. */
.growth-guide::backdrop { background: #302b3c66; backdrop-filter: blur(4px); } /* 뒤쪽 화면을 흐리게 하되 현재 위치를 유지합니다. */
.growth-guide-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* 제목과 닫기를 한 줄로 맞춥니다. */
.growth-guide-header h2 { font-size: 20px; line-height: 1.5; margin: 0; } /* 제목보다 식물들이 먼저 보이게 합니다. */
.growth-guide-close { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--foreground); font-size: 24px; cursor: pointer; } /* 닫기 영역을 충분히 확보합니다. */
.growth-guide-intro { margin: 12px 0 18px; font-size: 14px; color: var(--muted-foreground); line-height: 1.7; } /* 미리보기 안내를 차분하게 보여줍니다. */
.growth-guide-label { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 20px; } /* 품종 선택 제목과 입력을 붙여 둡니다. */
.growth-guide-label > span { flex-shrink: 0; } /* 선택 제목이 한 글자씩 떨어지지 않습니다. */
.growth-guide-label select { min-width: 0; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--foreground); font: inherit; } /* 긴 캐릭터 이름도 선택창 안에 들어갑니다. */
.growth-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } /* 일곱 단계를 일정한 칸에 놓습니다. */
.growth-guide-stage { min-width: 0; padding: 14px 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); text-align: center; } /* 각 단계의 안쪽 간격을 같게 맞춥니다. */
.growth-guide-stage h3 { margin: 0; font-size: 13px; line-height: 1.6; } /* 번호와 이름이 사진을 가리지 않습니다. */
.growth-guide-art { width: 100%; max-width: 168px; margin: 8px auto; } /* 실제 정원과 같은 그림을 사용합니다. */
.growth-guide-stage p { margin: 0; font-size: 13px; color: var(--muted-foreground); } /* 기준 수치를 각 그림 아래 놓습니다. */
.growth-guide-locked { background: var(--muted); border-style: dashed; } /* 잠긴 단계는 식물 그림 없이 구분합니다. */
.growth-guide-mystery { display: grid; place-items: center; aspect-ratio: 200 / 168; font-size: 40px; font-weight: 500; color: var(--accent); } /* 구체적 외형을 암시하지 않고 궁금한 마음만 남깁니다. */
.growth-guide-notes { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--border); } /* 성장 규칙을 그림 다음에 설명합니다. */
.growth-guide-notes p { font-size: 14px; line-height: 1.8; margin: 12px 0; word-break: keep-all; overflow-wrap: anywhere; } /* 긴 한국어 설명을 자연스럽게 줄바꿈합니다. */
@media (max-width: 600px) { .growth-guide { padding: 18px; } .growth-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } /* 모바일에서는 가로 스크롤 없이 두 칸씩 봅니다. */
@media (prefers-reduced-motion: reduce) { .garden-scene * { animation: none !important; } } /* 움직임 줄이기 설정에서는 화분도 정지합니다. */
.gr-link-share { box-sizing: border-box; width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow-y: auto; border: 1px solid var(--border); border-radius: 24px; background: var(--card, #fff); color: var(--foreground); } /* 작은 화면에서도 창을 벗어나지 않습니다. */
.gr-link-share::backdrop { background: #302b3c66; backdrop-filter: blur(4px); } /* 원래 화면은 그대로 둡니다. */
.gr-link-share-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* 제목과 닫기 간격을 일정하게 둡니다. */
.gr-link-share h2 { font-size: 19px; line-height: 1.5; margin: 0; word-break: keep-all; } /* 긴 제목도 자연스럽게 읽힙니다. */
.gr-link-share p { font-size: 14px; line-height: 1.7; color: var(--muted-foreground); word-break: keep-all; overflow-wrap: anywhere; } /* 안내가 한 글자씩 떨어지지 않게 합니다. */
.gr-link-share label { display: block; margin-top: 20px; font-size: 13px; font-weight: 600; } /* 주소 항목의 의미를 붙입니다. */
.gr-link-share input { box-sizing: border-box; display: block; width: 100%; margin-top: 8px; padding: 14px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--background); color: var(--foreground); font: inherit; font-size: 16px; } /* 선택하거나 길게 눌러 수동 복사할 수 있습니다. */
.gr-link-share-image { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: contain; margin-top: 16px; border: 1px solid var(--border); box-sizing: border-box; border-radius: 16px; background: #fcfbf9; } /* 친구가 보게 될 식물 사진을 같은 비율로 보여줍니다. */
.gr-link-share-actions { display: grid; gap: 10px; margin-top: 18px; } /* 좁은 휴대폰에서도 버튼을 같은 너비로 놓습니다. */
.gr-link-share-actions .btn { width: 100%; min-height: 46px; white-space: normal; font-size: 14px; } /* 두 가지 공유 방법을 구분합니다. */
.gr-link-share-status { min-height: 24px; margin: 12px 0 0; } /* 복사 결과가 나타나도 버튼이 움직이지 않습니다. */
.garden-species-art { mix-blend-mode: multiply; overflow: visible; } /* 흰 그림 배경이 정원의 바탕에 자연스럽게 어울립니다. */
.garden-species-body { transform-origin: 100px 154px; } /* 식물의 밑동을 기준으로 작게 움직입니다. */
.garden-species-art[data-drift="sway"] .garden-species-motion { animation: speciesSway var(--garden-period, 4s) ease-in-out infinite; } /* 갈대와 수련은 바람처럼 기울어집니다. */
.garden-species-art[data-drift="bob"] .garden-species-motion { animation: speciesBob var(--garden-period, 4s) ease-in-out infinite; } /* 열매와 이끼는 아주 조금 통통 움직입니다. */
.garden-species-art[data-drift="hello"] .garden-species-motion { animation: speciesHello var(--garden-period, 4s) ease-in-out infinite; } /* 선인장은 수줍게 까딱입니다. */
.garden-species-art[data-drift="breathe"] .garden-species-motion { animation: speciesBreathe var(--garden-period, 4s) ease-in-out infinite; } /* 잎과 꽃은 살짝 숨 쉬듯 움직입니다. */
@keyframes speciesSway { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } /* 과하게 흔들리지 않습니다. */
@keyframes speciesBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } } /* 작은 정원에서도 편안한 높이입니다. */
@keyframes speciesHello { 0%,55%,100% { transform: rotate(0); } 20% { transform: rotate(-2deg); } 35% { transform: rotate(1deg); } } /* 잠깐 인사한 뒤 쉽니다. */
@keyframes speciesBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018); } } /* 몸 전체가 자연스럽게 함께 움직입니다. */
@media (prefers-reduced-motion: reduce) { .garden-species-motion { animation: none !important; } } /* 기기의 움직임 줄이기 설정을 존중합니다. */
.gr-calm .gr-ranked-heading { margin: 20px 0 0; color: var(--primary); font-size: 13px; font-weight: 600; line-height: 1.6; } /* 첫 제품과 이어지는 추천의 흐름을 짧게 안내합니다. */
.gr-calm .gr-ranked-more { margin-top: 26px; color: var(--muted-foreground); } /* 나머지 추천도 추가 버튼 없이 이어집니다. */
.gr-calm #recommend-routine-steps .gr-product-best { padding: 18px 14px 10px; margin-top: 10px; background: #f6f2fa; border: 1px solid #e7deef; border-radius: 16px; } /* 높은 점수의 첫 제품에만 은은한 배경을 줍니다. */
.gr-calm #recommend-routine-steps .product-tier-tabs { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 6px; } /* 네 필터의 폭을 화면 안에 맞춥니다. */
.gr-calm #recommend-routine-steps .product-tier-tab { padding: 9px 4px; font-size: 13px; min-width: 0; white-space: normal; word-break: keep-all; } /* 모바일에서도 필터 글자가 한 글자씩 떨어지지 않습니다. */
.gr-calm #sec-rec-ai[hidden] { display: none !important; } /* 통합된 상위 추천을 중복해서 표시하지 않습니다. */
.gr-product-feedback { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } /* 피드백은 구매 설명 아래에서만 보입니다. */
.gr-product-feedback button { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--foreground); font: inherit; font-size: 13px; cursor: pointer; } /* 작은 보조 버튼도 눌리기 편하게 유지합니다. */
.gr-product-feedback button[aria-pressed="true"] { background: var(--accent-light); border-color: #cdbade; } /* 저장된 피드백의 선택을 표시합니다. */
@media (max-width: 480px) { :is(html:lang(en), html:lang(es)) .gr-step-nav, :is(html:lang(en), html:lang(es)) .gr-calm #recommend-routine-steps .product-tier-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(html:lang(en), html:lang(es)) .gr-step-choice { overflow-wrap: normal; } } /* 긴 외국어 메뉴가 한 글자만 아래로 떨어지지 않도록 충분한 폭을 줍니다. */