/* Figma eRtvwdrIaaublxQxCg87xO / 3:8100 — 메인(index.html) 본문의 "심플" 표면 처리, 2026-10-24.
 *
 * 바탕 값(종이색·글자색·실선·모서리)은 figma-site-style.css 의 --figma-* 를 그대로 쓴다.
 * 이 층이 하는 일
 *   - 상자: 테두리와 그림자를 걷고, 종이색 바탕 위의 흰 카드(12px)로 세운다.
 *   - 목록: 피그마처럼 상자 대신 위쪽 실선 한 줄로 항목을 나눈다 (강점·진행 단계·일시불 요금·비교표).
 *   - 단추·입력칸 6px, 칩은 흰 알약, 할인 표식은 테두리만.
 *   - 구역 바탕: 종이색이 기본. 일시불 구역만 흰 띠(피그마의 '제작 진행 과정' 자리), 사례 구역은 한 단 더 가라앉힌다.
 *   - 마지막 '연락' 구역은 피그마의 파란 초대 구역처럼 초록 한 면에 흰 글자.
 * 바꾸지 않는 것: 격자·순서·보이기/숨기기, 문구, 링크, 결제 동작, 색 역할(초록=행동, 파랑=금액).
 * 범위: #top.figma-simple-style 아래 본문. 머리말·꼬리말은 figma-site-style.css 의 "공통 머리말/꼬리말".
 * 지우려면 index.html 의 <link> 한 줄과 body 클래스 하나만 빼면 원래대로 돌아간다.
 */
#top.figma-simple-style {
  --fs-ink: var(--figma-ink);
  --fs-muted: var(--figma-muted);
  --fs-line: var(--figma-line);
  --fs-line-strong: var(--figma-line-strong);
  --fs-control: var(--figma-control);
  --fs-paper: var(--figma-paper);
  --fs-paper-deep: var(--figma-paper-deep);
  --fs-frame: var(--figma-frame);
  --fs-white: #ffffff;
  --fs-accent: var(--figma-accent);
  --fs-accent-hover: var(--figma-accent-hover);
  --fs-accent-soft: var(--figma-pale);
  --fs-money: var(--figma-sky);
  --fs-r-card: var(--figma-r-card);
  --fs-r-btn: var(--figma-r-btn);
  --fs-shadow-float: var(--figma-shadow-float);
  color: var(--fs-ink);
}

/* ── 글자 ─────────────────────────────────────────────────────────── */
#top.figma-simple-style main :is(h1, h2, h3) { color: var(--fs-ink); font-weight: 700; letter-spacing: -.02em; }
#top.figma-simple-style main :is(.text-stone-950, .text-stone-900, .text-stone-800) { color: var(--fs-ink); }
#top.figma-simple-style main :is(.text-stone-700, .text-stone-600, .text-stone-500) { color: var(--fs-muted); }
#top.figma-simple-style main :is(.border-stone-100, .border-stone-200, .border-stone-300) { border-color: var(--fs-line); }
#top.figma-simple-style main :is(.divide-stone-100, .divide-stone-200) > * { border-color: var(--fs-line); }

/* ── 구역 바탕 ────────────────────────────────────────────────────── */
#top.figma-simple-style main :is(section, .page-view > section) { background: transparent; }
#top.figma-simple-style #hero { background: var(--fs-paper); border-color: var(--fs-line); }
#top.figma-simple-style #onetime { background: var(--fs-white); border-color: var(--fs-line); }
#top.figma-simple-style #channels { background: var(--fs-paper); border-color: var(--fs-line); }
#top.figma-simple-style :is(#about, #care, #process, #templates, #showcase, #faq, #contact, .service-owner, .service-inquiry) { background: var(--fs-paper); }
#top.figma-simple-style #work { background: var(--fs-paper-deep); }

