@charset "utf-8";
/* 폰트보기 페이지 + 상품 상세 '폰트 리스트' 탭 — 웹폰트 실시간 미리보기
 *
 * 이 파일을 고치면 inc/fontview.php 의 fontview.css?v=N 을 반드시 올린다
 * (2026-09-23 기준 v=10). 안 올리면 휴대폰이 옛 CSS 를 계속 써서 고친 게 안 보인다.
 *
 * 클래스 이름이 겹치지 않게 조심할 것 — .fv-plan 은 카드의 상품 태그, 상품 상세 표시는 .fv-product.
 * 9/21 둘을 같은 이름으로 썼다가 태그 모양이 목록 전체에 씌워졌다.
 *
 * 기존 사이트 CSS(common/global/respond) 위에 얹힌다. 클래스는 전부 .fv- 로
 * 시작한다 — global.css 의 .fontlist 규칙과 겹치면 조용히 어긋나기 때문에
 * 이름 공간을 아예 갈라 둔다.
 *
 * 기존 페이지의 생김새를 그대로 따른다
 *   - 모서리를 굴리지 않는다        (.btn1 / .btn2 / .inp 전부 각져 있다)
 *   - 테두리는 1px #ddd            (.inp, .btn2)
 *   - 버튼 높이 35px, 좌우 여백 20px (.btn1 / .btn2)
 *   - 회색은 #333                  (.sub-tit / .sub-tit2 / .more)
 *   - 다만 글꼴과 굵기는 따로 간다 — 아래 .fv 의 font-family 주석 참고 (2026-09-23)
 *   - 그림자를 쓰지 않는다          (사이트 전체가 평평하다)
 *
 * 색은 검정 하나만 쓴다. 사이트 강조색은 원래 #00a0d6 이지만, 이 페이지는
 * 화면 전체가 검은 글씨 견본이라 색이 하나라도 더 있으면 그쪽으로 눈이 먼저 간다.
 * 여기서 봐야 할 건 글자 모양이다.
 */

/* 글꼴 — 폰트픽 사이트와 같은 Noto Sans KR (구글폰트. fontview.php 가 불러온다, 2026-09-23).
   사이트 기본 글꼴 TDTD고딕 은 common.css 의 @font-face 에서 weight 300 자리에 Bold 파일이 물려 있어
   '가늘게' 준 곳이 오히려 굵게 나왔다. 여기서는 굵기를 제대로 쓴다.
   `.fv` 하나에만 주면 안 먹는다 — common.css 가 `body, td, form, select, input, button, textarea,
   div, option, pre, p, span, blockquote, li` 에 글꼴을 직접 박아 두어서 물려받기가 끊긴다. 그래서 안쪽 전부에 준다.
   견본 문구(.fv-sample)는 fontview.js 가 style 로 직접 다는 미리보기 폰트가 이겨서 그대로다. */
.fv, .fv * {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                 'Malgun Gothic', sans-serif;
}

.fv {
    --fv-accent: #000;      /* 켜진 탭 / 초점 / 강조 */
    --fv-line:   #ddd;      /* 기본 테두리 — .inp 와 같다 */
    --fv-ink:    #333;      /* 기본 글자색 — .sub-tit 과 같다 */
    --fv-size:   34px;      /* 견본 글씨 크기 (슬라이더가 바꾼다) */
    /* 이 목록을 품는 페이지(상품 상세 등)가 줄바꿈 금지를 물려줘도 견본 문구는 줄을 바꿔야 한다.
       못 바꾸면 카드가 문구 길이만큼 넓어져 틀 밖으로 넘친다(2026-09-21 상품 상세에서 겪음).
       상품 상세의 바깥 틀은 가운데 정렬이라 견본 문구가 가운데로 쏠렸다 — 폰트보기와 같게 왼쪽으로. */
    white-space: normal;
    text-align: left;
}

