/* 피드형(look=feed) 창 밖 화면 — views/layout.php 가 body.pg.pg-feed 에 assets/feed.css·pages.css 다음으로 읽는다 (2026-10-31 전부 새로).
   이용권(views/ticket_feed.php .tkf) · 고객센터·내 정보(style.css 공통 부품) · 로그인·가입·비밀번호 찾기·삭제 요청(.narrow) · 업체 DB 안내(/data .ul, views/uni_land.php) · 약관(.legal) · 404.
   말씨는 첫 화면과 같다: 괘선·모노 숫자·먹색 제목, 주황은 받기·지금 자리에만. style.css 공통 부품의 색 이름은 pages.css(body.pg)가 사이트 색으로 바꿔 둔다 */
body.pg-feed { --r-sm: 4px; --r-md: 5px; --r-lg: 6px; --gutter: 32px; }
.pg-feed h1, .pg-feed h2, .pg-feed summary { word-break: keep-all; }   /* 제목이 낱말 가운데서 끊기지 않게 (휴대폰) */
.pg-feed .pg-main { padding-block: 8px 44px; }
.pg-feed .pg-main > .wrap, .pg-feed .pg-main > div > .wrap { max-width: 1100px; padding-inline: 0; }
.pg-feed a { color: var(--ac); }
.pg-feed .sub, .pg-feed .muted, .pg-feed .hint { color: var(--mu); }
.pg-feed .btn { border-radius: var(--r-sm); font-weight: 700; }
.pg-feed .btn.secondary { border-color: var(--ln2); background: transparent; color: var(--tx); }
.pg-feed .btn.secondary:hover { border-color: var(--tx); background: transparent; }
.pg-feed .btn.ghost:hover { background: var(--sf2); }
.pg-feed .panel { border: 1px solid var(--ln); border-radius: var(--r-lg); background: var(--sf); box-shadow: none; }
.pg-feed .tablewrap { border-color: var(--ln); border-radius: var(--r-lg); }
.pg-feed table th { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; }
.pg-feed .badge { border-radius: 3px; font-weight: 600; }
.pg-feed .field input, .pg-feed .field select, .pg-feed .field textarea { border-radius: var(--r-sm); }
.pg-feed .alert { border-radius: var(--r-sm); }
/* 화면 머리: 모노 이름표 · 큰 제목 · 먹색 줄 */
.pg-feed .page-head { display: block; margin: 0 0 18px; padding: 28px 0 14px; border-bottom: 2px solid var(--tx); }
.pg-feed .page-head .eyebrow { margin: 0; color: var(--ac); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: none; }
.pg-feed .page-head h1 { margin-top: 6px !important; font-size: clamp(26px, 2.6vw, 34px); font-weight: 850; letter-spacing: -.035em; }
.pg-feed .page-head .muted, .pg-feed .page-head p:not(.eyebrow) { color: var(--mu); }
/* 고객센터·내 정보: 밑줄 탭 (고른 것은 주황 밑줄) */
.pg-feed .my-layout, .pg-feed .sup-layout { display: block; padding-bottom: 40px; }
.pg-feed .my-nav, .pg-feed .sup-nav { position: static; display: flex; gap: 0; margin: -6px 0 22px; padding: 0; border: 0; border-bottom: 1px solid var(--ln); border-radius: 0; background: none; box-shadow: none; overflow-x: auto; scrollbar-width: none; }
.pg-feed .my-nav::-webkit-scrollbar, .pg-feed .sup-nav::-webkit-scrollbar { display: none; }
.pg-feed .my-nav a, .pg-feed .sup-nav a { flex: none; min-height: 0; height: 42px; margin-bottom: -1px; padding: 0 14px; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--mu); font-size: 14px; font-weight: 600; white-space: nowrap; }
.pg-feed .my-nav a svg, .pg-feed .sup-nav a svg { width: 16px; height: 16px; }
.pg-feed .my-nav a:hover, .pg-feed .sup-nav a:hover { background: none; color: var(--tx); text-decoration: none; }
.pg-feed .my-nav a[aria-current="page"], .pg-feed .sup-nav a[aria-current="page"] { background: none; color: var(--tx); border-color: var(--btn); box-shadow: none; }
.pg-feed .my-nav.fr, .pg-feed .sup-nav.fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.pg-feed .list .li { padding: 14px 18px; color: var(--tx); }
.pg-feed .list .li .tel { color: var(--mu2); font-family: var(--mono); font-size: 12.5px; }
.pg-feed .faq summary { padding: 14px 18px; }
.pg-feed .faq .a { padding: 0 18px 16px; }
.pg-feed .inq details { border-radius: var(--r-lg); }
.pg-feed .inq .reply { border-left: 3px solid var(--btn); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--sf2); }
.pg-feed .sec-h h2 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.pg-feed .tix-card { border-top: 3px solid var(--btn); }
.pg-feed .quota-bar i { background: var(--btn); }
/* 로그인·가입·비밀번호 찾기·삭제 요청·404: 좁은 한 칸 (창 아님) */
.pg-feed .narrow { margin: 28px auto 0; padding-inline: 0; gap: 18px; }
.pg-feed .em-lead h1 { font-size: 30px; font-weight: 850; letter-spacing: -.035em; }
.pg-feed .em-lead .muted { color: var(--mu); }
.pg-feed .narrow > .form, .pg-feed .narrow > .panel { border: 1px solid var(--ln2); border-top: 3px solid var(--btn); border-radius: var(--r-lg); background: var(--sf); }
.pg-feed .narrow .form-h { margin: 6px 0 -4px; padding-bottom: 6px; border-bottom: 1px solid var(--ln); font-size: 15px; font-weight: 800; }
.pg-feed .narrow .btn.lg { height: 48px; }
.pg-feed .narrow > .sub a, .pg-feed .narrow > p a { color: var(--tx); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pg-feed .narrow > .sub a:hover, .pg-feed .narrow > p a:hover { color: var(--ac); }
.pg-feed .so-up { border-color: var(--ln); border-radius: var(--r-lg); background: var(--sf); }
.pg-feed .so-up h2 { font-size: 15px; font-weight: 800; }
.pg-feed .so-or::before, .pg-feed .so-or::after { background: var(--ln); }
.pg-feed .social-in .so-kakao, .pg-feed .so-up .so-kakao { color: #191600; border-radius: var(--r-sm); }   /* SNS 단추 글자는 늘 진하게 */
.pg-feed .social-in .so-google, .pg-feed .so-up .so-google { color: #1f1f1f; border-radius: var(--r-sm); }
.pg-feed .consent { border-radius: var(--r-sm); }
.pg-feed .narrow:has(> .eyebrow.mono) { justify-items: center; padding-top: 40px; text-align: center; }   /* 404 */
.pg-feed .narrow > .eyebrow.mono { margin: 0; color: var(--ac); font-family: var(--mono); font-size: 64px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.pg-feed .narrow:has(> .eyebrow.mono) h1 { font-size: 26px; font-weight: 850; letter-spacing: -.03em; }
/* 약관·개인정보 */
.pg-feed .legal { max-width: 820px; padding-inline: 0; padding-block: 28px 60px; }
.pg-feed .legal h1 { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--tx); font-size: 30px; font-weight: 850; letter-spacing: -.035em; }
.pg-feed .legal-body { color: var(--mu); }
.pg-feed .legal-body h2 { margin-top: 14px; padding-left: 12px; border-left: 3px solid var(--btn); color: var(--tx); font-size: 17px; font-weight: 800; }

/* 가린 글자(●○*) → 부드러운 막대 (line.css .mkb 와 같다 — 창 밖 화면에는 line.css 가 없다) */
.pg-feed .mkb { display: inline-block; width: calc(var(--n, 3) * 6px + 8px); height: .7em; margin: 0 2px; border-radius: 6px; background: color-mix(in srgb, currentColor 17%, transparent); font-size: inherit; line-height: 0; color: inherit; overflow: hidden; text-indent: 200%; white-space: nowrap; vertical-align: -.02em; user-select: none; }

/* ===== 업체 DB 안내 /data (views/uni_land_feed.php .fdl) — 장부 색인 ===== */
.pg-feed .fdl { display: grid; gap: 36px; max-width: 1100px; margin: 0 auto; padding: 8px 0 52px; }
.fdl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--mu2); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }
.fdl-crumbs a { color: var(--mu); text-decoration: none; }
.fdl-crumbs a:hover { color: var(--ac); }
.fdl-crumbs b { color: var(--tx); font-weight: 600; }
.fdl-head { display: grid; gap: 14px; margin-top: -20px; padding-bottom: 24px; border-bottom: 2px solid var(--tx); }
.fdl-eb { margin: 0; color: var(--ac); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; }
.fdl-head h1 { margin: 0; font-size: clamp(28px, 3.2vw, 42px); font-weight: 850; letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; }
.fdl-lead { margin: 0; max-width: 72ch; color: var(--mu); font-size: 15px; line-height: 1.7; }
.fdl-nums { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 0; margin: 6px 0 0; }
.fdl-nums > div { padding: 0 28px; border-left: 1px solid var(--ln2); }
.fdl-nums > div:first-child { padding-left: 0; border-left: 0; }
.fdl-nums dt { color: var(--mu2); font-size: 12.5px; font-weight: 600; }
.fdl-nums dd { margin: 2px 0 0; color: var(--mu); font-size: 14px; }
.fdl-nums dd a { color: var(--mu); text-decoration: none; }
.fdl-nums dd a:hover b { color: var(--ac); }
.fdl-nums b { margin-right: 2px; color: var(--tx); font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fdl-nums > div:first-child b { color: var(--ac); }
.fdl-nums b.wait { opacity: .35; }
.fdl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
.fdl-cta span { color: var(--mu2); font-size: 12.5px; }
.fdl-sec { display: grid; gap: 12px; align-content: start; min-width: 0; }
.fdl-sh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--tx); }
.fdl-sh h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.025em; }
.fdl-sh h2 small { margin-left: 8px; color: var(--mu2); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; }
.fdl-sh p { flex-basis: 100%; margin: 2px 0 0; color: var(--mu); font-size: 13px; line-height: 1.5; }
.fdl-sh a { color: var(--mu); font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--ln2); }
.fdl-sh a:hover { color: var(--ac); border-color: var(--ac); }
.fdl-sub { margin: 0; color: var(--mu2); font-size: 12.5px; line-height: 1.6; }
/* 최근 올라온 곳 */
.fdl-recent { list-style: none; margin: 0; padding: 0; }
.fdl-recent li { display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ln); font-size: 14px; }
.fdl-recent time { color: var(--ac); font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.fdl-recent b { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fdl-recent .k, .fdl-recent .a { overflow: hidden; color: var(--mu); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
/* 주제 */
.fdl-kw { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; }
.fdl-kw a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ln); color: var(--tx); text-decoration: none; }
.fdl-kw a:hover b { color: var(--ac); }
.fdl-kw b { grid-column: 1; font-size: 15px; font-weight: 700; }
.fdl-kw span { grid-column: 1; color: var(--mu2); font-size: 12.5px; }
.fdl-kw em { grid-column: 2; grid-row: 1 / 3; color: var(--tx); font-family: var(--mono); font-size: 16px; font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.fdl-kw em small, .fdl-bars em small, .fdl-ct small { margin-left: 1px; color: var(--mu2); font-size: 12px; }
/* 가는 막대 장부 (시·도 | 분야 | 시·군·구 | 업종) */
.fdl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
.fdl-bars { list-style: none; margin: 0; padding: 0; }
.fdl-bars li a { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0 11px; border-bottom: 1px solid var(--ln); color: var(--tx); text-decoration: none; }
.fdl-bars li a:hover b { color: var(--ac); }
.fdl-bars i { color: var(--mu2); font-family: var(--mono); font-size: 11.5px; font-style: normal; }
.fdl-bars b { overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fdl-bars em { color: var(--tx); font-family: var(--mono); font-size: 14px; font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.fdl-bars s { position: absolute; left: 34px; bottom: -1px; height: 2px; width: calc((100% - 34px) * var(--w, 0) / 100); background: var(--btn); opacity: .7; text-decoration: none; }
.fdl-cols .fdl-bars { column-count: 2; column-gap: 40px; }
.fdl-cols .fdl-bars li { break-inside: avoid; }
/* 업종 색인 ㄱㄴㄷ */
.fdl-idx { display: grid; gap: 0; margin: 0; }
.fdl-idx > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ln); }
.fdl-idx dt { color: var(--ac); font-family: var(--mono); font-size: 16px; font-weight: 500; line-height: 1.6; }
.fdl-idx dd { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.fdl-idx a { color: var(--tx); font-size: 14px; font-weight: 600; line-height: 1.7; text-decoration: underline dotted var(--ln2); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.fdl-idx a:hover { color: var(--ac); text-decoration-color: var(--ac); }
.fdl-idx a small { margin-left: 3px; color: var(--mu2); font-family: var(--mono); font-size: 11px; font-weight: 400; }
/* 연락처 */
.fdl-ct { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 28px; margin: 0; }
.fdl-ct > div { position: relative; display: grid; gap: 2px; padding: 10px 0 14px; border-bottom: 1px solid var(--ln); }
.fdl-ct dt { color: var(--mu2); font-size: 12.5px; font-weight: 600; }
.fdl-ct dd { margin: 0; }
.fdl-ct b { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fdl-ct small { margin-left: 6px; font-family: var(--mono); }
.fdl-ct s { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--w, 0) * 1%); background: var(--btn); opacity: .7; }
/* 글자 꼬리표 */
.fdl-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.fdl-tags a { color: var(--tx); font-size: 14px; font-weight: 600; text-decoration: underline dotted var(--ln2); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.fdl-tags a:hover { color: var(--ac); text-decoration-color: var(--ac); }
.fdl-tags small { margin-left: 3px; color: var(--mu2); font-family: var(--mono); font-size: 11px; font-weight: 400; }
/* 받는 순서 · 묻고 답하기 */
.fdl-how ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; counter-reset: fh; }
.fdl-how li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--ln); counter-increment: fh; }
.fdl-how li b { font-size: 15px; font-weight: 800; }
.fdl-how li b::before { content: counter(fh, decimal-leading-zero) ' '; margin-right: 4px; color: var(--ac); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.fdl-how li span { color: var(--mu); font-size: 13.5px; line-height: 1.6; }
.fdl-qa details { border-bottom: 1px solid var(--ln); }
.fdl-qa summary { padding: 12px 0; cursor: pointer; font-size: 14.5px; font-weight: 700; }
.fdl-qa p { margin: 0; padding: 0 0 14px; max-width: 70ch; color: var(--mu); font-size: 14px; line-height: 1.7; }
@media (max-width: 900px) {
  .pg-feed .fdl { gap: 26px; }
  .fdl-head { margin-top: -10px; gap: 10px; }
  .fdl-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fdl-nums > div { padding: 0 10px; }
  .fdl-nums dt { font-size: 11px; }
  .fdl-nums b { font-size: 20px; }
  .fdl-recent li { grid-template-columns: 56px minmax(0, 1fr); gap: 2px 10px; }
  .fdl-recent .k, .fdl-recent .a { grid-column: 2; }
  .fdl-kw { grid-template-columns: minmax(0, 1fr); }
  .fdl-two { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .fdl-cols .fdl-bars { column-count: 1; }
  .fdl-how ol { grid-template-columns: minmax(0, 1fr); }
  .fdl-idx > div { grid-template-columns: 30px minmax(0, 1fr); }
}

/* ===== 이용권 (.tkf): 머리 · 01 비교표 · 02 기간 · 03 결제 방법 · 04 주문 내용(영수증) · 받기 기준 ===== */
.tkf { display: grid; gap: 28px; max-width: 940px; margin: 0 auto; padding-block: 10px 48px; }
.tkf-head { padding: 26px 0 22px; border-bottom: 2px solid var(--tx); }
.tkf-eb { margin: 0 0 8px; color: var(--ac); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; }
.tkf-head h1 { margin: 0 0 12px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 850; line-height: 1.15; letter-spacing: -.04em; text-wrap: balance; }
.tkf-head h1 em { font-style: normal; color: var(--ac); }
.tkf-lead { margin: 0; max-width: 62ch; color: var(--mu); font-size: 15.5px; line-height: 1.65; }
.tkf > .app-cp { margin: 0; }
.tkf-form { display: grid; gap: 30px; }
.tkf-sec h2, .tkf-pay h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--tx); font-size: 18px; font-weight: 800; letter-spacing: -.025em; }
.tkf-sec h2 b, .tkf-pay h2 b { color: var(--ac); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; }
/* 비교표: 열 = 이용권(머리에서 고른다), 줄 = 다른 점 / 모든 이용권에 같은 점 */
.tkf-tbl { display: grid; grid-template-columns: 120px repeat(var(--n, 2), minmax(0, 1fr)); }
.tkf-r { display: contents; }
.tkf-c0 { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--ln); color: var(--mu2); font-size: 13px; font-weight: 700; }
.tkf-c { padding: 14px 12px; border-bottom: 1px solid var(--ln); border-left: 1px solid var(--ln); font-size: 14.5px; font-weight: 600; }
.tkf-c small { display: block; margin-top: 2px; color: var(--mu2); font-size: 12px; font-weight: 400; line-height: 1.5; }
.tkf-c.hot { color: var(--ac); }
.tkf-span { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; color: var(--mu); font-weight: 500; }
.tkf-span svg { flex: none; color: var(--ok); }
.tkf-rh .tkf-c0 { border-bottom-color: var(--ln2); }
.tkf-plan { position: relative; display: grid; gap: 4px; padding: 16px 14px 14px 16px; border-bottom: 1px solid var(--ln2); border-left: 1px solid var(--ln); cursor: pointer; transition: background .12s; }
.tkf-plan input { position: absolute; opacity: 0; pointer-events: none; }
.tkf-plan:hover { background: var(--sf2); }
.tkf-plan:has(input:checked) { background: var(--sf); box-shadow: inset 0 3px 0 var(--btn); }
.tkf-plan:has(input:focus-visible) { outline: 2px solid var(--ac); outline-offset: -2px; }
.tkf-ck { position: absolute; top: 14px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ln2); border-radius: 50%; color: transparent; }
.tkf-plan:has(input:checked) .tkf-ck { border-color: var(--btn); background: var(--btn); color: #ffffff; }
.tkf-pt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-right: 30px; }
.tkf-pt b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.tkf-up { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; margin: 0 0 14px; padding: 14px 16px; border: 1.5px solid var(--ln2); border-radius: var(--r-sm, 8px); cursor: pointer; }   /* 단품 → 모든DB 바꾸기 (차액만) */
.tkf-up:has(input:checked) { border-color: var(--ac); background: var(--ac-t); }
.tkf-up input { position: absolute; opacity: 0; pointer-events: none; }
.tkf-up em { margin-left: 4px; padding: 1px 7px; border: 1px solid var(--ac); border-radius: 3px; color: var(--ac); font-size: 11px; font-style: normal; font-weight: 700; }
.tkf-up small { display: block; margin-top: 3px; color: var(--mu); font-size: 12.5px; }
.tkf-up strong { font-family: var(--mono); font-size: 18px; }
.tkf-up .tkf-ck { display: none; }
.tkf-pt em.sg { border-style: dashed; }
.tkf-pt em { padding: 1px 7px; border: 1px solid var(--ln2); border-radius: 3px; color: var(--mu); font-size: 11px; font-style: normal; font-weight: 700; }
.tkf-plan.live .tkf-pt em, .tkf-plan:has(input:checked) .tkf-pt em { border-color: var(--ac); color: var(--ac); }
.tkf-pp { color: var(--mu); font-size: 13.5px; }
.tkf-pp strong { color: var(--tx); font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.tkf-p3 { color: var(--mu2); font-size: 12.5px; }
.tkf-note { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--btn); background: var(--sf2); color: var(--tx); font-size: 13px; line-height: 1.55; }
.tkf-note.soft { border-color: var(--ln2); color: var(--mu); }
.tkf-swipe, .tkf-common { display: none; }
/* 기간 */
.tkf-mo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tkf-mo label { position: relative; cursor: pointer; }
.tkf-mo label[hidden] { display: none; }
.tkf-mo input { position: absolute; opacity: 0; pointer-events: none; }
.tkf-mo label > span { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--ln2); border-radius: var(--r-sm); }
.tkf-mo label:hover > span { border-color: var(--tx); }
.tkf-mo b { font-size: 15.5px; font-weight: 800; }
.tkf-mo small { color: var(--mu); font-family: var(--mono); font-size: 13px; }
.tkf-mo label:has(input:checked) > span { border-color: var(--tx); box-shadow: inset 0 0 0 1px var(--tx); }
.tkf-mo label:has(input:focus-visible) > span { outline: 2px solid var(--ac); outline-offset: 2px; }
/* 결제 방법 (pages.css .paym 공통 위에) */
.pg-feed .paym label > span { height: 46px; border-radius: var(--r-sm); }
.pg-feed .paym label:has(input:checked) > span { border-color: var(--tx); background: var(--sf2); color: var(--tx); box-shadow: inset 0 0 0 1px var(--tx); }
.pg-feed .tk-sub { border-radius: var(--r-sm); }
/* 주문 내용: 영수증 (점선 이음 · 먹색 합계 줄) */
.tkf-pay { display: grid; gap: 12px; padding: 22px 24px 24px; border: 1px solid var(--ln2); border-top: 3px solid var(--btn); border-radius: var(--r-lg); background: var(--sf); }
.tkf-pay h2 { margin-bottom: 4px; }
.tkf-sum { display: grid; gap: 6px; margin: 0; }
.tkf-sum div { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.tkf-sum dt { flex: 1; display: flex; align-items: baseline; gap: 8px; color: var(--mu); }
.tkf-sum dt::after { content: ''; flex: 1; border-bottom: 1px dotted var(--ln2); transform: translateY(-4px); }
.tkf-sum dd { flex: none; max-width: 60%; margin: 0; font-weight: 700; text-align: right; }
.tkf-pay .total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--tx); }
.tkf-pay .total span { color: var(--mu); font-size: 14px; }
.tkf-pay .total strong { font-family: var(--mono); font-size: 34px; font-weight: 500; letter-spacing: -.03em; }
.tkf-pay > .sub, .tkf-pay #s-off { margin: 0; color: var(--mu2); font-size: 12.5px; line-height: 1.55; }
.tkf-pay .refund-ok { color: var(--mu); font-size: 13px; }
.tkf-pay .refund-ok b { color: var(--tx); }
.tkf-pay .coupons { margin: 0; }
.tkf-pay #order-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: var(--r-sm); background: var(--btn); color: #ffffff; font-size: 16px; font-weight: 800; }
.tkf-pay #order-btn:hover { background: var(--btn-h); }
.tkf-pay .alert { margin: 0; }
.tkf-pol { border: 1px solid var(--ln); border-radius: var(--r-lg); background: var(--sf); }
.tkf-pol summary { padding: 14px 18px; color: var(--mu); font-size: 14px; font-weight: 700; cursor: pointer; }
.tkf-pol .dlpolicy { margin: 0; border: 0; border-top: 1px solid var(--ln); border-radius: 0; }
.tkf-pol .dlpolicy h2 { display: none; }

