@charset "UTF-8";
/* snskit 화면 (docs/plan.md 7, 9, 12장). 이윰빌더 eb4_basic의 css/custom.css 자리에 들어간다(이윰 원본은 빈 파일).
   흰 바탕의 차분한 정보 사이트: 강조색은 신뢰감 있는 파랑~남색 하나, 그림자 없음.
   그라디언트와 움직임은 주문 버튼에만 쓰고(plan 9.3, 근거는 .local/t11/cta-research.md), 움직이는 속성은 transform, opacity뿐이다.
   토큰은 :root 변수, 화면 조각은 sk- 컴포넌트 class로 쓴다(목록은 readme.txt). 다른 몰 테마는 토큰 값만 바꿔 다시 쓴다.
   글자 대비는 WCAG AA(4.5:1) 이상, 누르는 곳은 높이 44px 이상. */
:root {
    /* 색 (대비는 흰 바탕 기준) */
    --sk-bg: #ffffff;
    --sk-subtle: #f3f6fb;        /* 옅은 면: 소개 상자, 꼬리말, 관리 화면 바탕 */
    --sk-line: #e2e8f0;          /* 구분선 */
    --sk-line-strong: #8a94a6;   /* 입력칸 테두리 (3.1:1) */
    --sk-ink: #0f172a;           /* 본문 글자 (17.9:1) */
    --sk-muted: #475569;         /* 보조 글자 (7.6:1, 옅은 면 7.0:1) */
    --sk-accent: #1d4ed8;        /* 강조색: 링크, 고른 메뉴, 포커스 (6.7:1, 옅은 면 6.2:1) */
    --sk-accent-strong: #1e3a8a; /* 진한 색(남색): hover, 고른 칩, 옅은 면 위 강조 글자 (10.4:1) */
    --sk-accent-soft: #eaf1ff;   /* 옅은 강조면: 요약 상자, 종류 표시, 카드의 주문 표시 (진한 색 글자 9.1:1) */
    --sk-danger: #b42318;        /* 오류 글자 (6.6:1) */
    --sk-danger-soft: #fdecea;
    --sk-focus: #1d4ed8;         /* 키보드 포커스 테두리 (흰 바탕 6.7:1) */
    /* 주문 버튼 (plan 9.3): 파랑 → 남색. 가장 밝은 끝 #2155e3 위 흰 글자 6.1:1, 빛이 지나가는 순간(흰빛 14%)에도 4.6:1 */
    --sk-cta-bg: linear-gradient(135deg, #2155e3 0%, #1e3a8a 100%);
    --sk-cta-bg-hover: linear-gradient(135deg, #1d4ed8 0%, #172e6e 100%);
    /* 글자 */
    --sk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    --sk-text-sm: 14px;
    --sk-text-md: 16px;
    --sk-text-lg: 18px;
    --sk-text-xl: 22px;
    --sk-text-2xl: 26px;
    --sk-text-3xl: 34px;
    /* 간격 */
    --sk-s1: 4px;
    --sk-s2: 8px;
    --sk-s3: 12px;
    --sk-s4: 16px;
    --sk-s5: 24px;
    --sk-s6: 32px;
    --sk-s7: 48px;
    --sk-s8: 64px;
    /* 둥글기 */
    --sk-r-sm: 8px;
    --sk-r: 12px;
    --sk-r-lg: 16px;
    --sk-r-pill: 999px;
    /* 크기 */
    --sk-touch: 44px;            /* 누르는 곳 최소 높이 */
    --sk-wide: 960px;            /* 화면 폭 */
    --sk-read: 720px;            /* 읽기 폭: 글, 목록 */
    /* 움직임: 상태 변화와 주문 버튼(plan 9.3). prefers-reduced-motion이면 전부 끈다 */
    --sk-dur: 160ms;
    --sk-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── 기본 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--sk-bg); color: var(--sk-ink); font: var(--sk-text-md)/1.7 var(--sk-font); word-break: keep-all; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
a { color: var(--sk-accent); text-underline-offset: 3px; }
a:hover { color: var(--sk-accent-strong); }
h1, h2, h3 { line-height: 1.4; letter-spacing: -0.02em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--sk-focus); outline-offset: 2px; }
[id] { scroll-margin-top: var(--sk-s4); }
[data-go] { cursor: pointer; }
/* ── 이윰빌더 위에서 (docs/plan.md 12장): 이 파일은 그누보드 default.css(휴대폰은 mobile.css), 부트스트랩, 이윰빌더 common.css, style.css
   다음에 읽힌다. 그 파일들이 지운 브라우저 기본값(제목 크기, 굵기, 여백, 문단 여백, 목록 점, 밑줄, 표)과 바꾼 글꼴(Pretendard, 맑은 고딕)을
   우리 화면 안에서만 브라우저 기본값으로 되돌린다. 선택자 무게는 요소 하나(0,0,1)라 아래 컴포넌트 class 규칙이 그대로 이긴다.
   이윰빌더가 그리는 기본 화면(회원 정보 등)은 건드리지 않는다. */
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) :is(h1, h2, h3, h4, h5, h6, label, input, button, select, textarea) { font-family: inherit; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) h1 { margin: 0.67em 0; font-size: 2em; font-weight: 700; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) h2 { margin: 0.83em 0; font-size: 1.5em; font-weight: 700; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) h3 { margin: 1em 0; font-size: 1.17em; font-weight: 700; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) h4 { margin: 1.33em 0; font-size: 1em; font-weight: 700; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) p { margin: 1em 0; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) ul { margin: 1em 0; padding-left: 40px; list-style: disc; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) ol { margin: 1em 0; padding-left: 40px; list-style: decimal; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) :is(ul, ol) :is(ul, ol) { margin: 0; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) dl { margin: 1em 0; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) dd { margin-left: 40px; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) a { text-decoration: underline; transition: none; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) :is(img, svg) { vertical-align: baseline; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) label { display: inline; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) table { border-collapse: separate; caption-side: top; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) th { font-weight: 700; text-align: center; }
:where(.sk-header, .sk-main, .sk-footer, .sk-dock, .sk-auth) small { font-size: smaller; }
/* 부트스트랩의 [hidden] { display: none !important }는 hidden="until-found"(칩으로 숨긴 상품을 페이지 안 찾기로 찾기)를 막는다 */
[hidden="until-found"] { display: revert !important; }
/* 이윰빌더 common.css의 a:focus { outline: 0 }, 그누보드 default.css의 입력칸 outline: none보다 무겁게 키보드 포커스를 보인다 */
a:focus-visible, .sk-input:focus-visible { outline: 3px solid var(--sk-focus); outline-offset: 2px; }

