/* 타닥타닥 2026 리뉴얼 — 메인 본문 (2026-10-13)
 *
 * main-kor.php 의 <div class="tm"> 안에만 걸린다. 머리글·바닥글(top.main.php / tail.main.php)은 옛것 그대로.
 * 플랜 카드 모양과 Rak고딕 글꼴(@font-face)은 tdtd2026.css 에 있다 — 이 파일보다 먼저 부른다.
 *
 * 사이트 common.css 가 div·span·li·h 마다 글꼴·크기·색을 박고, a:link·a:hover 에 색·밑줄을 준다.
 * 그래서 .tm 안에서 글꼴·색을 다시 정한다. 아이디(#)를 쓰지 않는 건 일부러다 — #tm * 로 걸면
 * 플랜 카드(.tdp .ph h3 의 흰 글자 등)를 이겨 버린다.
 */
.tm { --soft: #F5F5F3; --ink: #111; --ink-2: #555; --ink-3: #999; --line: #E6E6E3; --red: #E60012; --red-2: #C2000F; --dark: #141414;
      background: #fff; }
.tm, .tm * { 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; }
.tm { color: var(--ink); line-height: 1.6; }
.tm a { color: inherit; text-decoration: none; }
.tm a:hover { text-decoration: none; }
.tm img { display: block; max-width: 100%; }
.tm ul { list-style: none; margin: 0; padding: 0; }

.tm .wrap { max-width: 1380px; margin: 0 auto; padding: 0 40px; }
.tm .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); }
.tm .ey:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.tm .sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.tm .sec-h h2 { margin: 12px 0 0; font-size: 44px; font-weight: 850; line-height: 1.18; letter-spacing: -0.035em; color: var(--ink); }
.tm .sec-h p { margin: 12px 0 0; font-size: 17px; color: var(--ink-2); }
.tm .more-link { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650;
                 padding-bottom: 4px; border-bottom: 2px solid var(--ink); }
.tm .more-link:hover { color: var(--red); border-color: var(--red); }
.tm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px;
           border-radius: 12px; font-size: 17px; font-weight: 700; transition: background .15s, color .15s, border-color .15s; }