/* ── 조작 막대 ────────────────────────────────────────────── */
.fv-bar {
    position: -webkit-sticky; position: sticky; top: 0; z-index: 30;
    background: #fff; border-bottom: 1px solid var(--fv-line);
    padding: 20px 0 16px; margin-bottom: 30px;
    /* 위에 붙어 있는 동안 양옆도 흰색으로 덮는다 — 감싸는 .w1300 이 PC 에서 1300px 고정이라
       그대로 두면 바 배경이 딱 1300px 만 칠해진다.
       box-shadow 로 칠하는 게 핵심이다. 그림자는 페이지 폭 계산에 들어가지 않는다.
       예전엔 ::before 를 left/right:-50vw 로 늘렸는데 그 가상요소는 페이지 폭에 잡혀서,
       모바일(375px)에서 페이지가 553px 로 늘어났다. 헤더가 그 폭까지 따라 늘면서
       햄버거 메뉴가 오른쪽 끝으로 밀려나 있었다 (2026-09 휴대폰에서 발견).
       clip-path 는 그림자를 가로로만 남기고 위아래로는 번지지 않게 자른다. */
    box-shadow: 0 0 0 100vmax #fff;
    -webkit-clip-path: inset(0 -100vmax);
    clip-path: inset(0 -100vmax);
}
.fv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fv-row + .fv-row { margin-top: 12px; }

.fv-text, .fv-find {
    height: 46px; padding: 0 15px;
    border: 1px solid var(--fv-line); border-radius: 0;
    background: #fff; color: #111; box-sizing: border-box;
    font-family: inherit; font-weight: 400; letter-spacing: -0.5px;
}
/* min-width:0 은 두 칸 모두에 있어야 한다.
   입력칸은 기본 폭을 "글자 20개 폭"으로 잡는데, 그 글자 폭이 브라우저·폰트마다 다르다.
   flex 안에서는 기본값(min-width:auto)이 이 폭 밑으로 못 줄어들게 막는다.
   예전엔 문구칸에만 0 을 줘서, 삼성인터넷(한글 폰트로 폭을 넓게 잡음)에서 검색칸만
   화면 밖으로 튀어나가 오른쪽에 빈 공간이 생겼다(2026-09). 크롬에서는 재현되지 않는다. */
/* 첫 줄에 크기 레버까지 들어가도록 두 칸의 기본 폭을 줄였다(2026-09-21, 420/220 -> 260/200).
   문구 칸은 남는 폭을 채우므로 PC(1300px)에서는 750px 안팎이 된다. */