/* 아이콘 (lib/theme.lib.php snskit_theme_icon): 글자 옆에 곁들인다 */
.sk-ico { flex: none; width: 1.25em; height: 1.25em; }

/* 보조기기 전용 글자 (그누보드 기본 화면의 sound_only 포함) */
.sk-sr, .sound_only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sk-skip { position: absolute; left: var(--sk-s2); top: -100px; z-index: 20; padding: var(--sk-s2) var(--sk-s4); border-radius: var(--sk-r-sm); background: var(--sk-ink); color: #fff; font-weight: 700; }
.sk-skip:focus { top: var(--sk-s2); color: #fff; }

/* ── 배치 */
.sk-wrap, .sk-read { width: 100%; margin: 0 auto; padding: 0 var(--sk-s4); }
/* 이윰빌더 기본 화면(회원 정보 찾기 등, 우리 화면이 아닌 것)을 담는 상자 (head.html.php) */
.sk-other { padding-top: var(--sk-s5); padding-bottom: var(--sk-s7); }
.sk-wrap { max-width: calc(var(--sk-wide) + 2 * var(--sk-s4)); }
.sk-read { max-width: calc(var(--sk-read) + 2 * var(--sk-s4)); }
.sk-main { display: block; }

/* ── 버튼: 화면마다 꽉 찬 버튼(.sk-btn)은 하나, 나머지는 선 버튼(--line), 줄, 글자 링크로 낮춘다 */
.sk-btn, .snskit-post-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sk-s2); min-height: 48px; padding: 0 var(--sk-s5); border: 1px solid var(--sk-accent); border-radius: var(--sk-r); background: var(--sk-accent); color: #fff; font: inherit; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; }
.sk-btn:hover, .snskit-post-btn:hover { border-color: var(--sk-accent-strong); background: var(--sk-accent-strong); color: #fff; }
.sk-btn--line { background: var(--sk-bg); color: var(--sk-accent); }
.sk-btn--line:hover { background: var(--sk-accent-soft); color: var(--sk-accent-strong); }
.sk-btn--quiet { border-color: transparent; background: transparent; color: var(--sk-muted); font-weight: 600; }
.sk-btn--quiet:hover { border-color: var(--sk-line); background: var(--sk-subtle); color: var(--sk-ink); }
.sk-btn--danger { color: var(--sk-danger); }
.sk-btn--danger:hover { color: var(--sk-danger); }
.sk-btn--sm { flex: none; min-height: var(--sk-touch); padding: 0 var(--sk-s4); font-size: var(--sk-text-sm); white-space: nowrap; }
.sk-btn--block { display: flex; width: 100%; }
.sk-btn:disabled { opacity: 0.6; cursor: default; }

/* 주문 버튼 (plan 8.2, 9.3): 화면에서 가장 눈에 띄는 요소. 높이 56px, 굵은 글자, 모바일은 가로 꽉 차게, 파랑→남색 그라디언트.
   페이지마다 첫 화면에 하나(.sk-cta), 같은 버튼을 고정 버튼(.sk-dock)이 이어받는다. 본문 끝 바로가기 버튼(템플릿)도 같은 무게. */
.sk-btn--cta, .snskit-post-buttons .snskit-post-btn { position: relative; isolation: isolate; overflow: hidden; border-color: transparent; background: var(--sk-cta-bg); transition: transform var(--sk-dur) var(--sk-ease-out); }
.sk-btn--cta { min-height: 56px; padding: 0 var(--sk-s6); font-size: var(--sk-text-lg); font-weight: 800; }
.sk-btn--cta:hover, .snskit-post-buttons .snskit-post-btn:hover { border-color: transparent; background: var(--sk-cta-bg-hover); transform: translateY(-2px); }
/* 누를 때 눌림: 이동(0.1초 뒤, plan 7.4) 전에 눌렸다는 것을 바로 보여 준다 */
.sk-btn--cta:active, .snskit-post-buttons .snskit-post-btn:active { transform: scale(0.97); transition-duration: 60ms; }
/* 쇼핑몰로 가는 버튼, 주문 표시 끝의 화살표(›): 가는 방향을 알려 주고, 가리키거나 포커스하면 앞으로 민다 */
.sk-btn[data-go]::after, .snskit-post-btn::after, .sk-row__go::after, .sk-item__go::after { content: ""; flex: none; width: 0.42em; height: 0.42em; margin: 0 0.1em 0 -0.05em; border-top: 0.14em solid currentColor; border-right: 0.14em solid currentColor; transform: rotate(45deg); transition: transform var(--sk-dur) var(--sk-ease-out); }
.sk-btn[data-go]:hover::after, .sk-btn[data-go]:focus-visible::after, .snskit-post-btn:hover::after, .snskit-post-btn:focus-visible::after,
.sk-row:hover .sk-row__go::after, .sk-row:focus-visible .sk-row__go::after, .sk-item:hover .sk-item__go::after, .sk-item:focus-visible .sk-item__go::after { transform: translateX(4px) rotate(45deg); }
/* 빛 지나가기: 글자 아래(z-index -1)로 옅은 흰빛이 지나간다. 페이지의 첫 주문 버튼이 화면에 들어올 때 JS가 is-shine을 달면
   1.8초 간격으로 두 번(약 4초) 지나가고 멈춘다(WCAG 2.2.2의 5초 안). */
.sk-btn--cta::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 45%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%); transform: translateX(-110%); pointer-events: none; }
.sk-btn--cta.is-shine::before { animation: sk-shine 1.8s ease-in-out 0.3s 2; }
@keyframes sk-shine { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(330%); } }
/* 한동안 입력이 없으면 한 번(페이지당 1회) 살짝 커졌다 돌아오며 화살표를 민다 (js/snskit.js) */
.sk-btn--cta.is-nudge { animation: sk-nudge 0.9s var(--sk-ease-out) 1; }
.sk-btn--cta.is-nudge::after { animation: sk-arrow 0.9s ease-in-out 1; }
@keyframes sk-nudge { 0%, 100% { transform: none; } 35% { transform: scale(1.04); } 70% { transform: scale(0.99); } }
@keyframes sk-arrow { 0%, 50%, 100% { transform: rotate(45deg); } 25%, 75% { transform: translateX(6px) rotate(45deg); } }
.sk-cta { margin: 0 0 var(--sk-s5); }
/* 하트: 첫 주문 버튼 뒤에서 떠오른다(js/snskit.js). 버튼보다 뒤(z-index -1)라 버튼 글자를 가리지 않고, 누르기를 막지 않는다 */
.sk-cta { position: relative; isolation: isolate; }
.sk-hearts { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sk-hearts span { position: absolute; line-height: 1; opacity: 0; will-change: transform, opacity; }

/* 글자 링크 모양의 쇼핑몰 이동 요소 (글 속 링크, 꼬리말) */
.sk-golink { color: var(--sk-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sk-golink:hover { color: var(--sk-accent-strong); text-decoration-thickness: 2px; }

/* ── 머리말 */
.sk-header { border-bottom: 1px solid var(--sk-line); background: var(--sk-bg); }
.sk-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-s3); min-height: 64px; }
.sk-brand { display: inline-flex; align-items: center; gap: var(--sk-s2); min-height: var(--sk-touch); color: var(--sk-ink); font-size: 17px; font-weight: 800; line-height: 1.3; text-decoration: none; }
.sk-brand:hover { color: var(--sk-ink); }
.sk-brand svg { flex: none; width: 32px; height: 32px; }
/* 메뉴: 모바일은 가로로 넘기는 한 줄(햄버거 메뉴 없음). 지금 페이지는 aria-current. 항목마다 아이콘 */
.sk-menu__list { display: flex; gap: var(--sk-s1); margin: 0 auto; overflow-x: auto; list-style: none; scrollbar-width: none; }
.sk-menu__list::-webkit-scrollbar { display: none; }
.sk-menu__link { display: flex; align-items: center; gap: 6px; min-height: var(--sk-touch); padding: 0 var(--sk-s3); border-bottom: 2px solid transparent; color: var(--sk-ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sk-menu .sk-ico { width: 18px; height: 18px; color: var(--sk-muted); }
.sk-menu__link:hover, .sk-menu__link:hover .sk-ico { color: var(--sk-accent); }
.sk-menu__link[aria-current] { border-bottom-color: var(--sk-accent); color: var(--sk-accent); font-weight: 800; }
.sk-menu__link[aria-current] .sk-ico { color: var(--sk-accent); }
.sk-menu__link:focus-visible { outline-offset: -3px; }
#hd_login_msg { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 var(--sk-s2); padding: 0 var(--sk-s4); background: var(--sk-subtle); color: var(--sk-muted); font-size: var(--sk-text-sm); }
#hd_login_msg a { display: inline-flex; align-items: center; min-height: var(--sk-touch); }

/* ── 영역 */
.sk-hero { padding: var(--sk-s6) 0 0; }
.sk-hero__title { margin: 0 0 var(--sk-s3); font-size: var(--sk-text-2xl); }
/* 목록, 글 페이지에서는 메인 상단 제목이 h1이 아니라 p다(h1은 페이지당 하나). 모양은 h1과 같게 */
p.sk-hero__title { color: var(--sk-ink); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; text-wrap: balance; }
.sk-hero__text { margin: 0 0 var(--sk-s5); max-width: 38em; color: var(--sk-muted); font-size: 17px; }
.sk-sec { padding-top: var(--sk-s7); }
.sk-sec__title { margin: 0 0 var(--sk-s2); font-size: var(--sk-text-xl); }
.sk-em { color: var(--sk-accent); font-style: normal; }
.sk-sec__lead { margin: 0 0 var(--sk-s2); max-width: 42em; color: var(--sk-muted); }
.sk-note { margin: 0 0 var(--sk-s4); color: var(--sk-muted); font-size: var(--sk-text-sm); }
.sk-sec__title + .sk-items, .sk-page__lead + .sk-items, .sk-cta + .sk-items { margin-top: var(--sk-s4); }
.sk-items ~ .sk-note { margin-top: var(--sk-s4); }

/* ── 플랫폼 표시 타일 (각 서비스 색 바탕 + 흰 아이콘, 장식이라 보조기기에서는 숨는다) */
.sk-tile { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--sk-r); background: #111; color: #fff; }
.sk-tile .sk-ico { width: 24px; height: 24px; }
.sk-tile--instagram { background: linear-gradient(45deg, #f9a03f 0%, #e1306c 45%, #833ab4 100%); }
.sk-tile--youtube { background: #ff0033; }
.sk-tile--facebook { background: #0866ff; }

/* ── 플랫폼 진입 카드 (메인): 타일, 이름, 상품 수, 최저가. 누르면 플랫폼 목록 */
.sk-plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-s2); margin: var(--sk-s4) 0 0; padding: 0; list-style: none; }
.sk-plat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; padding: var(--sk-s3) var(--sk-s4) var(--sk-s4); border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg); color: var(--sk-ink); text-decoration: none; transition: border-color var(--sk-dur); }
.sk-plat .sk-tile { margin-bottom: var(--sk-s2); }
.sk-plat:hover { border-color: var(--sk-accent); color: var(--sk-ink); }
.sk-plat__name { font-size: 17px; font-weight: 800; }
.sk-plat__meta { color: var(--sk-muted); font-size: var(--sk-text-sm); font-variant-numeric: tabular-nums; }
.sk-more-link { margin: var(--sk-s4) 0 0; }
.sk-more-link a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--sk-touch); font-weight: 700; }
.sk-more-link a::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

/* ── 나눠진 페이지(목록, 상세, 이용 방법, FAQ)의 머리 */
.sk-page { padding-top: var(--sk-s4); }
.sk-page__title { margin: 0 0 var(--sk-s2); font-size: var(--sk-text-2xl); }
.sk-page__title--tile { display: flex; align-items: center; gap: var(--sk-s3); }
.sk-page__lead { margin: 0 0 var(--sk-s5); color: var(--sk-muted); }
/* 종류, 플랫폼 표시 (아이콘 + 짧은 이름): 상세 제목 위, 상품 카드 */
.sk-tag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; margin: 0; color: var(--sk-muted); font-size: var(--sk-text-sm); font-weight: 700; line-height: 1.4; }
.sk-tag .sk-ico { width: 16px; height: 16px; }
.sk-tag__sep { color: var(--sk-line-strong); }
/* 상품 상세 머리 (plan 9.4): 큰 이미지 + 종류, 이름, 최저가 → 주문 버튼 → 요약. 모바일은 이미지 옆에 이름, 그 아래 주문 버튼 */
.sk-detail { display: grid; grid-template-columns: clamp(104px, 36vw, 200px) minmax(0, 1fr); grid-template-areas: "img head" "cta cta" "lead lead"; align-items: center; gap: var(--sk-s4); margin: 0 0 var(--sk-s2); }
.sk-detail__img { grid-area: img; display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--sk-r-lg); background: var(--sk-subtle); object-fit: cover; }
.sk-detail__head { grid-area: head; display: grid; gap: 6px; }
.sk-detail .sk-page__title { margin: 0; font-size: var(--sk-text-xl); }
.sk-detail__price { margin: 0; font-size: var(--sk-text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.sk-detail > .sk-cta { grid-area: cta; margin: 0; }
.sk-detail > .sk-page__lead { grid-area: lead; margin: 0; }
.sk-detail__prices { margin-top: var(--sk-s6); }
.sk-detail__prices .sk-rows { margin-top: var(--sk-s2); }
.sk-checks { margin: var(--sk-s3) 0 0; padding: 0; list-style: none; }
.sk-checks li { position: relative; margin: 0 0 var(--sk-s3); padding-left: 1.6em; }
.sk-checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--sk-accent); font-weight: 800; }