@media (max-width: 900px) {
  body.pg-feed { --gutter: 16px; padding-bottom: calc(var(--fd-tab) + env(safe-area-inset-bottom, 0px)); }   /* 아래 탭에 바닥이 가려지지 않게 (pages.css body.pg 가 0 으로 두던 것) */
  .pg-feed .pg-main { padding-block: 6px 28px; }
  .pg-feed .page-head { padding: 18px 0 12px; }
  .pg-feed .my-nav, .pg-feed .sup-nav { margin-inline: -16px; padding-inline: 16px; }
  .pg-feed .narrow { margin-top: 14px; }
  .pg-feed .ul { gap: 26px; }
  .pg-feed .ul-head { margin-top: -10px; }
  .pg-feed .ul-n b { font-size: 30px; }
}
@media (max-width: 700px) {
  .tkf { gap: 22px; }
  .tkf-form { gap: 24px; }
  /* 이용권이 셋 이상이면 좁은 화면에 다 못 들어가 겹쳤다(2026-10-31 사용자 캡처, 모든DB+단품 3+실시간) → 표를 옆으로 밀어 보고, 왼쪽 항목 칸은 고정 */
  .tkf-tbl { grid-template-columns: 64px repeat(var(--n, 2), minmax(128px, 1fr)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; margin-right: -16px; padding-right: 16px; scrollbar-width: thin; }
  .tkf-tbl .tkf-plan, .tkf-tbl .tkf-c { scroll-snap-align: start; scroll-margin-left: 64px; }
  .tkf-c0 { position: sticky; left: 0; z-index: 2; padding: 12px 8px 12px 0; background: var(--bg); font-size: 12px; box-shadow: 1px 0 0 var(--ln); }
  .tkf-r.tkf-all { display: none; }   /* 모든 이용권에 같은 줄(보기·받기·자료)은 표 아래 목록으로 (밀면 사라지지 않게) */
  .tkf-common { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--mu); }
  .tkf-common li { display: flex; gap: 8px; align-items: flex-start; }
  .tkf-common b { flex: none; min-width: 34px; color: var(--mu2); font-weight: 700; }
  .tkf-common svg { flex: none; margin-top: 3px; color: var(--ok); }
  .tkf-swipe { display: block; margin: -6px 0 8px; color: var(--mu2); font-size: 12px; }
  .tkf > *, .tkf-form > *, .tkf-sec { min-width: 0; }   /* 옆으로 미는 표가 화면 전체를 넓히지 않게 */
  .tkf-c { padding: 12px 10px; font-size: 13.5px; }
  .tkf-plan { padding: 14px 10px 12px 10px; }
  .tkf-pt { padding-right: 22px; }
  .tkf-pt b { font-size: 14px; }
  .tkf-pp { font-size: 12px; white-space: nowrap; }
  .tkf-pp strong { font-size: 19px; }
  .tkf-p3 { font-size: 11.5px; }
  .tkf-ck { top: 10px; right: 8px; width: 18px; height: 18px; }
  .tkf-mo { grid-template-columns: minmax(0, 1fr); }
  .tkf-pay { padding: 18px 16px; }
  .tkf-pay .total strong { font-size: 28px; }
}