/* Figma eRtvwdrIaaublxQxCg87xO — 메인을 뺀 공개 화면 (2026-10-21 · 2026-10-24 심플 정리).
 * 피그마의 글자 크기, 테두리 없는 흰 카드, 단추 모양을 쓰되 키리웹의 초록/파랑 역할은 지킨다.
 * 구역 순서, 읽는 폭, 여백, 격자, 입력칸, 그림, 접기는 바꾸지 않는다. 라우팅·폼·인증·결제는 그대로다.
 *
 * ── 2026-10-24 ────────────────────────────────────────────────────
 *   - 바탕은 종이색(figma-site-style.css). 카드는 흰색에 테두리 없이 12px — 바탕과의 명도 차로 선다.
 *   - 연두·하늘·금빛 틴트 패널(수리 상담 상자, 후기 쓰기, 문의 폼, 답변, 평점 요약, 약관 콜아웃)은 흰 카드로.
 *   - 채운 실행 단추는 한 색: 초록 바탕에 흰 글자, 6px. 파랑은 금액·글자 링크에 남는다.
 *   - 그대로 두는 것: 상태 배지 색, 별점 금색과 별점 고르기 표시, 카카오·네이버 색, 결제 성공·실패 상자,
 *     비활성(disabled) 모양, 기기 모양 틀(border-2)의 둥근 모서리.
 */
body.figma-site-style:not(.site-refresh) {
  font-size: 16px;
  line-height: 1.65;
}
body.figma-site-style:not(.site-refresh):not(.dv):not(.dc) { color: var(--figma-ink); }

/* The reference's title scale, applied within the existing page containers. */
body.figma-site-style.public-page:not(.site-refresh) main h1,
body.figma-site-style.account-page .account-panel h1 {
  color: var(--figma-ink);
  font-size: clamp(32px, 3.1vw, 44px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}
body.figma-site-style.public-page:not(.site-refresh) main :is(h2, h3),
body.figma-site-style.account-page .account-panel :is(h2, h3) {
  color: var(--figma-ink);
  letter-spacing: -.02em;
}
body.figma-site-style.public-page:not(.site-refresh) main :is(h1 + p, .review-body, .qna-body, .article > p) {
  font-size: 16px;
  line-height: 1.65;
}
body.figma-site-style.public-document main.doc :is(p, li, td) { line-height: 1.75; }

/* 글자색: 돌색(stone) 계열을 피그마의 따뜻한 회색 두 단계로 모은다. 상태색(초록·파랑·금·장미)은 그대로. */
body.figma-site-style.public-page:not(.site-refresh) main :is(.text-stone-950, .text-stone-900, .text-stone-800) { color: var(--figma-ink); }
body.figma-site-style.public-page:not(.site-refresh) main :is(.text-stone-700, .text-stone-600, .text-stone-500) { color: var(--figma-muted); }
body.figma-site-style.public-page:not(.site-refresh) main :is(.border-stone-200, .border-stone-300, .border-stone-100) { border-color: var(--figma-line); }
body.figma-site-style.public-page:not(.site-refresh) main :is(.divide-stone-200, .divide-stone-100) > * { border-color: var(--figma-line); }

/* Apply shape to controls only. Informational tags, star ratings and state
 * badges keep their pill silhouettes and meaningful color differences.
 * Existing hover, focus, disabled, hidden and aria states are left in control.
 */
body.figma-site-style:not(.site-refresh) main :is(a, button):is(.bg-orange-700, .bg-amber-700, .bg-stone-900),
body.figma-site-style:not(.site-refresh) main :is(a, button):is(.border-stone-500, .border-amber-500, .border-orange-700, .border-amber-700) {
  border-radius: var(--figma-r-btn);
  font-weight: 700;
}
/* 모양만 맞추는 단추: 진한 테두리 단추, 카카오·네이버 단추(색은 각 회사 규정대로 둔다). */
body.figma-site-style:not(.site-refresh) main :is(a, button):is(.border-stone-900, [class~="bg-[#FEE500]"], [class~="bg-[#03C75A]"]) {
  border-radius: var(--figma-r-btn);
}
/* 테두리 단추는 피그마의 보조 단추: 흰 바탕 + 실선. */
body.figma-site-style:not(.site-refresh) main :is(a, button):is(.border-stone-500, .border-stone-300, .border-stone-900):not(.bg-orange-700):not(.bg-amber-700):not(.bg-stone-900) {
  border-color: var(--figma-control);
  background-color: #fff;
  color: var(--figma-ink);
}
body.figma-site-style:not(.site-refresh) main :is(a, button):is(.border-stone-500, .border-stone-300, .border-stone-900):not(.bg-orange-700):not(.bg-amber-700):not(.bg-stone-900):hover {
  background-color: var(--figma-paper);
}
body.figma-site-style:not(.site-refresh) main :is(a, button):is(.bg-orange-700, .bg-amber-700, .bg-stone-900):not(:focus-visible) { box-shadow: none; }
body.figma-site-style:not(.site-refresh) main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: var(--figma-r-btn);
  border-color: var(--figma-control);
  background-color: #fff;
}