/* ── 공통: 상자는 흰 카드 12px, 테두리·그림자 없음 ─────────────────── */
#top.figma-simple-style main :is(.rounded-2xl, .rounded-3xl, .rounded-\[2rem\]) { border-radius: var(--fs-r-card); }
#top.figma-simple-style main .rounded-xl { border-radius: 8px; }
#top.figma-simple-style main :is(article, div, section, li, dl, figure).rounded-2xl:is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) { box-shadow: none; }
#top.figma-simple-style main :is(a, button):is(.bg-orange-700, .bg-amber-700, .bg-stone-900, .rounded-lg, .rounded-full):not(.rounded-full.bg-stone-100) { border-radius: var(--fs-r-btn); }
#top.figma-simple-style main :is(a, button).bg-orange-700 { background-color: var(--fs-accent); color: #fff; }
#top.figma-simple-style main :is(a, button).bg-orange-700:hover { background-color: var(--fs-accent-hover); }
#top.figma-simple-style main :is(a, button).border-stone-300,
#top.figma-simple-style main :is(a, button).border-stone-500 { border-color: var(--fs-control); background-color: #fff; }
#top.figma-simple-style main :is(a, button).border-stone-300:hover,
#top.figma-simple-style main :is(a, button).border-stone-500:hover { background-color: var(--fs-paper); }
/* 흐릿한 색 번짐 장식(aria-hidden)은 걷어낸다. */
#top.figma-simple-style main [aria-hidden="true"][class*="blur-3xl"] { display: none; }
/* 칩: 흰 알약 (피그마 '서비스 태그'). 카드 안에서는 실선 한 줄로 경계를 준다. */
#top.figma-simple-style main :is(p, span).rounded:is(.bg-orange-100, .bg-stone-100),
#top.figma-simple-style main :is(p, span).rounded-full:is(.bg-orange-50, .bg-orange-100, .bg-stone-100, .bg-stone-50, .bg-violet-100, .bg-emerald-300, .bg-emerald-100) {
  border: 1px solid var(--fs-line);
  border-radius: 999px;
  background: #fff;
  color: var(--fs-ink);
  font-weight: 500;
}

/* ── 첫 화면 ──────────────────────────────────────────────────────── */
#top.figma-simple-style #hero .home-intro-copy h1 { letter-spacing: -.03em; }
#top.figma-simple-style #hero .home-intro-link {
  border-radius: var(--fs-r-btn);
  font-weight: 700;
}
#top.figma-simple-style #hero figure {
  border: 0;
  border-radius: var(--fs-r-card);
  background: #fff;
  box-shadow: var(--fs-shadow-float);
}
#top.figma-simple-style #hero figure .rounded-2xl { border-radius: 8px; border-color: var(--fs-line); background: var(--fs-frame); }
#top.figma-simple-style #hero figure button.rounded-full { border-color: var(--fs-control); border-radius: 999px; }

/* ── 요금 카드(구독) ──────────────────────────────────────────────── */
#top.figma-simple-style #pricing-cards > article {
  border-color: transparent;
  border-radius: var(--fs-r-card);
  background: #fff;
  box-shadow: none;
}
#top.figma-simple-style #pricing-cards > article[data-tier-slug="standard"] { border-color: transparent; }
#top.figma-simple-style #pricing-cards > article > .absolute,
#top.figma-simple-style #hero-plans > article > .absolute { border-radius: 4px; font-weight: 700; letter-spacing: 0; }
/* 할인율 표식: 채움 → 테두리만 */
#top.figma-simple-style #pricing-cards span.rounded.bg-amber-700 {
  border: 1px solid var(--fs-line);
  border-radius: 4px;
  background: transparent;
  color: var(--fs-money);
}
#top.figma-simple-style #pricing-cards [role="radio"] { border-radius: var(--fs-r-btn); box-shadow: none; }
#top.figma-simple-style #pricing-cards [role="radio"]:not([aria-checked="true"]) { border-color: var(--fs-control); background: #fff; }
#top.figma-simple-style #pricing-cards :is([data-pricing-quote], .bg-orange-700) { border-radius: var(--fs-r-btn); }
#top.figma-simple-style #pricing-cards [data-pricing-quote] { border-color: var(--fs-control); background: #fff; }
#top.figma-simple-style #pricing-cards [data-pricing-quote]:hover { background: var(--fs-paper); }
/* "모든 요금제에 포함" 띠: 피그마의 '모든 구독에 포함' — 틴트 면 한 장, 6px */
#top.figma-simple-style #pricing-common > div {
  border-color: transparent;
  border-radius: var(--fs-r-btn);
  background: var(--fs-accent-soft);
}
#top.figma-simple-style #pricing-common .plan-terms-note { border-color: rgba(69, 110, 37, .25); }
/* 시안 10종 띠: 흰 카드 위의 작은 액자들 */
#top.figma-simple-style #layout-band > div { border-color: transparent; border-radius: var(--fs-r-card); background: #fff; box-shadow: none; }
#top.figma-simple-style #layout-band :is(a, img) { border-radius: 8px; }
#top.figma-simple-style #layout-band img { border-color: var(--fs-line); }
#top.figma-simple-style #layout-band button.rounded-full { border-color: var(--fs-control); border-radius: 999px; }
/* 이용 후기 줄의 양옆 넘김 단추도 시안 띠와 같은 둥근 단추다(js/home-reviews.js 가 붙인다). */
#top.figma-simple-style #reviews button.rounded-full { border-radius: 999px; }
/* 여백 (2026-10-24): 카드 안쪽 좌우·아래가 0 이라 제목·액자·단추가 흰 카드 가장자리에 붙어 있었다.
 * 안쪽 여백을 두고, 제목 → 설명 → 액자 → 이름 → 단추 사이도 한 박자씩 띄운다. 카드 바깥(위 요금 띠·아래 확인 줄)도 넓힌다.
 * 넘김 단추 줄은 slider.js 가 목록 뒤에 끼우므로 카드 여백을 그대로 물려받는다. */
