@charset "utf-8";
/* 폰트정보 페이지 — 웹폰트 실시간 미리보기
 *
 * 기존 사이트 CSS(common/global/respond) 위에 얹힌다. 클래스는 전부 .fv- 로
 * 시작한다 — global.css 의 .fontlist 규칙과 겹치면 조용히 어긋나기 때문에
 * 이름 공간을 아예 갈라 둔다.
 *
 * 기존 페이지의 생김새를 그대로 따른다
 *   - 모서리를 굴리지 않는다        (.btn1 / .btn2 / .inp 전부 각져 있다)
 *   - 테두리는 1px #ddd            (.inp, .btn2)
 *   - 버튼 높이 35px, 좌우 여백 20px (.btn1 / .btn2)
 *   - 글자 굵기는 300, 회색은 #333  (.sub-tit / .sub-tit2 / .more)
 *   - 그림자를 쓰지 않는다          (사이트 전체가 평평하다)
 *
 * 색은 검정 하나만 쓴다. 사이트 강조색은 원래 #00a0d6 이지만, 이 페이지는
 * 화면 전체가 검은 글씨 견본이라 색이 하나라도 더 있으면 그쪽으로 눈이 먼저 간다.
 * 여기서 봐야 할 건 글자 모양이다.
 */

.fv {
    --fv-accent: #000;      /* 켜진 탭 / 초점 / 강조 */
    --fv-line:   #ddd;      /* 기본 테두리 — .inp 와 같다 */
    --fv-ink:    #333;      /* 기본 글자색 — .sub-tit 과 같다 */
    --fv-size:   34px;      /* 견본 글씨 크기 (슬라이더가 바꾼다) */
}

/* ── 조작 막대 ────────────────────────────────────────────── */
.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: 300; letter-spacing: -0.5px;
}
/* min-width:0 은 두 칸 모두에 있어야 한다.
   입력칸은 기본 폭을 "글자 20개 폭"으로 잡는데, 그 글자 폭이 브라우저·폰트마다 다르다.
   flex 안에서는 기본값(min-width:auto)이 이 폭 밑으로 못 줄어들게 막는다.
   예전엔 문구칸에만 0 을 줘서, 삼성인터넷(한글 폰트로 폭을 넓게 잡음)에서 검색칸만
   화면 밖으로 튀어나가 오른쪽에 빈 공간이 생겼다(2026-09). 크롬에서는 재현되지 않는다. */
.fv-text { flex: 1 1 420px; min-width: 0; max-width: 100%; font-size: 17px; }
.fv-find { flex: 0 1 220px; 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: 300;
    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: 300; 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; }
.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;
    color: #666; font-size: 14px; font-weight: 300;
}
.fv-size input { width: 150px; accent-color: var(--fv-accent); }
.fv-size b { color: #111; font-weight: 400; min-width: 44px; text-align: right; }

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

/* ── 카드 그리드 ──────────────────────────────────────────── */
/* 기존 .fontlist 는 li 를 margin 10px 로 띄운다(= 사이 20px). 같은 간격으로 둔다. */
.fv-list {
    display: grid; grid-template-columns: repeat(3, 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; }

/* 견본 글씨. 폰트가 아직 안 붙었을 땐 흐리게 두었다가 붙으면 또렷해진다 —
   깜빡임(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: 300; }

.fv-badge {
    font-size: 11px; font-weight: 300; 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-wts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 11px; }
.fv-wt {
    font-size: 11px; font-weight: 300; 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; }

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

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

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .fv-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .fv { --fv-size: 30px; }
}
@media (max-width: 640px) {
    .fv-list { grid-template-columns: 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; }
    /* 모바일에서는 두 칸 모두 한 줄을 통째로 쓴다. 폭을 100% 로 못박아 두면
       브라우저가 기본 폭을 어떻게 계산하든 화면 밖으로 나갈 수 없다. */
    .fv-text, .fv-find { flex: 1 1 100%; width: 100%; }
    .fv-reset { flex: 0 0 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-size { width: 100%; }
    .fv-size input { flex: 1; width: auto; }
    .fv-card { padding: 19px 17px 14px; min-height: 150px; }
}