/* ── 종류 칩 (플랫폼 목록): 라디오 단추(화살표 키로 고름). 고르는 기능은 JS가 있을 때만 있으므로 그때만 보인다. */
.sk-chips { display: none; flex-wrap: wrap; gap: var(--sk-s2); margin: 0 0 var(--sk-s4); }
.sk-js .sk-chips { display: flex; }
.sk-chip { position: relative; display: inline-flex; }
.sk-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sk-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: var(--sk-touch); padding: 0 var(--sk-s4) 0 var(--sk-s3); border: 1px solid var(--sk-line); border-radius: var(--sk-r-pill); background: var(--sk-bg); color: var(--sk-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.sk-chip .sk-ico { width: 18px; height: 18px; color: var(--sk-accent); }
.sk-chip:hover span { border-color: var(--sk-line-strong); }
.sk-chip input:checked + span { border-color: var(--sk-accent-strong); background: var(--sk-accent-strong); color: #fff; }
.sk-chip input:checked + span .sk-ico { color: #fff; }
.sk-chip input:focus-visible + span { outline: 3px solid var(--sk-focus); outline-offset: 2px; }

/* ── 펼침(details.sk-fold: 자주 묻는 질문, 목차, 관련 상품 더 보기) 공통: 서버는 펼친 채 내보내고 JS가 접는다 */
.sk-fold > summary { list-style: none; cursor: pointer; }
.sk-fold > summary::-webkit-details-marker { display: none; }
.sk-fold > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 6px; border-right: 2px solid var(--sk-muted); border-bottom: 2px solid var(--sk-muted); transform: translateY(-25%) rotate(45deg); transition: transform var(--sk-dur); }
.sk-fold[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
/* 스크립트가 초기화되기 전에도 접힌 모습으로 그린다(펼친 모습이 잠깐 보였다 접히지 않게) */
.sk-js:not(.sk-ready) .sk-fold > summary::after { transform: translateY(-25%) rotate(45deg); }
.sk-js:not(.sk-ready) .sk-fold > :not(summary),
.sk-js:not(.sk-ready) .sk-dock { display: none; }

/* ── 상품 카드 (plan 9.4: 메인 상품, 플랫폼 목록, 상세의 다른 상품, 글의 관련 상품). 누르면 상품 상세
   위계: 큰 이미지 → 종류 → 이름 → 최저가 → 주문 표시. 모바일 2열, 넓은 화면 3열(--wide는 4열),
   --list는 모바일에서 한 줄에 하나(이미지 옆에 글자). 이미지는 정사각형 비율로 자리를 먼저 잡아 화면이 밀리지 않는다. */
.sk-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-s3); margin: 0; padding: 0; list-style: none; }
.sk-items > li { min-width: 0; } /* display는 두지 않는다: hidden(display:none)이 그대로 듣게 */
.sk-items > li[hidden] { position: absolute; } /* 칩으로 숨긴 카드(hidden="until-found")가 격자 칸을 차지하지 않게 */
.sk-item { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg); background: var(--sk-bg); color: var(--sk-ink); text-decoration: none; transition: transform var(--sk-dur) var(--sk-ease-out), border-color var(--sk-dur); }
.sk-item:hover { border-color: var(--sk-accent); color: var(--sk-ink); transform: translateY(-3px); }
.sk-item__img { flex: none; display: block; width: 100%; height: auto; aspect-ratio: 1; background: var(--sk-subtle); object-fit: cover; }
.sk-item__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: var(--sk-s3) var(--sk-s3) var(--sk-s4); }
.sk-item .sk-tag { padding: 2px 8px 2px 6px; border-radius: var(--sk-r-pill); background: var(--sk-accent-soft); color: var(--sk-accent-strong); font-size: 13px; }
.sk-item__name { font-weight: 700; line-height: 1.45; }
.sk-item:hover .sk-item__name { color: var(--sk-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.sk-item__price { font-size: 15px; font-weight: 800; line-height: 1.45; font-variant-numeric: tabular-nums; }
.sk-item__note { margin: var(--sk-s2) 0 var(--sk-s3); font-size: 15px; }
/* 주문으로 이어지는 표시 (plan 8.2): 카드 끝은 옅은 "주문 ›"(카드 전체가 누르는 곳, 상세로), 수량 행 끝은 쇼핑몰로 바로 가는 꽉 찬 "주문 ›" */
.sk-item__go, .sk-row__go { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--sk-s3) 0 var(--sk-s4); border-radius: var(--sk-r-pill); font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap; }
.sk-item__go { margin-top: auto; background: var(--sk-accent-soft); color: var(--sk-accent-strong); }
.sk-item:hover .sk-item__go { background: var(--sk-cta-bg); color: #fff; }

/* 수량별 가격 행 (상품 상세): 행 자체가 그 수량 상품의 쇼핑몰 이동 요소 */
.sk-rows { margin: 0 0 var(--sk-s3); padding: 0; list-style: none; border: 1px solid var(--sk-line); border-radius: var(--sk-r); overflow: hidden; }
.sk-rows > li + li { border-top: 1px solid var(--sk-line); }
.sk-row { display: flex; align-items: center; gap: var(--sk-s3); min-height: 56px; padding: var(--sk-s2) var(--sk-s3) var(--sk-s2) var(--sk-s4); color: var(--sk-ink); }
.sk-row__qty { flex: 1; }
.sk-row:hover { background: var(--sk-accent-soft); }
.sk-row:focus-visible { outline-offset: -3px; }
.sk-row__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-row__go { background: var(--sk-cta-bg); color: #fff; }
.sk-row:active .sk-row__go { transform: scale(0.95); }
.sk-opts { margin: 0 0 var(--sk-s3); font-size: var(--sk-text-sm); }
.sk-opts__name { margin: 0 0 2px; font-weight: 700; }
.sk-opts__list { margin: 0; padding-left: 1.3em; color: var(--sk-muted); }

/* 관련 상품 더 보기 (글 페이지) */
.sk-more-items__head { display: flex; align-items: center; justify-content: center; gap: var(--sk-s2); min-height: 52px; margin: var(--sk-s3) 0; border: 1px solid var(--sk-line); border-radius: var(--sk-r); font-weight: 700; }
.sk-more-items__head:hover { background: var(--sk-subtle); }
.sk-more-items:not([open]) .sk-when-open, .sk-more-items[open] .sk-when-closed { display: none; }
.sk-js:not(.sk-ready) .sk-more-items .sk-when-closed { display: inline; }
.sk-js:not(.sk-ready) .sk-more-items .sk-when-open { display: none; }

/* ── 이용 방법: 단계마다 아이콘(옅은 강조면 타일)과 그 귀퉁이의 번호 */
.sk-steps { display: grid; gap: var(--sk-s5); margin: var(--sk-s5) 0 0; padding: 0; list-style: none; counter-reset: sk-step; }
.sk-steps li { position: relative; padding-left: 64px; counter-increment: sk-step; }
.sk-steps__ico { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--sk-r); background: var(--sk-accent-soft); color: var(--sk-accent); }
.sk-steps__ico .sk-ico { width: 26px; height: 26px; }
.sk-steps li::before { content: counter(sk-step); position: absolute; left: 32px; top: -6px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--sk-bg); border-radius: 50%; background: var(--sk-accent-strong); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.sk-steps h2, .sk-steps h3 { margin: 2px 0 var(--sk-s1); font-size: var(--sk-text-lg); }
.sk-steps p { margin: 0; color: var(--sk-muted); }

/* ── 자주 묻는 질문 (아코디언) */
.sk-accs { margin-top: var(--sk-s4); border-top: 1px solid var(--sk-line); }
.sk-acc { border-bottom: 1px solid var(--sk-line); }
.sk-acc__q { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-s3); min-height: 60px; padding: var(--sk-s3) var(--sk-s1); font-weight: 700; }
.sk-acc__q:hover { color: var(--sk-accent); }
.sk-acc__a { margin: 0; max-width: 46em; padding: 0 var(--sk-s1) var(--sk-s5); }

/* ── 글 페이지 */
.sk-post, .sk-board { padding-top: var(--sk-s4); }
.sk-crumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 var(--sk-s2); padding: 0; color: var(--sk-muted); font-size: var(--sk-text-sm); list-style: none; }
.sk-crumb li + li::before { content: "\203A"; margin: 0 12px; }
/* 글자 자리는 그대로 두고 누르는 영역만 양옆 15px씩 넓힌다("홈"도 44px). 구분자 여백(12px+›+12px) 안이라 서로 겹치지 않는다. */
.sk-crumb a { display: inline-flex; align-items: center; min-height: var(--sk-touch); margin: 0 -15px; padding: 0 15px; color: var(--sk-muted); }
.sk-post__title, .sk-board__title { margin: 0 0 var(--sk-s2); font-size: var(--sk-text-2xl); }