#top.figma-simple-style #layout-band { margin-top: 56px; }
#top.figma-simple-style #layout-band > div { padding: 48px 48px 40px; }
#top.figma-simple-style #layout-band > div > p { margin-top: 12px; }
#top.figma-simple-style #layout-band [data-slider] { gap: 24px; margin-top: 32px; padding-bottom: 16px; }
#top.figma-simple-style #layout-band [data-slider] a > span:nth-of-type(1) { margin-top: 16px; }
#top.figma-simple-style #layout-band [data-slider] a > span:nth-of-type(2) { margin-top: 6px; }
#top.figma-simple-style #layout-band [data-slider] + div { margin-top: 20px; }
#top.figma-simple-style #layout-band + div { margin-top: 40px; row-gap: 12px; }
#top.figma-simple-style #layout-band + div + p { margin-top: 28px; }
@media (max-width: 1023px) {
  #top.figma-simple-style #layout-band > div { padding: 36px 32px 32px; }
  #top.figma-simple-style #layout-band [data-slider] { gap: 20px; margin-top: 28px; }
}
@media (max-width: 639px) {
  #top.figma-simple-style #layout-band { margin-top: 40px; }
  #top.figma-simple-style #layout-band > div { padding: 28px 20px 24px; }
  #top.figma-simple-style #layout-band [data-slider] { gap: 16px; margin-top: 24px; padding-bottom: 12px; }
  #top.figma-simple-style #layout-band [data-slider] a > span:nth-of-type(1) { margin-top: 12px; }
  #top.figma-simple-style #layout-band + div { margin-top: 32px; }
}

/* ── 일시불: 흰 띠 위에 실선으로 나눈 세 줄 (피그마 '구독과 일시불 비교') ── */
#top.figma-simple-style #hero-plans > article {
  border: 0;
  border-top: 1px solid var(--fs-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}
#top.figma-simple-style #hero-plans > article:last-child { border-bottom: 1px solid var(--fs-line); }
#top.figma-simple-style #hero-plans > article > .absolute { left: 0; }
#top.figma-simple-style #hero-plans > article:hover { box-shadow: none; }
#top.figma-simple-style #hero-plans [data-onetime] { border-radius: var(--fs-r-btn); }
/* 비교표: 바깥 테두리를 걷고 실선만 */
#top.figma-simple-style #onetime .overflow-x-auto.rounded-2xl { border-color: transparent; border-radius: 0; }
#top.figma-simple-style #onetime .overflow-x-auto.rounded-2xl table { border-top: 1px solid var(--fs-line); }
#top.figma-simple-style #onetime tr.bg-stone-50 { background: transparent; }
#top.figma-simple-style #onetime tbody tr:last-child { border-bottom: 1px solid var(--fs-line); }
/* "어떤 게 맞는지 같이 골라 드립니다": 흰 띠 위의 종이색 카드 */
#top.figma-simple-style #onetime div.rounded-2xl.bg-orange-50 { border-radius: var(--fs-r-card); background: var(--fs-paper); }

/* ── 채널 ─────────────────────────────────────────────────────────── */
#top.figma-simple-style #channels > div > .grid > div { border-color: transparent; border-radius: var(--fs-r-card); background: #fff; }
#top.figma-simple-style #channels span.rounded-xl { border-radius: 8px; }
#top.figma-simple-style #channels .border-t.border-stone-300 { border-color: var(--fs-line-strong); border-radius: 0; }

/* ── 소개: 강점 네 가지를 상자 대신 실선 목록으로 (피그마 '서비스 목록') ── */
#top.figma-simple-style #strengths {
  gap: 32px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#top.figma-simple-style #strengths article {
  border: 0;
  border-top: 1px solid var(--fs-line);
  border-radius: 0;
  background: transparent;
  padding: 24px 0 0;
  box-shadow: none;
}
#top.figma-simple-style #about p.rounded-full.bg-orange-50 { border: 1px solid var(--fs-line); background: #fff; color: var(--fs-accent); }

