/* 타닥타닥 2026 리뉴얼 — 구독 플랜 카드 (2026-10-13)
 *
 * 쓰는 곳: 폰트구매(/buy/list, superboard/skin/product2/basic/list.skin.php). 새 메인도 같은 카드를 쓴다.
 * 카드 내용(이름·가격·폰트 수)은 list.skin.php 에 HTML 로 고정해 두었다 — 상품이 바뀌면 거기를 고친다.
 * 상품 상세 페이지는 그대로 어드민 자료를 읽는다.
 *
 * 사이트 common.css 가 div·span·li·h3 마다 글꼴·크기·색(#666)을 직접 박고 a:hover 에 밑줄을 준다.
 * 그래서 .tdp 안에서는 글꼴·색을 모두 다시 정하고, 이름은 .tdp 아래로만 건다(다른 페이지에 새지 않게).
 * 글꼴은 Rak고딕 가변(Rak-VF Go, 굵기 100~1000) 하나 — 완성형 2,350자 + 영문·숫자로 줄인 woff2.
 */
@font-face { font-family: 'Rak Go'; src: url('fonts/RakVFGo-2350.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }

.tdp, .tdp-h { --soft: #F5F5F3; --ink: #111; --ink-2: #555; --ink-3: #999; --line: #E6E6E3; --red: #E60012; }
.tdp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0 0 10px; }
.tdp, .tdp *, .tdp-h, .tdp-h * { font-family: 'Rak Go', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; color: inherit; letter-spacing: -0.01em;
               word-break: keep-all; box-sizing: border-box; }
/* 구역 제목 — 메인 플랜 구역과 같은 모양: 빨간 점 + PLANS, 큰 제목, 설명 */
.tdp-h { margin: 0 0 40px; }
.tdp-h .ey { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; line-height: 1.6; letter-spacing: .08em;
             text-transform: uppercase; color: var(--red); }
.tdp-h .ey:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.tdp-h h2 { margin: 12px 0 0; font-size: 44px; font-weight: 850; line-height: 1.18; letter-spacing: -0.035em; color: var(--ink); }
.tdp-h p { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.tdp a.card, .tdp a.card:link, .tdp a.card:visited, .tdp a.card:hover { color: var(--ink); text-decoration: none; }

.tdp .card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden;
             border: 1.5px solid var(--line); transition: transform .2s, border-color .2s, box-shadow .2s; }
.tdp .card:hover { transform: translateY(-6px); border-color: var(--red); box-shadow: 0 18px 40px rgba(0,0,0,.08); }

/* 위 — 검정 바탕에 플랜명만. 뒤에 글자 설계 모눈과 큰 윤곽 글자(가나다라마, 굵기 200→1000) */
.tdp .ph { position: relative; overflow: hidden; aspect-ratio: 16 / 11; display: flex; align-items: flex-end; padding: 22px 22px 20px;
           background: radial-gradient(120% 90% at 100% 0%, #2A2A2A 0%, #111 60%); }
.tdp .ph::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
           background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px),
                       repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px); }
.tdp .ph .gl { position: absolute; right: 2px; top: -16px; font-size: 136px; line-height: 1; letter-spacing: 0;
           color: rgba(255,255,255,.05); -webkit-text-stroke: 1.2px rgba(255,255,255,.22); transition: -webkit-text-stroke-color .2s, color .2s; }
.tdp .card:hover .ph .gl { -webkit-text-stroke-color: var(--red); color: rgba(230,0,18,.12); }
.tdp .ph h3 { position: relative; margin: 0; color: #fff; font-size: 28px; font-weight: 900; line-height: 1.04; letter-spacing: -0.035em; }

/* 아래 — 한글 이름, 포함 제작사(늘 한 줄), 폰트 수, 월·연 가격, 자세히 보기 */
.tdp .bd { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 20px; }
.tdp .ko { font-size: 14px; color: var(--ink-2); font-weight: 750; letter-spacing: -0.02em; line-height: 1.5; }
.tdp .inc { display: flex; flex-wrap: nowrap; gap: 5px; margin: 14px 0 6px; min-width: 0; }
.tdp .inc span { font-size: 12px; font-weight: 650; line-height: 1.5; padding: 3px 8px; border-radius: 6px; background: var(--soft); color: #444;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.tdp .cnt { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-bottom: 4px; }
.tdp .cnt b { color: var(--ink); font-weight: 750; }
.tdp .prices { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.tdp .pr small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; line-height: 1.6; color: var(--ink-2); }
.tdp .pr b { display: inline-block; margin-top: 1px; font-size: 21px; font-weight: 900; line-height: 1.4; letter-spacing: -0.025em; color: var(--ink); }
.tdp .pr b span { font-size: 14px; font-weight: 650; margin-left: 1px; }
.tdp .pr b.none { color: #C4C4C0; font-weight: 700; }
.tdp .off { font-style: normal; font-size: 11px; font-weight: 800; line-height: 1.5; color: #fff; background: var(--red); border-radius: 5px; padding: 2px 6px; }
.tdp .off.gray { background: #E9E9E6; color: var(--ink-2); }
.tdp .go { margin-top: 14px; height: 44px; border-radius: 10px; border: 1.5px solid var(--line); display: flex; align-items: center;
           justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); transition: all .15s; }
.tdp .card:hover .go { background: var(--red); border-color: var(--red); color: #fff; }

@media screen and (max-width: 1100px) {
  .tdp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 750px) {
  .tdp-h { margin-bottom: 28px; }
  .tdp-h h2 { font-size: 32px; }
  .tdp-h p { font-size: 15px; }
  .tdp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tdp .card:hover { transform: none; }
  .tdp .ph { padding: 16px 16px 14px; }
  .tdp .ph h3 { font-size: 21px; }
  .tdp .ph .gl { font-size: 104px; top: -12px; right: 0; }
  .tdp .bd { padding: 14px 14px 16px; }
  .tdp .ko { font-size: 13px; }
  .tdp .inc { gap: 4px; }
  .tdp .inc span { font-size: 11px; padding: 3px 5px; letter-spacing: -0.03em; }
  .tdp .pr b { font-size: 18px; }
}

/* ── 카카오톡 1:1 상담 단추 — 화면 오른쪽 아래에 늘 떠 있다 (inc/tdtd.kakao.php, 메인·폰트구매) ── */
a.tdk, a.tdk:link, a.tdk:visited, a.tdk:hover { text-decoration: none; color: #191919; }
.tdk { position: fixed; right: 28px; bottom: 28px; z-index: 150; display: flex; align-items: center; justify-content: center;
       width: 60px; height: 60px; border-radius: 50%; background: #FEE500; box-shadow: 0 8px 24px rgba(0,0,0,.18);
       transition: transform .2s, box-shadow .2s; }
.tdk:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.tdk svg { width: 30px; height: 30px; fill: #191919; }
.tdk .tdk-t { position: absolute; right: 72px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; pointer-events: none;
              font-family: 'Rak Go', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 14px; font-weight: 700; line-height: 1;
              color: #fff; background: #191919; border-radius: 8px; padding: 9px 12px; opacity: 0; transition: opacity .15s, transform .15s; }
.tdk:hover .tdk-t { opacity: 1; transform: translate(0, -50%); }
@media screen and (max-width: 750px) {
  .tdk { right: 16px; bottom: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 54px; height: 54px; }
  .tdk svg { width: 27px; height: 27px; }
  .tdk .tdk-t { display: none; }
}