/* Figma eRtvwdrIaaublxQxCg87xO — 모든 공개 화면이 같이 쓰는 바탕 (2026-10-24 정리).
 *
 * 피그마에서 그대로 가져온 값
 *   - 종이색 바탕 #f7f6f2 : 화면 전체(머리말·꼬리말 포함)가 이 색이다. 흰색은 '카드' 에만 쓴다.
 *   - 글자 #20221f(진한) · #686b65(보조), 실선 #dddfd7(1px). 모두 초록기 없는 따뜻한 회색이다.
 *   - 상자 12px · 단추/입력칸 6px · 칩은 알약. 카드는 테두리 없이 바탕과의 명도 차로만 선다.
 *   - 그림자는 '떠 있는 화면 액자' 한 곳에만: 0 18px 48px rgba(32,34,31,.09).
 * 지키는 것: 초록(#456e25)은 행동·선택, 파랑(#1d6398)은 금액 — 기존 역할 그대로.
 *   피그마의 파란 포인트 자리에는 초록이 들어간다.
 * 이 층은 보이기/숨기기·격자·순서·링크를 바꾸지 않는다. 고객 데모·관리자 화면은 쓰지 않는다.
 */
body.figma-site-style {
  --figma-ink: #20221f;
  --figma-muted: #686b65;
  --figma-line: #dddfd7;
  --figma-line-strong: #c9cbc3;
  /* 입력칸·보조 단추·고르기 칸처럼 '누르는 것' 의 테두리. line-strong(#c9cbc3)은 흰 바탕 1.64:1 이라
     컨트롤 경계(WCAG 1.4.11, 3:1)로 못 쓴다 — 홈 결제 창 입력칸이 이미 쓰던 값으로 맞춘다
     (흰 바탕 3.30 · 종이색 3.06). line-strong 은 구분선 같은 장식에만 남긴다. (2026-10-25) */
  --figma-control: #8b8f83;
  --figma-paper: #f7f6f2;        /* 화면 바탕 */
  --figma-paper-deep: #f0f1eb;   /* 한 단 더 가라앉힌 구역 (피그마 '제작 사례 모음') */
  --figma-frame: #edeee7;        /* 화면 액자 뒤에 까는 면 */
  --figma-surface: #f7f6f2;
  --figma-alt: #f0f1eb;
  --figma-pale: #eef5e7;         /* 초록 틴트 — 피그마의 연파랑 요금 구역 자리 */
  --figma-white: #ffffff;
  --figma-accent: #456e25;
  --figma-accent-hover: #39591f;
  --figma-sky: #1d6398;
  --figma-r-card: 12px;
  --figma-r-btn: 6px;
  --figma-shadow-float: 0 18px 48px rgba(32, 34, 31, .09);
}
/* 종이색 바탕. 시안 뷰어(.dv/.dc)는 자기 어두운 바탕을 쓴다. */
body.figma-site-style:not(.dv):not(.dc) { background-color: var(--figma-paper); }
body.figma-site-style :where(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--figma-accent);
}
body.figma-site-style :where(input, select, textarea) { caret-color: var(--figma-accent); }

/* Figma 3:8183, requested copy only. Retain the original palette, menus and
 * all existing sections; this calm two-column introduction follows the price
 * choices instead of moving them below marketing content. No extra cards.
 */