/* 채운 실행 단추는 한 색으로 — 메인과 같은 초록 바탕·흰 글자.
 * 시안·업종별 디자인·사례 화면의 파란 단추와 404 의 검은 단추가 여기에 맞춰진다. 비활성 단추는 원래 모양 그대로.
 */
body.figma-site-style:not(.site-refresh):not(.dv):not(.dc) main :is(a, button):is(.bg-orange-700, .bg-amber-700, .bg-stone-900):not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--figma-accent);
  background-color: var(--figma-accent);
  color: #fff;
}
body.figma-site-style:not(.site-refresh):not(.dv):not(.dc) main :is(a, button):is(.bg-orange-700, .bg-amber-700, .bg-stone-900):not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--figma-accent-hover);
  background-color: var(--figma-accent-hover);
  color: #fff;
}

/* ── 카드: 흰색, 테두리 없음, 12px ───────────────────────────────────
 * Gallery, profile, template and service frames retain their original image bounds.
 */
body.figma-site-style.public-page:not(.site-refresh) main :is(article.rounded-2xl, section.rounded-2xl, div.rounded-2xl, dl.rounded-2xl, figure.rounded-2xl, li.rounded-2xl, a.rounded-2xl),
body.figma-site-style.public-page:not(.site-refresh) main article.rounded-3xl,
body.figma-site-style.public-gallery main > section:nth-of-type(2) > ul > li,
body.figma-site-style.public-demo [data-choose-cards] > article,
body.figma-site-style.public-page.public-community.public-reviews .review-products > div > a,
body.figma-site-style.review-page .review-products > div > a {
  border-color: transparent;
  border-radius: var(--figma-r-card);
  background-color: #fff;
  box-shadow: none;
}
body.figma-site-style.public-page:not(.site-refresh) main :is(.rounded-2xl, .rounded-3xl):not(.border-2) { border-radius: var(--figma-r-card); }
body.figma-site-style.public-page:not(.site-refresh) main .rounded-xl:not(.border-2) { border-radius: 8px; }
body.figma-site-style.public-page:not(.site-refresh) main :is(li.rounded-xl, div.rounded-xl, dl.rounded-xl, a.rounded-xl):is(.border, .bg-stone-50, .bg-white) {
  border-color: transparent;
  background-color: #fff;
}
body.figma-site-style.public-page:not(.site-refresh) main :is(.bg-stone-50, .bg-stone-100):not(.rounded-xl):not(.rounded-2xl):not(.rounded-3xl):not(button):not(a) { background-color: var(--figma-paper-deep); }
body.figma-site-style.public-gallery main > section:nth-of-type(2) > ul > li:hover,
body.figma-site-style.public-demo [data-choose-cards] > article:hover,
body.figma-site-style.public-page.public-reviews .review-products > div > a:hover { box-shadow: none; }
body.figma-site-style.public-page.public-community.public-reviews .review-products > div > a:hover { border-color: transparent; background: var(--figma-paper-deep); }
body.figma-site-style.public-case main figure { border-color: transparent; box-shadow: none; }
body.figma-site-style.public-case main figure:is(.shadow-lg, .shadow-sm) { box-shadow: var(--figma-shadow-float); }
body.figma-site-style.public-case main .rounded-3xl.border-2 { box-shadow: none; }
body.figma-site-style.public-case main.bg-orange-50 { background: transparent; }
body.figma-site-style.public-case main :is(.bg-stone-100, .bg-stone-50) { background-color: var(--figma-frame); }
body.figma-site-style.public-demo .demo-card-actions > :is(a, button) { border-radius: var(--figma-r-btn); }
/* 공지·사례 본문에 넣은 그림 (화면 안 <style> 의 .75rem 위에 덧입힌다) */
body.figma-site-style.public-page:not(.site-refresh) main .article img { border-radius: 8px; }
/* 표 머리 행의 회색 바탕은 걷고 실선만 남긴다 */
body.figma-site-style.public-page:not(.site-refresh) main :is(thead, tr).bg-stone-50,
body.figma-site-style.public-page:not(.site-refresh) main th.bg-stone-50 { background-color: transparent; }