/* 줄 목록 (함께 보면 좋은 글, 게시판 목록, 관련 글) */
.sk-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sk-line); }
.sk-list > li { border-bottom: 1px solid var(--sk-line); }
.sk-list__a { display: flex; align-items: center; gap: var(--sk-s3); min-height: 52px; padding: var(--sk-s3) var(--sk-s1); color: var(--sk-ink); font-weight: 600; text-decoration: none; }
.sk-list__a:hover { background: var(--sk-subtle); color: var(--sk-ink); }
.sk-list__t { flex: 1; }
.sk-list__m { flex: none; color: var(--sk-muted); font-size: var(--sk-text-sm); font-weight: 400; }
.sk-list__a::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-top: 2px solid var(--sk-muted); border-right: 2px solid var(--sk-muted); transform: rotate(45deg); }

/* 고정 주문 버튼 (plan 8.2): 모바일은 모든 페이지의 화면 아래, 데스크톱은 상세, 글 페이지의 위쪽 띠(넓은 화면 규칙).
   본문의 주문 버튼([data-sk-dock-anchor], 글 끝 버튼 묶음)이 보이는 동안은 JS가 hidden으로 숨긴다.
   나타날 때마다 아래에서(데스크톱 띠는 위에서) 미끄러져 들어온다(0.26초, plan 9.3). */