/* ── 관리(수정·유지보수): 표는 실선, 상담 상자는 흰 카드 ───────────── */
#top.figma-simple-style #care .care-table { border-color: transparent; border-radius: 0; border-top: 1px solid var(--fs-line); }
#top.figma-simple-style #care .care-table :is(thead tr, tr.bg-stone-50, th) { background: transparent; }
#top.figma-simple-style #care .care-inquiry { border-color: transparent; border-radius: var(--fs-r-card); background: #fff; }
#top.figma-simple-style #care .care-inquiry a { border-radius: var(--fs-r-btn); }

/* ── 진행 과정 ────────────────────────────────────────────────────── */
#top.figma-simple-style #process-steps > li { border-color: var(--fs-line); }
#top.figma-simple-style .service-owner > div { border-color: transparent; border-radius: var(--fs-r-card); background: #fff; }
#top.figma-simple-style #direct-benefits > li {
  border: 0;
  border-top: 1px solid var(--fs-line);
  border-radius: 0;
  padding-inline: 0;
}
#top.figma-simple-style .service-inquiry > div { border-color: transparent; border-radius: var(--fs-r-card); background: #fff; }

/* ── 시안 10종: 테두리 격자 → 흰 카드 격자 ──────────────────────────── */
#top.figma-simple-style #templates-grid {
  gap: 24px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#top.figma-simple-style #templates-grid > article { border-radius: var(--fs-r-card); overflow: hidden; background: #fff; box-shadow: none; }
#top.figma-simple-style #templates-grid > article:hover { box-shadow: none; }
#top.figma-simple-style #templates-grid [data-choose],
#top.figma-simple-style #templates-grid a.border { border-radius: var(--fs-r-btn); }
#top.figma-simple-style #templates p.rounded-xl.bg-orange-50 { border-radius: 8px; background: #fff; }
#top.figma-simple-style #templates a.rounded-full.bg-orange-700 { border-radius: var(--fs-r-btn); }

/* ── 제작 사례 ────────────────────────────────────────────────────── */
#top.figma-simple-style #work :is(article, .rounded-2xl, .rounded-3xl, .rounded-\[2rem\]) { border-color: transparent; border-radius: var(--fs-r-card); background: #fff; box-shadow: none; }
#top.figma-simple-style #work-list article > a { border-color: var(--fs-line); }
#top.figma-simple-style #work .work-section-heading { border-color: var(--fs-line); }
#top.figma-simple-style #work .work-experience-grid .bg-amber-50 { background: #fff; }
#top.figma-simple-style #work .work-experience-grid summary { background: #fff; }
#top.figma-simple-style #work :is(ol, div).bg-stone-100 { background: var(--fs-paper); border-color: transparent; }
#top.figma-simple-style #work .border-b.bg-stone-100 { background: var(--fs-frame); }

/* ── 화면 미리보기: 떠 있는 액자 하나 ───────────────────────────────── */
#top.figma-simple-style #showcase > div > div[class~="border"] { border-color: transparent; background: #fff; box-shadow: var(--fs-shadow-float); }
#top.figma-simple-style #showcase > div > div > article { border-color: transparent; background: #fff; }
#top.figma-simple-style #showcase .rounded-t-2xl { border-top-left-radius: var(--fs-r-card); border-top-right-radius: var(--fs-r-card); border-color: transparent; }
#top.figma-simple-style #showcase .rounded-b-2xl {
  border-color: transparent;
  border-bottom-right-radius: var(--fs-r-card);
  border-bottom-left-radius: var(--fs-r-card);
  box-shadow: var(--fs-shadow-float);
}
#top.figma-simple-style #showcase .bg-\[\#f5f5f2\] { background: var(--fs-frame); }

/* ── 자주 묻는 질문: 실선 목록 그대로, 바탕만 종이색 ──────────────────── */
#top.figma-simple-style #faq-list,
#top.figma-simple-style #faq-list > details { border-color: var(--fs-line); }

/* ── 연락: 피그마 '가게 상담 초대' — 초록 한 면, 흰 글자, 흰 카드 ───────── */
#top.figma-simple-style #contact > div:first-child {
  border-color: transparent;
  border-radius: var(--fs-r-card);
  background: var(--fs-accent);
  color: #fff;
  box-shadow: none;
}
#top.figma-simple-style #contact > div:first-child > .relative > :is(p, div) > :is(p, h2),
#top.figma-simple-style #contact > div:first-child > .relative > p { color: #fff; }
#top.figma-simple-style #contact > div:first-child :is(.text-stone-950\/70, .text-stone-950\/60) { color: rgba(255, 255, 255, .8); }
#top.figma-simple-style #contact .contact-options > :is(a, .contact-phone) {
  border: 0;
  border-radius: var(--fs-r-card);
  background: #fff;
  color: var(--fs-ink);
  box-shadow: none;
}
#top.figma-simple-style #contact .contact-options > a:hover { box-shadow: none; background: var(--fs-paper); }
#top.figma-simple-style #contact .contact-options span.rounded-full.bg-stone-100 { background: var(--fs-paper-deep); }
/* 초록 판 위 카드의 초점. 위 규칙이 box-shadow 를 걷어 링이 사라지고 사이트 공통 초록 바깥선만 남는데,
   그 선이 초록 판 위에 그려져 1.00:1 — 키보드로는 어느 카드에 와 있는지 보이지 않았다. 흰 선은 5.98:1 이다. */