body.site-refresh.figma-site-style #home-service-intro {
  padding: 64px 32px;
  background: var(--figma-paper);
}
body.site-refresh.figma-site-style #home-service-intro > .home-service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  max-width: var(--kw-content, 1296px);
  margin-inline: auto;
}
.figma-site-style .home-service-heading,
.figma-site-style .home-service-description { min-width: 0; }
.figma-site-style .home-service-label {
  color: var(--figma-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
body.site-refresh.figma-site-style #home-service-title {
  margin-top: 20px;
  color: var(--figma-ink);
  font-size: clamp(32px, 3.1vw, 44px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  word-break: keep-all;
}
.figma-site-style .home-service-description {
  padding-top: 52px;
  color: var(--figma-muted);
  font-size: 18px;
  line-height: 1.65;
}
.figma-site-style .home-service-description p { max-width: 55ch; }
@media (max-width: 1023px) {
  body.site-refresh.figma-site-style #home-service-intro { padding: 48px 24px; }
  body.site-refresh.figma-site-style #home-service-intro > .home-service-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .figma-site-style .home-service-description { padding-top: 0; }
}
@media (max-width: 767px) {
  body.site-refresh.figma-site-style #home-service-intro { padding: 40px 16px; }
  body.site-refresh.figma-site-style #home-service-title {
    margin-top: 16px;
    font-size: clamp(27px, 7.2vw, 32px);
    line-height: 1.35;
  }
  .figma-site-style .home-service-description { font-size: 16px; line-height: 1.75; }
}

/* ── 공통 머리말 (Figma 3:8102 주요 탐색) ──────────────────────────────
 * 메뉴 마크업은 화면마다 적혀 있어도 모양은 여기 한 곳에서 정한다.
 * 범위: header:has(#menu-button) — 공통 메뉴를 단 머리말만. 시안 뷰어·구독 랜딩·사례 상세는 걸리지 않는다.
 * 지키는 것
 *   - '시안 10종'·'제작 사례' 도 다른 메뉴와 같은 글자로 보인다(2026-10-24 사장님 결정 — 더 심플하게).
 *     마크업의 bg-orange-100·bg-amber-100·font-bold 는 그대로 둔다. RouteSmokeTest 가 그 클래스를 지키고,
 *     강조를 되살리고 싶으면 아래 두 규칙만 지우면 된다 — 보이는 것만 이 층에서 지운다.
 *   - 구독하기는 머리말의 유일한 실행 단추라 초록 단추(6px)로 둔다.
 *   - display 는 건드리지 않는다. 로그인 링크는 .hidden 으로 감춘다 — HiddenClassCascadeTest.
 *   - 지금 보고 있는 메뉴 표시(aria-current)는 site.css 의 파란 밑줄을 그대로 쓴다.
 */
body.figma-site-style header:has(#menu-button) {
  border-bottom-color: var(--figma-line);
  background: rgba(247, 246, 242, .96);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.figma-site-style header:has(#menu-button) nav[aria-label="주요 메뉴"] { color: var(--figma-muted); }
body.figma-site-style header:has(#menu-button) nav[aria-label="주요 메뉴"] > a:hover,
body.figma-site-style header:has(#menu-button) nav[aria-label="주요 메뉴"] button[data-dropdown]:hover { color: var(--figma-ink); }
body.figma-site-style header:has(#menu-button) nav[aria-label="주요 메뉴"] > a:is(.bg-orange-100, .bg-amber-100) {
  padding-inline: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: inherit;
}
body.figma-site-style header:has(#menu-button) nav[aria-label="주요 메뉴"] > a.border-amber-500 {
  border-color: var(--figma-accent);
  border-radius: var(--figma-r-btn);
  background: var(--figma-accent);
  box-shadow: none;
  color: #fff;
  font-weight: 700;
}
body.figma-site-style header:has(#menu-button) nav[aria-label="주요 메뉴"] > a.border-amber-500:hover {
  border-color: var(--figma-accent-hover);
  background: var(--figma-accent-hover);
  color: #fff;
}
body.figma-site-style header:has(#menu-button) :is(#signup-link, #mypage-link) { color: var(--figma-ink); }
body.figma-site-style header:has(#menu-button) #service-menu {
  border-color: var(--figma-line);
  border-radius: var(--figma-r-card);
  box-shadow: var(--figma-shadow-float);
}
body.figma-site-style header:has(#menu-button) #service-menu > a { border-radius: var(--figma-r-btn); }
body.figma-site-style header:has(#menu-button) #service-menu > a:hover { background: var(--figma-paper); }
body.figma-site-style header:has(#menu-button) :is(#signup-link-compact, #mypage-link-compact, #menu-button) {
  border-color: var(--figma-control);
  border-radius: var(--figma-r-btn);
  color: var(--figma-ink);
}

/* 좁은 화면 메뉴 */
body.figma-site-style header:has(#menu-button) #mobile-menu {
  border-color: var(--figma-line);
  border-radius: var(--figma-r-card);
  background: #fff;
  box-shadow: var(--figma-shadow-float);
}
body.figma-site-style header:has(#menu-button) #mobile-menu .mobile-link { border-radius: var(--figma-r-btn); }
body.figma-site-style header:has(#menu-button) #mobile-menu .mobile-link:not([aria-current="page"]):hover { background: var(--figma-paper); }
body.figma-site-style header:has(#menu-button) #mobile-menu .mobile-link:is(.bg-orange-100, .bg-amber-100):not([aria-current="page"]) {
  border-color: transparent;
  background: transparent;
  color: var(--figma-ink);
  font-weight: 600;
}
body.figma-site-style header:has(#menu-button) #mobile-menu .mobile-link.bg-amber-700 {
  border-color: var(--figma-accent);
  background: var(--figma-accent);
  color: #fff;
}
body.figma-site-style header:has(#menu-button) #mobile-menu .mobile-link.bg-amber-700:hover {
  border-color: var(--figma-accent-hover);
  background: var(--figma-accent-hover);
  color: #fff;
}
body.figma-site-style header:has(#menu-button) #mobile-menu :is(.divide-stone-200 > *, .border-stone-200, .border-stone-300) { border-color: var(--figma-line); }

/* ── 공통 꼬리말 (Figma 3:8632) ─────────────────────────────────────
 * 종이색 바탕, 위 실선 없이 여백으로만 본문과 나눈다. 범위: '사이트 바로가기' 줄을 가진 공통 꼬리말만.
 */
body.figma-site-style footer:has(nav[aria-label="사이트 바로가기"]) {
  border-top-width: 0;
  background: var(--figma-paper);
  color: var(--figma-muted);
}
body.figma-site-style footer:has(nav[aria-label="사이트 바로가기"]) :is(.border-stone-200, .border-stone-300) { border-color: var(--figma-line); }
body.figma-site-style footer:has(nav[aria-label="사이트 바로가기"]) :is(.text-stone-900, .text-stone-800, .text-stone-700) { color: var(--figma-ink); }
body.figma-site-style footer:has(nav[aria-label="사이트 바로가기"]) :is(.text-stone-600, .text-stone-500) { color: var(--figma-muted); }

/* ---- 구분선 걷기 (2026-10-24, 더 심플하게) ------------------------------------
 * 구역은 여백으로만 나눈다 — 피그마처럼 같은 종이색 위에 덩어리를 띄운다.
 * 걷는 것: 머리말 아래 줄, 구역 사이 줄(section 의 border-t/b), '구독 요금제' 제목 위 줄, 꼬리말 위·안의 줄.
 * 남기는 것: 표의 행 줄, FAQ·접는 목록의 줄, 카드 안의 금액 칸 줄 — 이것들은 읽는 순서를 잡아 주는 줄이라 구분선이 아니다.
 */
body.figma-site-style header:has(#menu-button) { border-bottom-width: 0; }
body.figma-site-style section:is(.border-b, .border-t, .border-y) { border-top-width: 0; border-bottom-width: 0; }
body.figma-site-style .home-plans-title,
body.figma-site-style #layout-band > .border-t { border-top-width: 0; }
body.figma-site-style footer.border-t,
body.figma-site-style footer:has(nav[aria-label="사이트 바로가기"]) :is(nav, div).border-t { border-top-width: 0; }