.sk-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10; padding: var(--sk-s3) 0 calc(var(--sk-s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--sk-line); background: var(--sk-bg); }
.sk-dock:not([hidden]) { animation: sk-dock-up 0.26s var(--sk-ease-out); }
@keyframes sk-dock-up { from { transform: translateY(100%); opacity: 0; } }
@keyframes sk-dock-down { from { transform: translateY(-100%); opacity: 0; } }
.sk-dock__in { display: flex; align-items: center; gap: var(--sk-s4); }
.sk-dock__title { display: none; }

/* 쪽 번호 (그누보드 get_paging) */
.pg_wrap { display: block; float: none; margin: var(--sk-s6) 0; text-align: center; } /* 그누보드 default.css의 float:left를 푼다 */
.pg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--sk-s1); }
.pg_page, .pg_current { display: inline-grid; place-items: center; min-width: var(--sk-touch); height: var(--sk-touch); padding: 0 var(--sk-s3); border: 1px solid var(--sk-line); border-radius: var(--sk-r-sm); background: var(--sk-bg); color: var(--sk-ink); font-size: 15px; text-decoration: none; }
.pg_page:hover { border-color: var(--sk-accent); color: var(--sk-accent); }
.pg_current { border-color: var(--sk-accent); background: var(--sk-accent); color: #fff; font-weight: 700; }
/* 그누보드 default.css는 처음, 이전, 다음, 맨끝을 글자를 숨긴 그림 단추로 그린다. 우리는 글자 단추로 보인다 */
.pg_start, .pg_prev, .pg_next, .pg_end { padding: 0 var(--sk-s3); overflow: visible; text-indent: 0; }

/* ── 꼬리말 */
/* 모바일은 고정 주문 버튼 높이(위아래 여백 12px×2 + 버튼 56px + 선 1px = 81px)만큼 아래를 더 비워 하단 정보를 가리지 않는다 */
.sk-footer { margin-top: var(--sk-s8); padding: var(--sk-s6) 0 calc(var(--sk-s7) + 81px + env(safe-area-inset-bottom)); background: var(--sk-subtle); color: var(--sk-muted); font-size: var(--sk-text-sm); }
.sk-footer p { margin: 0 0 var(--sk-s2); }
.sk-footer .sk-golink { display: inline-flex; align-items: center; min-height: var(--sk-touch); }
.sk-footer__brand { color: var(--sk-ink); font-size: var(--sk-text-md); font-weight: 800; }
.sk-footer__info { display: grid; gap: 2px; margin: var(--sk-s4) 0; }
.sk-footer__info div { display: flex; flex-wrap: wrap; gap: 0 10px; }
.sk-footer__info dt { font-weight: 700; }
.sk-footer__info dd { margin: 0; }

/* ── 입력 (로그인, 관리 화면) */
.sk-field { display: grid; gap: 6px; margin: 0 0 var(--sk-s4); }
.sk-label, .sk-field > label { color: var(--sk-ink); font-size: var(--sk-text-sm); font-weight: 700; }
.sk-input { width: 100%; min-height: var(--sk-touch); padding: 0 var(--sk-s3); border: 1px solid var(--sk-line-strong); border-radius: var(--sk-r-sm); background: var(--sk-bg); color: var(--sk-ink); font: inherit; }
textarea.sk-input { padding: var(--sk-s3); line-height: 1.5; resize: vertical; }
.sk-input:focus-visible { border-color: var(--sk-focus); outline-offset: 0; }
.sk-check { display: inline-flex; align-items: center; gap: var(--sk-s2); min-height: var(--sk-touch); cursor: pointer; }
.sk-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--sk-accent); }