.fv-text { flex: 1 1 260px; min-width: 0; max-width: 100%; font-size: 17px; }
.fv-find { flex: 0 1 200px; min-width: 0; max-width: 100%; font-size: 15px; }
.fv-text:focus, .fv-find:focus { outline: none; border-color: var(--fv-accent); }
.fv-text::-webkit-input-placeholder, .fv-find::-webkit-input-placeholder { color: #aaa; }
.fv-text::placeholder, .fv-find::placeholder { color: #aaa; }

/* .btn2 와 같은 생김새 — 흰 바탕, #ddd 테두리, 검은 글자 */
.fv-reset {
    height: 46px; padding: 0 20px;
    border: 1px solid var(--fv-line); border-radius: 0;
    background: #fff; color: #000; font-size: 15px; font-weight: 500;
    cursor: pointer; font-family: inherit;
}
.fv-reset:hover { border-color: var(--fv-accent); }

/* 탭 (분류 / 제작사) — 꺼짐은 .btn2, 켜짐은 .btn1 과 같은 꼴 */
.fv-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.fv-tab {
    height: 35px; padding: 0 18px;
    border: 1px solid var(--fv-line); border-radius: 0;
    background: #fff; color: #666;
    font-size: 15px; font-weight: 400; letter-spacing: -0.5px;
    cursor: pointer; font-family: inherit; white-space: nowrap;
}
.fv-tab:hover { border-color: #999; color: #111; }
.fv-tab.on { background: var(--fv-accent); border-color: var(--fv-accent); color: #fff; font-weight: 500; }
.fv-tab .n { margin-left: 6px; font-size: 12px; opacity: .6; }

.fv-sep { width: 1px; height: 20px; background: #e5e5e5; margin: 0 8px; }

/* 크기 슬라이더 — 첫 줄, 검색칸과 초기화 사이 */
.fv-size {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    margin: 0 6px 0 10px;
    color: #666; font-size: 14px; font-weight: 400; white-space: nowrap;
}
.fv-size input { width: 150px; accent-color: var(--fv-accent); }
.fv-size b { color: #111; font-weight: 500; min-width: 44px; text-align: right; }

.fv-count { margin-left: auto; color: #888; font-size: 14px; font-weight: 400; white-space: nowrap; }
.fv-count strong { color: var(--fv-accent); font-weight: 600; }

/* ── 카드 그리드 ──────────────────────────────────────────── */
/* 기존 .fontlist 는 li 를 margin 10px 로 띄운다(= 사이 20px). 같은 간격으로 둔다. */
/* minmax(0, 1fr) — 그냥 1fr 은 칸 안 내용(줄을 못 바꾸는 긴 문구 등)이 넓으면 칸이 따라 늘어난다.
   0 을 최소로 두면 칸 폭은 언제나 틀을 3(2,1)등분한 값이다. */
.fv-list {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
    list-style: none; margin: 0; padding: 0;
}
.fv-card {
    /* 그리드 칸 자체가 카드다. <li> 안에 또 <div> 를 두면 걸러서 감출 때
       빈 칸이 남는다 — 감추는 대상과 칸이 같아야 한다. */
    margin: 0; display: flex; flex-direction: column; min-height: 170px;
    border: 1px solid var(--fv-line); border-radius: 0; background: #fff;
    padding: 24px 22px 17px; box-sizing: border-box;
    transition: border-color .15s;
}
.fv-card:hover { border-color: var(--fv-accent); }
.fv-card[hidden] { display: none; }
/* 주소로 짚어 온 카드(#f=<해시> — 폰트픽 '폰트 찾기'가 타닥타닥 폰트를 후보로 내면 여기로 보낸다, 2026-09-23).
   fontview.js 가 스크롤해 오며 6초 동안 테두리를 밝혀 어느 카드인지 알려 준다. */
.fv-card.is-hit { border-color: var(--fv-accent); box-shadow: 0 0 0 3px var(--fv-accent); }

/* 견본 글씨. 폰트가 아직 안 붙었을 땐 흐리게 두었다가 붙으면 또렷해진다 —
   깜빡임(FOUT)이 '로딩 중'처럼 읽히게 만드는 쪽이 덜 거슬린다. */
.fv-sample {
    flex: 1 1 auto; display: flex; align-items: center;
    font-size: var(--fv-size); line-height: 1.45; color: #111;
    word-break: break-all; overflow: hidden;
    opacity: .3; transition: opacity .25s;
    min-height: calc(var(--fv-size) * 1.5);
}
.fv-card.ready .fv-sample { opacity: 1; }

.fv-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    margin-top: 16px; padding-top: 13px; border-top: 1px solid #eee;
}
.fv-name { font-size: 16px; color: #111; font-weight: 500; letter-spacing: -0.5px; }
.fv-en   { font-size: 12px; color: #aaa; font-weight: 400; }

.fv-badge {
    font-size: 11px; font-weight: 500; letter-spacing: -0.3px;
    padding: 4px 9px; border-radius: 0; white-space: nowrap;
}
/* 제작사 배지에만 auto 를 준다. 둘 다 주면 남는 공간이 둘 사이에 나뉘어
   배지가 서로 벌어진다 — 붙어 있어야 한 쌍으로 읽힌다. */
.fv-badge.vendor { margin-left: auto; background: #f4f4f4; color: #777; }
.fv-badge.cat    { background: var(--fv-ink); color: #fff; }

/* 상품 태그 — 폰트보기 페이지에만, 이 폰트가 든 구독 상품 이름. 누르는 단추가 아니라서
   굵기 버튼(회색 테두리, 마우스 올리면 바뀜)과 달리 검은 테두리에 반응이 없다. */
.fv-plans { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.fv-plan {
    font-size: 11px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.4;
    padding: 3px 8px; border: 1px solid var(--fv-accent); border-radius: 0;
    background: #fff; color: #000; white-space: nowrap; cursor: default;
}

/* New 배지 — 새로 들어온 폰트(로컬 new.txt → fonts.json 의 new, 2026-09-22).
   카드 왼쪽 위 모서리에 테두리까지 덮어 딱 붙인다. 높이 19px 라 카드 위 여백(24px, 휴대폰 19px)
   안에 들어가 견본 글씨를 가리지 않는다. 누르는 것이 아니라서 마우스를 통과시킨다. */
.fv-card.is-new { position: relative; }
.fv-new {
    position: absolute; top: -1px; left: -1px; z-index: 1;
    padding: 4px 7px; font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: 0.2px;
    background: #e60012; color: #fff; pointer-events: none;
}

/* 굵기 버튼 — 굵기가 두 벌 이상인 패밀리에만 나온다 */
.fv-wts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 11px; }
.fv-wt {
    font-size: 11px; font-weight: 400; padding: 4px 10px;
    border: 1px solid #e5e5e5; border-radius: 0;
    background: #fff; color: #777; cursor: pointer; font-family: inherit;
}
.fv-wt:hover { border-color: #999; color: #111; }
.fv-wt.on { background: var(--fv-accent); border-color: var(--fv-accent); color: #fff; font-weight: 500; }

/* ── 상품 상세: 제작사 구역 ─────────────────────────────────
   '폰트 리스트' 탭에서는 제작사마다 제목을 달고 따로 깐다(폰트보기 페이지엔 없다).
   제목은 사이트 소제목처럼 가늘게, 아래에만 검은 줄을 긋는다. */
.fv-sec + .fv-sec { margin-top: 60px; }
.fv-sec[hidden] { display: none; }
.fv-sec-tit {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0 0 20px; padding: 0 0 14px; border-bottom: 2px solid var(--fv-accent);
    font-size: 24px; font-weight: 400; color: var(--fv-ink); letter-spacing: -1px;
}
.fv-sec-tit b { font-weight: 600; color: #111; }
.fv-sec-tit .n { font-size: 14px; font-weight: 400; color: #999; letter-spacing: 0; }

.fv-empty {
    padding: 80px 0; text-align: center;
    color: #999; font-size: 16px; font-weight: 400; letter-spacing: -0.5px;
}
.fv-empty[hidden] { display: none; }

/* 자바스크립트가 죽어도 폰트명과 분류는 글자로 남는다.
   지금 페이지는 폰트명이 HTML 에 하나도 없어서 검색에 안 걸린다 — 그 문제도 같이 풀린다. */
.fv-note {
    margin: 30px 0 0; font-size: 13px; color: #aaa;
    font-weight: 400; line-height: 1.8; letter-spacing: -0.5px;
}

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .fv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .fv { --fv-size: 30px; }
}
@media (max-width: 640px) {
    .fv-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .fv { --fv-size: 27px; }
    .fv-bar { padding: 14px 0 12px; margin-bottom: 20px; }
    .fv-text, .fv-find, .fv-reset { height: 44px; font-size: 15px; }
    /* 모바일 첫 줄: [문구] / [검색 + 초기화] / [크기] 세 줄로 쌓는다(order 로 초기화를 검색 옆으로).
       문구 칸은 폭을 100% 로 못박아 두면 브라우저가 기본 폭을 어떻게 계산하든 화면 밖으로 나갈 수 없다.
       검색 칸은 min-width:0(위 규칙) + flex-basis 0 이라 초기화 단추 몫만큼 알아서 줄어든다. */
    .fv-text { order: 1; flex: 1 1 100%; width: 100%; }
    .fv-find { order: 2; flex: 1 1 0; width: auto; }
    .fv-reset { order: 3; flex: 0 0 auto; }
    .fv-size { order: 4; width: 100%; margin: 2px 0 0; }
    .fv-size input { flex: 1; width: auto; }
    .fv-count { width: 100%; margin: 4px 0 0; text-align: right; }
    .fv-tab { height: 33px; padding: 0 13px; font-size: 13px; }
    .fv-sep { display: none; }
    .fv-card { padding: 19px 17px 14px; min-height: 150px; }
    .fv-sec + .fv-sec { margin-top: 44px; }
    .fv-sec-tit { font-size: 20px; margin-bottom: 14px; padding-bottom: 11px; }
}