/* ── 카드 안쪽 여백 (2026-10-24) ───────────────────────────────────
 * 홈의 카드와 같은 눈높이로 — p-5·p-6 카드를 한 단계 넓힌다(좁은 화면은 조금 덜).
 * 클래스로 고르는 것은 화면마다 카드 마크업이 따로 적혀 있어서다. 단추는 고르지 않는다.
 */
body.figma-site-style.public-page:not(.site-refresh) main :is(article, section, div, li, dl, a, p, figcaption):is(.rounded-xl, .rounded-2xl, .rounded-3xl).p-5,
body.figma-site-style.public-page:not(.site-refresh) main figure > figcaption:is(.p-4, .p-5),
body.figma-site-style.public-page:not(.site-refresh) main dl.rounded-2xl > div.p-5 { padding: 20px; }
body.figma-site-style.public-page:not(.site-refresh) main :is(article, section, div, li, dl, a):is(.rounded-xl, .rounded-2xl, .rounded-3xl).p-6,
body.figma-site-style.public-page:not(.site-refresh) main figure > figcaption.p-6,
body.figma-site-style.public-page:not(.site-refresh) main div.rounded-2xl.px-6.py-6 { padding: 24px; }
/* 줄로 나눈 설명 표(dl.divide-y): 줄마다 p-4 sm:p-5 — 카드 여백에 맞춘다 */
body.figma-site-style.public-page:not(.site-refresh) main dl.divide-y.rounded-xl > div { padding: 16px 20px; }
/* 관리 안내 '어떻게 진행되나요' 네 칸: inner-design 이 줄 목록(좌우 여백 0)으로 바꾼 것을
 * 위 카드 규칙이 흰 바탕으로 다시 칠해, 여백 없는 흰 상자가 돼 있었다. 카드 여백을 돌려준다. */
body.figma-site-style.public-care .care-steps > li { padding: 24px; }
body.figma-site-style.public-care .care-steps h3 { margin-top: 20px; }
body.figma-site-style.public-document main.doc .callout { padding: 16px 20px; }
@media (min-width: 640px) {
  body.figma-site-style.public-page:not(.site-refresh) main :is(article, section, div, li, dl, a, p, figcaption):is(.rounded-xl, .rounded-2xl, .rounded-3xl).p-5,
  body.figma-site-style.public-page:not(.site-refresh) main figure > figcaption:is(.p-4, .p-5),
  body.figma-site-style.public-page:not(.site-refresh) main dl.rounded-2xl > div.p-5 { padding: 24px; }
  body.figma-site-style.public-page:not(.site-refresh) main :is(article, section, div, li, dl, a):is(.rounded-xl, .rounded-2xl, .rounded-3xl).p-6,
  body.figma-site-style.public-page:not(.site-refresh) main figure > figcaption.p-6 { padding: 28px; }
  body.figma-site-style.public-page:not(.site-refresh) main div.rounded-2xl.px-6.py-6 { padding: 28px 32px; }
  body.figma-site-style.public-page:not(.site-refresh) main dl.divide-y.rounded-xl > div { padding: 20px 24px; }
  body.figma-site-style.public-care .care-steps > li { padding: 28px; }
  body.figma-site-style.public-document main.doc .callout { padding: 20px 24px; }
}