/* ── 표, 숫자, 알림 (관리 화면 등) */
.sk-table-wrap { overflow-x: auto; border: 1px solid var(--sk-line); border-radius: var(--sk-r); }
.sk-table { width: 100%; border-collapse: collapse; font-size: var(--sk-text-sm); font-variant-numeric: tabular-nums; }
.sk-table th, .sk-table td { padding: var(--sk-s2) var(--sk-s3); border-bottom: 1px solid var(--sk-line); text-align: left; vertical-align: middle; }
.sk-table thead th { background: var(--sk-subtle); color: var(--sk-muted); white-space: nowrap; }
.sk-table tbody tr:last-child > * { border-bottom: 0; }
.sk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sk-s3); margin: 0; }
.sk-stat { padding: var(--sk-s4); border: 1px solid var(--sk-line); border-radius: var(--sk-r); background: var(--sk-bg); }
.sk-stat dt { color: var(--sk-muted); font-size: var(--sk-text-sm); font-weight: 600; }
.sk-stat dd { margin: var(--sk-s1) 0 0; font-size: var(--sk-text-xl); font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.sk-stat small { display: block; margin-top: 2px; color: var(--sk-muted); font-size: 13px; font-weight: 500; }
.sk-alert { margin: 0 0 var(--sk-s4); padding: var(--sk-s3) var(--sk-s4); border-radius: var(--sk-r); background: var(--sk-subtle); }
.sk-alert--error { background: var(--sk-danger-soft); color: var(--sk-danger); }

/* ── 그누보드 기본 화면: 로그인(테마 회원 스킨), 알림, 확인(JS를 끈 경우의 안내) */
.sk-auth { display: flex; flex-direction: column; align-items: center; gap: var(--sk-s5); min-height: 100vh; padding: var(--sk-s7) var(--sk-s4); background: var(--sk-subtle); }
.sk-auth__card { width: 100%; max-width: 400px; padding: var(--sk-s6) var(--sk-s5); border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg); background: var(--sk-bg); }
.sk-auth__title { margin: 0 0 var(--sk-s5); font-size: var(--sk-text-xl); }
.sk-auth__more { margin: var(--sk-s3) 0 0; font-size: var(--sk-text-sm); text-align: center; }
.sk-auth__more a { display: inline-flex; align-items: center; min-height: var(--sk-touch); color: var(--sk-muted); }
#validation_check, #confirm_check { width: calc(100% - 2 * var(--sk-s4)); max-width: 480px; margin: var(--sk-s7) auto; padding: var(--sk-s6) var(--sk-s5); border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg); }
#validation_check h1, #confirm_check h1 { margin: 0 0 var(--sk-s3); font-size: var(--sk-text-xl); }
#confirm_check h2 { margin: 0 0 var(--sk-s3); color: var(--sk-muted); font-size: var(--sk-text-md); }
#validation_check .btn_confirm a, #validation_check input[type="submit"], #confirm_check a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: var(--sk-s1) var(--sk-s1) 0 0; padding: 0 var(--sk-s5); border: 1px solid var(--sk-accent); border-radius: var(--sk-r); background: var(--sk-accent); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }

/* ── 좁은 화면: 주문 버튼은 가로 꽉 차게, --list 카드는 한 줄에 하나(이미지 옆에 글자) */
@media (max-width: 639px) {
    .sk-btn--cta { display: flex; width: 100%; padding: 0 var(--sk-s4); }
    .sk-items--list { grid-template-columns: minmax(0, 1fr); }
    .sk-items--list .sk-item { flex-direction: row; align-items: center; }
    .sk-items--list .sk-item__img { width: 104px; margin: var(--sk-s3) 0 var(--sk-s3) var(--sk-s3); border-radius: var(--sk-r); }
    .sk-items--list .sk-item__body { padding: var(--sk-s3); }
}

/* ── 넓은 화면 */
@media (min-width: 640px) {
    .sk-plats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sk-plat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tile name" "tile meta"; align-items: center; column-gap: var(--sk-s3); padding: var(--sk-s3) var(--sk-s4); }
    .sk-plat .sk-tile { grid-area: tile; margin: 0; }
    .sk-plat__name { grid-area: name; align-self: end; }
    .sk-plat__meta { grid-area: meta; align-self: start; }
    .sk-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sk-s4); }
    .sk-item__body { padding: var(--sk-s4); }
    .sk-detail { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "img head" "img cta" "img lead"; align-items: start; column-gap: var(--sk-s6); row-gap: var(--sk-s4); }
    .sk-detail__img { grid-row: 1 / 4; }
    .sk-detail__head { gap: var(--sk-s2); }
    .sk-detail .sk-page__title { font-size: 28px; }
    .sk-detail__price { font-size: var(--sk-text-xl); }
}
@media (min-width: 768px) {
    .sk-hero { padding-top: var(--sk-s7); }
    .sk-hero__title { font-size: var(--sk-text-3xl); }
    .sk-sec { padding-top: var(--sk-s8); }
    .sk-hero + .sk-sec { padding-top: var(--sk-s7); }
    .sk-sec__title { font-size: var(--sk-text-2xl); }
    .sk-steps:not(.sk-steps--stack) { grid-template-columns: repeat(3, 1fr); gap: var(--sk-s6); }
    .sk-steps:not(.sk-steps--stack) li { padding: 64px 0 0; }
    .sk-page__title { font-size: 32px; }
    .sk-post__title, .sk-board__title { font-size: 32px; }
    .sk-footer { padding-bottom: var(--sk-s7); }
    /* 데스크톱 고정 주문 버튼: 상세, 글 페이지에서만, 본문의 주문 버튼을 지나 스크롤하면 위쪽 띠로 따라온다(JS가 있을 때) */
    .sk-dock { display: none; }
    .sk-ready .sk-page-group .sk-dock:not([hidden]), .sk-ready .sk-page-post .sk-dock:not([hidden]) { display: block; top: 0; bottom: auto; padding: var(--sk-s2) 0; border-top: 0; border-bottom: 1px solid var(--sk-line); animation-name: sk-dock-down; }
    .sk-dock__title { display: block; flex: 1; min-width: 0; margin: 0; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
    .sk-page-group [id], .sk-page-post [id] { scroll-margin-top: 88px; } /* 띠(73px)에 소제목이 가리지 않게 */
}
@media (min-width: 960px) {
    .sk-items--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
    /* 긴 사이트 이름이 주문 버튼을 밀어 화면 밖으로 넘치지 않게: 남는 폭에서 두 줄까지, 넘치면 말줄임 */
    .sk-brand { min-width: 0; font-size: 15px; }
    .sk-brand span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
}

/* 움직임 줄이기: 빛 지나가기, 밀기, 등장, hover 들림을 모두 끄고 색 변화만 남긴다 */
@media (prefers-reduced-motion: reduce) {
    :root { --sk-dur: 0ms; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .sk-btn--cta:hover, .sk-btn--cta:active, .snskit-post-btn:hover, .snskit-post-btn:active, .sk-item:hover, .sk-row:active .sk-row__go { transform: none; }
    .sk-btn[data-go]:hover::after, .sk-btn[data-go]:focus-visible::after, .snskit-post-btn:hover::after, .snskit-post-btn:focus-visible::after,
    .sk-row:hover .sk-row__go::after, .sk-row:focus-visible .sk-row__go::after, .sk-item:hover .sk-item__go::after, .sk-item:focus-visible .sk-item__go::after { transform: rotate(45deg); }
}

/* 목록, 글 페이지: 맨 위 메인 상단(인기상품) 다음에 오는 본문 영역 위에 여백을 넉넉히 둔다 */
.sk-sec + .sk-board, .sk-sec + .sk-post { margin-top: 56px; }
@media (min-width: 768px) {
    .sk-sec + .sk-board, .sk-sec + .sk-post { margin-top: 96px; }
}