:root{--spot-cream:#f7f3ed}
.spot-ingredients{background: var(--spot-cream); padding: 145px 6vw 160px;}
.spot-ingredients > header{grid-template-columns: 1fr 1fr; align-items: end; gap: 50px; max-width: 1450px; margin: 0px auto 75px; display: grid;}
.spot-ingredients > header .ep-eyebrow{grid-column: 1 / -1;}
.spot-ingredients > header h2{letter-spacing: -0.06em; font-family: Hahmlet, serif; font-size: clamp(44px, 4.8vw, 72px); font-weight: 500; line-height: 1.2;}
.spot-ingredients > header > p:last-child{color: rgb(116, 108, 100); font-size: 13px; line-height: 1.9;}
.spot-ingredient-grid{border-top: 1px solid rgb(28, 26, 24); grid-template-columns: repeat(4, 1fr); max-width: 1450px; margin: 0px auto; display: grid;}
.spot-ingredient-grid article{border-right: 1px solid rgba(28, 26, 24, 0.16); min-height: 300px; padding: 25px 22px;}
.spot-ingredient-grid article:last-child{border-right: 0px;}
.spot-ingredient-grid span{font-size: 10px;}
.spot-ingredient-grid small{color: rgb(154, 118, 86); letter-spacing: 0.11em; margin-top: 62px; font-size: 9px; display: block;}
.spot-ingredient-grid h3{margin-top: 15px; font-family: Hahmlet, serif; font-size: 22px; font-weight: 500;}
.spot-ingredient-grid p{color: rgb(117, 110, 103); font-size: 12px; line-height: 1.8; margin-top: 20px !important;}
.spot-howto{background: rgb(231, 219, 203); grid-template-columns: 1fr 1fr; min-height: 850px; display: grid;}
.spot-howto-visual{overflow: hidden;}
.spot-howto-visual img{object-fit: cover; object-position: center 63%; width: 100%; height: 100%;}
.spot-howto-copy{flex-direction: column; justify-content: center; padding: 90px 7vw; display: flex;}
.spot-howto-copy h2{letter-spacing: -0.065em; font-family: Hahmlet, serif; font-size: clamp(48px, 5.2vw, 78px); font-weight: 500; line-height: 1.17;}
.spot-howto-copy ol{border-top: 1px solid rgba(28, 26, 24, 0.25); margin: 55px 0px 0px; padding: 0px; list-style: none;}
.spot-howto-copy li{border-bottom: 1px solid rgba(28, 26, 24, 0.16); grid-template-columns: 45px 1fr; gap: 18px; padding: 22px 0px; display: grid;}
.spot-howto-copy li span{font-size: 10px;}
.spot-howto-copy li p{color: rgb(101, 95, 89); font-size: 13px; line-height: 1.75;}
.spot-caution{background: rgba(255, 255, 255, 0.42); margin-top: 40px; padding: 22px;}
.spot-caution strong{font-size: 12px;}
.spot-caution p{color: rgb(111, 103, 95); font-size: 11px; line-height: 1.8; margin-top: 11px !important;}
.spot-policies{background: rgb(241, 236, 228); padding: 80px 7vw 120px;}

/* Skin guide responsive content guard — 2026-08-28 */
.article-page,
.article-layout,
.article-content {
  min-width: 0;
  max-width: 100%;
}

.article-content,
.article-content p,
.article-content li,
.article-content h2,
.article-content h3,
.article-content a {
  overflow-wrap: anywhere;
  word-break: normal;
}

.article-content .wp-block-table,
.article-content .table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.article-content .wp-block-table table,
.article-content .table-scroll table {
  width: max-content;
  min-width: 640px;
  max-width: none;
}

.article-content img,
.article-content video,
.article-content iframe {
  max-width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  .article-content .wp-block-table,
  .article-content .table-scroll {
    margin-inline: 0;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .article-content th,
  .article-content td {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}
.spot-policies details{border-top: 1px solid rgba(28, 26, 24, 0.28); max-width: 1200px; margin: 0px auto;}
.spot-policies details:last-child{border-bottom: 1px solid rgba(28, 26, 24, 0.28);}
.spot-policies summary{cursor: pointer; justify-content: space-between; padding: 25px 4px; font-family: Hahmlet, serif; font-size: 18px; list-style: none; display: flex;}
.spot-policies details[open] summary span{transform: rotate(45deg);}
.spot-policies summary span{transition: transform 0.25s;}
.spot-policies details p{color: rgb(114, 107, 99); max-width: 900px; padding: 0px 4px 28px; font-size: 12px; line-height: 1.9;}
@media (width <= 960px){
.spot-ingredient-grid{grid-template-columns: 1fr 1fr;}
.spot-ingredient-grid article:nth-child(2){border-right: 0px;}
.spot-ingredient-grid article{border-bottom: 1px solid rgba(28, 26, 24, 0.16);}
}
@media (width <= 720px){
.spot-ingredients{padding: 95px 16px 105px;}
.spot-ingredients > header{margin-bottom: 45px; display: block;}
.spot-ingredients > header h2{font-size: 42px;}
.spot-ingredients > header > p:last-child{font-size: 12px; margin-top: 24px !important;}
.spot-ingredient-grid{grid-template-columns: 1fr;}
.spot-ingredient-grid article{border-right: 0px; min-height: 0px; padding: 24px 8px 34px;}
.spot-ingredient-grid article:last-child{border-bottom: 0px;}
.spot-ingredient-grid small{margin-top: 28px;}
.spot-howto{min-height: 0px; display: block;}
.spot-howto-visual{height: 570px;}
.spot-howto-copy{padding: 78px 22px 95px;}
.spot-howto-copy h2{font-size: 45px;}
.spot-policies{padding: 65px 18px 110px;}
}
.spot-readable-details{background: rgb(246, 242, 235); padding: 140px max(16px, 6vw);}
.spot-readable-details > header{width: min(100%, 1000px); margin: 0px auto 62px;}
.spot-readable-details > header h2{letter-spacing: -0.06em; max-width: 800px; font-family: Hahmlet, "Noto Serif KR", serif; font-size: clamp(45px, 4.8vw, 72px); font-weight: 500; line-height: 1.18;}
.spot-readable-details > header > p:last-child{color: rgb(113, 105, 96); max-width: 760px; font-size: 13px; line-height: 1.9; margin-top: 24px !important;}
.spot-accordion{border-top: 1px solid rgb(28, 26, 24); width: min(100%, 1000px); margin: 0px auto;}
.spot-accordion details{border-bottom: 1px solid rgba(28, 26, 24, 0.22);}
.spot-accordion summary{cursor: pointer; grid-template-columns: 48px 1fr auto; align-items: center; padding: 27px 4px; list-style: none; display: grid;}
.spot-accordion summary::-webkit-details-marker{display: none;}
.spot-accordion summary span{color: rgb(155, 113, 77); letter-spacing: 0.12em; font-size: 10px;}
.spot-accordion summary strong{font-family: Hahmlet, "Noto Serif KR", serif; font-size: 22px; font-weight: 500;}
.spot-accordion summary i{font-size: 25px; font-style: normal; line-height: 1; transition: transform 0.25s;}
.spot-accordion details[open] summary i{transform: rotate(45deg);}
.spot-accordion-body{padding: 2px 4px 46px;}
.spot-overview-grid, .spot-ingredient-text-grid{background: rgba(28, 26, 24, 0.14); grid-template-columns: repeat(2, 1fr); gap: 1px; display: grid;}
.spot-overview-grid article, .spot-ingredient-text-grid article{background: rgb(255, 255, 255); padding: 27px 28px;}
.spot-overview-grid small, .spot-ingredient-text-grid small{color: rgb(155, 113, 77); letter-spacing: 0.12em; font-size: 9px; display: block;}
.spot-overview-grid strong, .spot-ingredient-text-grid h3{margin-top: 11px; font-family: Hahmlet, "Noto Serif KR", serif; font-size: 19px; font-weight: 500; line-height: 1.45; display: block;}
.spot-ingredient-text-grid p{color: rgb(113, 105, 96); font-size: 12px; line-height: 1.85; margin-top: 12px !important;}
.spot-boundary-note{grid-column: 1 / -1; color: rgb(110, 102, 94) !important; background: rgb(233, 224, 212) !important; padding: 22px 25px !important; font-size: 11px !important; line-height: 1.85 !important;}
.spot-howto-text ol{counter-reset: spot-step 0; margin: 0px; padding: 0px; list-style: none;}
.spot-howto-text li{counter-increment: spot-step 1; border-bottom: 1px solid rgba(28, 26, 24, 0.13); grid-template-columns: 54px 1fr; gap: 20px; padding: 22px 0px; display: grid;}
.spot-howto-text li::before{content: "0" counter(spot-step); color: rgb(155, 113, 77); letter-spacing: 0.12em; font-size: 10px;}
.spot-howto-text li:last-child{border-bottom: 0px;}
.spot-howto-text li p{color: rgb(95, 89, 83); font-size: 13px; line-height: 1.85;}
.spot-test-info, .spot-faq-text{grid-template-columns: repeat(2, 1fr); gap: 12px; display: grid;}
.spot-test-info article, .spot-faq-text article{background: rgb(255, 255, 255); padding: 29px;}
.spot-test-info strong, .spot-faq-text strong{font-family: Hahmlet, "Noto Serif KR", serif; font-size: 18px; font-weight: 500; line-height: 1.55; display: block;}
.spot-test-info p, .spot-faq-text p{color: rgb(113, 105, 96); font-size: 12px; line-height: 1.85; margin-top: 13px !important;}
@media (width <= 720px){
.spot-original-heading h2, .spot-readable-details > header h2{font-size: 41px;}
.spot-original-heading > p:last-child, .spot-readable-details > header > p:last-child{font-size: 12px;}
.spot-readable-details{padding: 96px 16px;}
.spot-readable-details > header{margin-bottom: 45px;}
.spot-accordion summary{grid-template-columns: 38px 1fr auto; padding: 23px 2px;}
.spot-accordion summary strong{font-size: 18px;}
.spot-accordion-body{padding: 0px 2px 34px;}
.spot-overview-grid, .spot-ingredient-text-grid, .spot-test-info, .spot-faq-text{grid-template-columns: 1fr;}
.spot-overview-grid article, .spot-ingredient-text-grid article, .spot-test-info article, .spot-faq-text article{padding: 23px 21px;}
.spot-howto-text li{grid-template-columns: 42px 1fr; gap: 10px;}
}
.spot-answer-summary{background: rgb(233, 223, 210); padding: 115px max(18px, 7vw);}
.spot-answer-summary > .ep-eyebrow{width: min(100%, 1200px); margin: 0px auto 30px !important;}
.spot-answer-layout{grid-template-columns: minmax(310px, 0.85fr) minmax(0px, 1.15fr); gap: clamp(55px, 8vw, 130px); width: min(100%, 1200px); margin: 0px auto; display: grid;}
.spot-answer-layout h2{letter-spacing: -0.06em; font-family: Hahmlet, "Noto Serif KR", serif; font-size: clamp(42px, 4.4vw, 68px); font-weight: 500; line-height: 1.18;}
.spot-answer-layout > div > p{color: rgb(87, 81, 73); font-size: 14px; line-height: 2;}
.spot-answer-facts{border-top: 1px solid rgba(28, 26, 24, 0.24); margin: 33px 0px 0px;}
.spot-answer-facts > div{border-bottom: 1px solid rgba(28, 26, 24, 0.15); grid-template-columns: 130px 1fr; gap: 25px; padding: 17px 0px; display: grid;}
.spot-answer-facts dt{color: rgb(139, 105, 76); letter-spacing: 0.04em; font-size: 10px; font-weight: 700;}
.spot-answer-facts dd{color: rgb(81, 75, 69); margin: 0px; font-size: 12px; line-height: 1.8;}
.spot-development-story > p:first-child{color: rgb(95, 89, 83); max-width: 820px; font-size: 14px; line-height: 2;}
.spot-use-case-grid{background: rgba(28, 26, 24, 0.14); grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 30px; display: grid;}
.spot-use-case-grid article{background: rgb(255, 255, 255); padding: 27px;}
.spot-use-case-grid small{color: rgb(155, 113, 77); letter-spacing: 0.12em; font-size: 9px;}
.spot-use-case-grid h3{font-family: Hahmlet, "Noto Serif KR", serif; font-size: 18px; font-weight: 500; line-height: 1.5; margin-top: 25px !important;}
.spot-use-case-grid p{color: rgb(113, 105, 96); font-size: 12px; line-height: 1.85; margin-top: 12px !important;}
.spot-development-story > .spot-boundary-note{margin-top: 18px !important;}
.spot-test-info > .spot-boundary-note{margin: 0px !important;}
@media (width <= 720px){
.spot-answer-summary{padding: 82px 20px;}
.spot-answer-summary > .ep-eyebrow{margin-bottom: 22px !important;}
.spot-answer-layout{grid-template-columns: 1fr; gap: 28px;}
.spot-answer-layout h2{font-size: 40px;}
.spot-answer-layout > div > p{font-size: 12px; line-height: 1.9;}
.spot-answer-facts > div{grid-template-columns: 88px 1fr; gap: 14px;}
.spot-answer-facts dd{font-size: 11px;}
.spot-use-case-grid{grid-template-columns: 1fr;}
.spot-development-story > p:first-child{font-size: 12px;}
}
.nf-ingredients .spot-ingredient-grid{grid-template-columns: repeat(4, 1fr);}
.nf-howto .spot-howto-visual img{object-position: center center;}
@media (width <= 960px){
.nf-ingredients .spot-ingredient-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (width <= 720px){
.nf-ingredients .spot-ingredient-grid{grid-template-columns: 1fr;}
}

/* --- SKIN9HARI fixes (added by migration) --- */
/* 1. 가이드 목록 필터·검색: JS가 hidden 속성을 켜도 .guide-article{display:grid}가 이겨서 안 숨겨지던 문제 */
[hidden]{display:none !important}

/* 2. 가이드 본문 CONTENTS 목차 */
.article-layout{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:60px;width:min(1200px,calc(100% - 40px));margin:0 auto}
.article-layout > .article-content{width:100%;margin:0}
.article-toc{position:relative}
.article-toc nav{position:sticky;top:170px;padding-top:22px;border-top:1px solid #1c1a18}
.article-toc-title{margin:0 0 22px;font-size:10px;font-weight:700;letter-spacing:.22em;color:#1c1a18}
.article-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.article-toc a{display:block;color:#8a8178;font-size:12px;line-height:1.6;transition:color .2s}
.article-toc a:hover{color:#1c1a18}
.guide-detail-page h2[id]{scroll-margin-top:180px}
@media(max-width:960px){
 /* 1fr 은 최소콘텐츠(=표 640px)에 밀려 부풀었다. 390px 화면에서 문서 폭이 660 이 되어 글이 잘렸다.
    minmax(0,1fr) 로 눌러 표는 .table-scroll 안에서 좌우로 스크롤되게 한다. (수정 2026-08-19) */
 .article-layout{grid-template-columns:minmax(0,1fr);gap:34px}
 .article-layout > .article-content,
 .article-toc{min-width:0}
 .article-toc nav{position:static;top:auto}
 .article-toc ol{grid-template-columns:1fr}
}

/* 3. 상품 상세 AEO 블록 래퍼 */
.product-answer-blocks{display:block}
.product-answer-blocks > section{margin:0}
/* full-bleed: 원본과 동일하게 폭 제한 없음 */


/* ===== SKIN9HARI round2 ===== */

/* A. 헤더 가독성 — 밝은 배경 페이지는 처음부터 검정.
   메인(home)과 히어로가 어두운 미디어(48)·가이드(49)는 흰색 유지 */
body:not(.home):not(.page-id-48):not(.page-id-49) .site-header.is-overlay,
body:not(.home):not(.page-id-48):not(.page-id-49) .site-header.is-overlay a,
body:not(.home):not(.page-id-48):not(.page-id-49) .site-header.is-overlay .brand-mark{color:var(--ink)}

/* B. 리뷰 메뉴 hover 드롭다운 */
.main-nav .nav-item{position:relative;display:grid;height:100%;place-items:center}
.main-nav .nav-item>a{width:100%}
.nav-submenu{position:absolute;top:100%;left:50%;z-index:140;min-width:158px;display:grid;
  transform:translateX(-50%) translateY(6px);background:#fff;border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(30,25,20,.10);opacity:0;visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.main-nav .nav-item:hover .nav-submenu,
.main-nav .nav-item.is-open .nav-submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-submenu a{display:block;padding:15px 18px;color:var(--ink);font-size:13px;text-align:center;transition:background .2s}
.nav-submenu a:hover{background:#f4f0ea}
.nav-submenu a:after{content:none}
@media(max-width:960px){.nav-submenu{display:none}}

/* C. 메인 리뷰 섹션 — 브라운 포인트 + 크리마 포토리뷰 */
.review-intro h2 span{color:var(--accent)}
.review-intro .review-score strong{color:var(--ink)}
.review-cards--crema{display:block;grid-template-columns:none;gap:0}
.review-cards--crema .crema-reviews{width:100%}

/* D. 이벤트 페이지 */
.page-event .event-page-intro{max-width:900px;margin:0 auto 60px;text-align:center}
.page-event .event-page-intro h2{margin:0 0 18px;font-family:Hahmlet,serif;font-size:clamp(30px,3.4vw,44px);font-weight:500}
.page-event .event-page-intro p:not(.ep-eyebrow){color:var(--muted);font-size:14px;line-height:1.9}
.page-event .event-list{display:grid;gap:80px;max-width:900px;margin:0 auto}
.page-event .event-item h3{margin:0 0 22px;font-family:Hahmlet,serif;font-size:clamp(22px,2.4vw,30px);font-weight:500;text-align:center}
.page-event .event-item img{display:block;width:100%;height:auto}
.page-event .event-cta{margin-top:24px;text-align:center}
.page-event .event-cta a{display:inline-block;padding:14px 26px;color:#fff;background:var(--ink);font-size:12px;border:0}
.page-event .event-note{max-width:900px;margin:70px auto 0;padding-top:26px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px;line-height:1.9;text-align:center}
@media(max-width:720px){.page-event .event-list{gap:52px}}

/* 이벤트 페이지 eyebrow — page.php 공통 문구(SKIN9HARI POLICY) 대체 */
.page-event .policy-page>.eyebrow{font-size:0;letter-spacing:0}
.page-event .policy-page>.eyebrow::after{content:"SKIN9HARI EVENT";font-size:10px;font-weight:700;letter-spacing:.22em}


/* ===== SKIN9HARI round3 ===== */

/* 띠배너 전체를 링크로 */
.benefit-bar{padding:0}
.benefit-bar-link{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;color:inherit}
.benefit-bar-link:hover{opacity:.85}

/* 전체/단품/세트 필터 활성 상태 */
.catalog-filter button{cursor:pointer;transition:background .2s,color .2s}
.catalog-filter button.is-active{color:#fff;background:var(--ink);border-color:var(--ink)}

/* 상품 Q&A 링크 */
.product-qna-link{display:inline-block;margin-left:22px;padding-bottom:7px;border-bottom:1px solid currentColor;font-size:12px}

/* 카카오톡·네이버 톡톡 상담 플로팅 버튼 */
.skin9hari-consult{position:fixed;right:22px;bottom:22px;z-index:200;display:grid;gap:10px}
.skin9hari-consult a{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  font-size:0;box-shadow:0 8px 22px rgba(30,25,20,.22);transition:transform .2s}
.skin9hari-consult a:hover{transform:translateY(-2px)}
.skin9hari-consult a:after{font-size:11px;font-weight:700;letter-spacing:-.02em}
.skin9hari-consult-kakao{background:#fae100;color:#3c1e1e}
.skin9hari-consult-kakao:after{content:"카톡"}
.skin9hari-consult-naver{background:#03c75a;color:#fff}
.skin9hari-consult-naver:after{content:"톡톡"}
@media(max-width:720px){
  .skin9hari-consult{right:14px;bottom:14px;gap:8px}
  .skin9hari-consult a{width:48px;height:48px}
}


/* Keep guide tables fluid when the content column is wide enough. */
.article-content .wp-block-table table,
.article-content .table-scroll table {
  width: 100%;
}