#top.figma-simple-style #contact .contact-options > a:focus-visible { outline-color: #fff; }

/* ── 견적·구독·결제 창: 모서리만 (창 12px, 입력칸·단추 6px). 색·단계·문구는 그대로 ── */
#top.figma-simple-style :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal, #template-preview-modal) > div { border-radius: var(--fs-r-card); }
#top.figma-simple-style :is(#quote-modal, #subscription-modal, #onetime-modal, #setupfee-modal) :is(input:not([type="checkbox"]), select) { border-radius: var(--fs-r-btn); }
#top.figma-simple-style :is(#quote-start, #subscribe-button, #onetime-button, #setupfee-button),
#top.figma-simple-style #subscription-complete-modal button { border-radius: var(--fs-r-btn); }

@media (max-width: 639px) {
  #top.figma-simple-style #strengths { gap: 20px; }
  #top.figma-simple-style #templates-grid { gap: 16px; }
}

/* ── 카드 안쪽 여백 (2026-10-24) ─────────────────────────────────────
 * '참고용 레이아웃' 카드에 맞춰 카드 너비별로 안쪽 여백을 한 단계 넓힌다.
 *   한 줄 전체 카드 48px · 두 칸 카드 32px · 세·네 칸 카드 28px. 좁은 화면은 20~24px.
 * 채널 아래 세 줄: 예전엔 '실선 위의 글'로 되돌리려 했지만 그 규칙(#channels dl > div)이
 * 위 카드 규칙(#channels > div > .grid > div)보다 약해, 좌우 여백 0 인 흰 상자로 보이고 있었다.
 * 위 두 카드와 같은 흰 카드로 세우고 여백을 준다. 구분선은 걷는다(위 실선 없음).
 */
#top.figma-simple-style #channels > div > .grid > div { padding: 32px; }
#top.figma-simple-style #channels > div > dl.grid { max-width: none; gap: 16px; margin-top: 16px; }
#top.figma-simple-style #channels > div > dl.grid > div {
  border: 0;
  border-radius: var(--fs-r-card);
  background: #fff;
  padding: 24px 28px 28px;
}
#top.figma-simple-style #channels > div > dl.grid > div > dd { margin-top: 8px; }
#top.figma-simple-style #contact .contact-options > :is(a, .contact-phone) { padding: 28px; }
#top.figma-simple-style :is(#work-list article, #work article.rounded-2xl) > div:is(.p-5, .p-6) { padding: 32px; }
#top.figma-simple-style #showcase article > div.p-6 { padding: 28px; }
#top.figma-simple-style #templates-grid > article > div.p-6 { padding: 28px; }
#top.figma-simple-style #work div.rounded-2xl.px-6.py-6 { padding: 28px 32px; }
#top.figma-simple-style #templates p.rounded-xl.px-5 { padding: 18px 24px; }
@media (min-width: 1024px) {
  #top.figma-simple-style #pricing-common > div { padding: 40px 48px; }
  #top.figma-simple-style :is(#care .care-inquiry, .service-owner > div, .service-inquiry > div) { padding: 48px; }
}
@media (max-width: 639px) {
  #top.figma-simple-style #channels > div > .grid > div { padding: 24px; }
  #top.figma-simple-style #channels > div > dl.grid { gap: 12px; margin-top: 12px; }
  #top.figma-simple-style #channels > div > dl.grid > div { padding: 20px 22px 22px; }
  #top.figma-simple-style #contact .contact-options > :is(a, .contact-phone) { padding: 22px; }
  #top.figma-simple-style :is(#work-list article, #work article.rounded-2xl) > div:is(.p-5, .p-6) { padding: 22px; }
  #top.figma-simple-style #showcase article > div.p-6,
  #top.figma-simple-style #templates-grid > article > div.p-6 { padding: 22px; }
  #top.figma-simple-style #work div.rounded-2xl.px-6.py-6 { padding: 22px; }
}