/* ── 틴트 패널 → 흰 카드 (2026-10-24) ──────────────────────────────── */
body.figma-site-style.public-care .care-contact {
  border-color: transparent;
  border-radius: var(--figma-r-card);
  background: #fff;
}
body.figma-site-style.public-community main :is(#qna-form, #review-panel),
body.figma-site-style.public-community.public-qna #answer > div,
body.figma-site-style.public-community.public-reviews .review-write.rounded-2xl,
body.figma-site-style.review-page .review-write.rounded-2xl,
body.figma-site-style.public-community.public-reviews :is(.review-summary.rounded-2xl, .review-summary > div.rounded-2xl),
body.figma-site-style.review-page :is(.review-summary.rounded-2xl, .review-summary > div.rounded-2xl) {
  border-color: transparent;
  border-radius: var(--figma-r-card);
  background: #fff;
}
body.figma-site-style.public-community { background: var(--figma-paper); }
body.figma-site-style.public-community.public-faq { background: var(--figma-paper); }
body.figma-site-style.public-document main.doc .callout {
  border-color: transparent;
  border-radius: 8px;
  background: #fff;
}

/* Account and consent panels retain their current steps and touch targets.
 * Provider colors and destructive actions are inherited without substitution.
 */
body.figma-site-style.account-page .account-panel,
body.figma-site-style.account-page :is(#consent-modal, #withdraw-modal) > div {
  border-color: transparent;
  border-radius: var(--figma-r-card);
  background: #fff;
  box-shadow: none;
}
body.figma-site-style.account-auth :is(#local-login-submit, #lf-submit, #consent-go, #consent-modal-agree, #local-join-link, #lf-send, #lf-psend, #lf-verify, #lf-pverify) { border-radius: var(--figma-r-btn); }
/* 계정 창 둘의 단추 줄. 전에는 '동의' 만 6px 이고 옆의 '모두 동의'·'닫기'·'취소'·'탈퇴합니다' 는 7.5px 이라 한 줄에 두 모양이 섞였다. */
body.figma-site-style.account-page :is(#consent-modal, #withdraw-modal) button.rounded-lg { border-radius: var(--figma-r-btn); }

/* The callback and private subscription views retain their amount hierarchy,
 * success/error colors, sticky charge column and private checkout destination.
 */
body.figma-site-style.payment-result-page > main > :is(div, section),
body.figma-site-style.payment-result-inline > main,
body.figma-site-style.checkout-landing .sl-charge {
  border-color: transparent;
  border-radius: var(--figma-r-card);
  background: #fff;
  box-shadow: none;
}
body.figma-site-style.checkout-landing .sl-hero h1 { letter-spacing: -.02em; }

/* Header and footer layout, paint and visibility remain in the shared sheets.
 * The demo tools keep their established dark viewing environment, swatches,
 * device outlines, iframe contents and show/hide behavior as well.
 */
body.figma-site-style:is(.dv, .dc) {
  background: #14120f;
  color: #e7e5e4;
  line-height: normal;
}
body.figma-site-style:is(.dv, .dc) :is(a[href], button):focus-visible { outline-color: #4fb2f5; }
body.figma-site-style :is(.dv-back, .dv-arrow, .dv-ghost, .dv-ask, .dv-start, .dc-back, .dc-solo, .dc-ask, .dc-start, .dv-panel-close) { border-radius: 6px; }
body.figma-site-style :is(.dv-seg, .dc-seg) { border-radius: 6px; }
body.figma-site-style :is(.dv-seg, .dc-seg) button { border-radius: 4px; }
body.figma-site-style :is(.dv-panel .dv-warn, .dc-warn) { border-radius: 12px; }

@media (max-width: 767px) {
  body.figma-site-style.public-page:not(.site-refresh) main h1,
  body.figma-site-style.account-page .account-panel h1 { font-size: clamp(28px, 7.2vw, 32px); }
}
@media (max-width: 639px) {
  /* Preserve the consent sheet's existing bottom attachment on small screens. */
  body.figma-site-style.account-page :is(#consent-modal, #withdraw-modal) > div { border-radius: 12px 12px 0 0; }
}