.tm .btn-red { background: var(--red); color: #fff; }
.tm .btn-red:hover { background: var(--red-2); color: #fff; }
.tm .btn-line { border: 1.5px solid var(--ink); color: var(--ink); }
.tm .btn-line:hover { background: var(--ink); color: #fff; }

/* ── 첫 화면: 왼쪽 큰 문구, 오른쪽 신규폰트 슬라이드 ── */
.tm .hero { padding: 88px 0 72px; }
.tm .hero .top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.tm .hero .top.one { grid-template-columns: minmax(0, 1fr); }   /* 신규폰트 배너가 하나도 없을 때 */
.tm .hero .top > * { min-width: 0; }
.tm .hero h2 { margin: 0 0 24px; font-size: 66px; font-weight: 950; line-height: 1.08; letter-spacing: -0.045em; color: var(--ink); }
.tm .hero h2 em { font-style: normal; color: var(--red); }
.tm .hero .from { display: flex; align-items: baseline; gap: 2px; margin: 0 0 10px; }
.tm .hero .from b { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); }
.tm .hero .from span { font-size: 26px; font-weight: 700; color: var(--ink-2); }
.tm .hero .lead { margin: 0; font-size: 19px; line-height: 1.65; color: var(--ink-2); max-width: 560px; }
.tm .hero .cta { display: flex; gap: 12px; margin-top: 36px; }

.tm .nfs { position: relative; }
.tm .nfs-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tm .nfs-count { font-size: 14px; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; }
.tm .nfs-count b { color: var(--ink); }
.tm .nfs-view { position: relative; border-radius: 22px; overflow: hidden;
                /* 움직이는 슬라이드도 둥근 모서리 안으로 확실히 자르게(브라우저에 따라 옆 장 가장자리가 1px 줄로 비침, 10/13) */
                isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.tm .nfs-track { display: flex; transition: transform .55s cubic-bezier(.22,.8,.24,1); }
.tm .nfs-track > li { flex: 0 0 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tm .nfs-track .pic { position: relative; display: block; aspect-ratio: 650 / 526; background: var(--soft); }
.tm .nfs-track .pic img { width: 100%; height: 100%; object-fit: cover; }
.tm .nfs-track .chip-new { position: absolute; top: 18px; left: 18px; font-size: 13px; padding: 5px 11px; }
.tm .nfs-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 16px 20px 18px;
               background: #fff; border: 1px solid var(--line); border-top: none; border-radius: 0 0 22px 22px; }
.tm .nfs-cap b { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .nfs-cap .tag { flex: none; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--line); }
.tm .nfs-btn { position: absolute; top: calc((100% - 62px) / 2); transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
               border: none; background: rgba(255,255,255,.92); color: var(--ink); font-size: 20px; line-height: 48px; cursor: pointer;
               box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: background .15s, color .15s; }
.tm .nfs-btn:hover { background: var(--red); color: #fff; }
.tm .nfs-btn.prev { left: 14px; }
.tm .nfs-btn.next { right: 14px; }
.tm .nfs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.tm .nfs-dots button { width: 8px; height: 8px; border-radius: 8px; border: none; padding: 0; background: #D4D4D0; cursor: pointer; transition: width .25s, background .25s; }
.tm .nfs-dots button.on { width: 26px; background: var(--red); }
.tm .chip-new { flex: none; padding: 3px 9px; border-radius: 6px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }

.tm .perks { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.tm .perks li { padding: 26px 24px 0 0; }
.tm .perks b { display: block; font-size: 17px; font-weight: 750; margin-bottom: 4px; color: var(--ink); }
.tm .perks span { font-size: 14px; color: var(--ink-2); }
.tm .perks svg { display: block; width: 26px; height: 26px; margin-bottom: 14px; stroke: var(--red); }

/* ── 구독 플랜 (카드 모양은 tdtd2026.css 의 .tdp) ── */
.tm .plans { background: var(--soft); padding: 96px 0; }
.tm .plans .tdp .card { border-color: transparent; }
.tm .plans .tdp .card:hover { border-color: var(--red); }

/* ── 폰트보기로 넘기는 띠 ── */
.tm .lib { background: var(--dark); color: #fff; padding: 96px 0; overflow: hidden; }
.tm .lib .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.tm .lib .ey { color: #FF4655; }
.tm .lib .ey:before { background: #FF4655; }
.tm .lib h2 { margin: 16px 0 18px; font-size: 54px; font-weight: 950; line-height: 1.12; letter-spacing: -0.045em; color: #fff; }
.tm .lib p { margin: 0 0 34px; font-size: 18px; color: #BDBDBD; }
.tm .cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tm .cloud a { padding: 9px 16px; border-radius: 999px; border: 1px solid #333; font-size: 15px; font-weight: 500; line-height: 1.5; color: #DADADA;
               transition: border-color .15s, color .15s; }
.tm .cloud a:hover { border-color: #fff; color: #fff; }
.tm .cloud a.n { border-color: var(--red); color: #fff; }
.tm .cloud a.n:before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: 2px; }
.tm .cloud a.w1 { font-weight: 200; }
.tm .cloud a.w2 { font-weight: 700; }
.tm .cloud a.w3 { font-weight: 950; }
.tm .cloud a.more { border-style: dashed; color: #9a9a9a; }

/* ── 태블릿·휴대폰 ── */
@media screen and (max-width: 1100px) {
  .tm .hero .top, .tm .lib .wrap { grid-template-columns: minmax(0, 1fr); }
  .tm .perks { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 750px) {
  .tm .wrap { padding: 0 20px; }
  .tm .hero { padding: 44px 0 48px; }
  .tm .hero h2 { font-size: 44px; margin: 0 0 18px; }
  .tm .hero .lead { font-size: 17px; }
  .tm .hero .from b { font-size: 28px; }
  .tm .hero .cta { flex-direction: column; }
  .tm .hero .cta .btn { width: 100%; }
  .tm .nfs-btn { display: none; }   /* 휴대폰은 손가락으로 밀어 넘긴다 — 화살표가 그림 글씨를 가린다 */
  .tm .nfs-cap b { font-size: 16px; }
  .tm .perks { margin-top: 40px; }
  .tm .sec-h { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
  .tm .sec-h h2 { font-size: 32px; }
  .tm .plans, .tm .lib { padding: 64px 0; }
  .tm .lib h2 { font-size: 38px; }
}