/* 지민문화사 . 여러 면이 함께 쓰는 부분
   토큰 · 머리 · 발 · 단추. 면마다 다른 것은 그 면의 <style> 에 둔다. */

/* ⚠ 2026-09-09 강조색을 청록(#0f6b73 / #46b3bd)에서 주황 #c8402f 로 — 대표님 지시
   "사이트 포인트 색상 이 지민 로고에 있는 주황색으로 바꿔". 그 로고는 구글 계정 프로필의
   붉은 판이고 화면에서 잰 값이 #c8402f 다. 밝은 바탕·먹판 양쪽에 같은 값을 쓴다.
   먹판 위 단추는 글자를 흰색으로 — 어두운 글자(#08282b)는 이 색 위에서 3.92 라 모자란다. */
:root{ --bg:#f4f6f6; --fg:#0d0d0d; --dim:#565656; --line:#e0e5e5; --accent:#c8402f;
  --accent-hover:#d2503a; --on-accent:#ffffff;
}

/* ⚠ 이 글꼴은 **어디에도 걸려 있지 않다. 로고 말고는 쓰지 않는다.**
   대표님 지시 2026-09-06 — "웹 폰트깨진다. 로고외에는 웹폰트 적용하지말라."

   왜 깨졌나. 이것은 **이 사이트에 나오는 글자만 골라 담은 서브셋**이다
   (tools/make-webfont.py). 그래서 **문구를 한 글자라도 바꾸면 새 글자가 서브셋에
   없어 그 글자만 대체 글꼴로 떨어진다.** 2026-09-06 에 h1 을 "충무로에서 찍습니다"
   에서 "만듭니다" 로 바꾸자 바로 그 일이 났다.

   **글꼴이 문구를 붙잡는 구조였다.** 문구는 앞으로도 바뀐다. 그래서 뗐다.
   로고는 글자가 아니라 SVG 그림이라(assets/logo/) 이 글꼴이 필요 없다.

   선언만 남겨 둔다 — 부르는 곳이 없으면 브라우저는 내려받지 않는다.
   **다시 걸지 말 것.** 걸려면 문구를 고칠 때마다 서브셋을 다시 뽑아야 한다. */
@font-face{
  font-family:'JiminDisplay';
  src:url('fonts/blackhansans-subset.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
 font-family:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
 font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:0 34px}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.mock{background:#0d0d0d;color:#e8e8e8;font-size:13.5px;text-align:center;padding:7px}
.mock b{color:#f08a74}
.ph{color:var(--accent)}

/* 머리는 통째로 먹판이다. 인쇄소 간판처럼 위에 한 덩어리로 앉힌다. */
header{padding:22px 0 20px;position:sticky;top:0;background:var(--fg);color:#f4f6f6;z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{display:block;line-height:0}
/* 로고와 메뉴는 대표님 지시로 1.5배다(51->77px, 14.5->22px).
   1130px 까지는 그 크기 그대로 한 줄에 들어간다(실측). 그 아래에서만 같이 줄인다. */
.logo img{height:77px;width:auto;display:block}
/* ⚠ 2026-09-09 — 네 번 고쳐 제자리로 온 자리다. 값을 바꾸기 전에 이 줄을 읽을 것.
     22 -> 44   "상단메뉴 작업 내지 ~ 폰트 크기 2배로 해"
     44 -> 22   "상단 메뉴 현재 1/2 크기"
     22 -> 11   "상담 메뉴 글자 크기 반으로 줄이라고"
     11 -> 22   "그러네 뭔가 이상하네 다시 2배로 키워 메뉴 크기"
   **22px 이 눈으로 맞는 값이다.** 네 번 오간 끝에 원래 값으로 돌아왔다.
   11px 로 갔을 때는 로고(77px)·문의하기 단추(22px) 옆에서 균형이 깨졌다. */
.bar nav{display:flex;gap:20px;font-size:22px;font-weight:600;color:#e8e8e8;white-space:nowrap}
.bar nav a{padding-bottom:2px}
.bar nav a:hover{box-shadow:inset 0 -1.5px 0 #e8e8e8}
/* ⚠ 2026-09-09 대표님 지시 — "메뉴 상단 문의하기 버튼도 파란색 배경으로".
   아래 문의 단추와 같은 청록으로 맞췄다. 머리와 아래가 같은 색이어야
   **같은 곳으로 가는 단추**로 읽힌다. 둘 다 폼으로 간다. */
.contact{font-size:22px;font-weight:700;border:2px solid var(--accent);background:var(--accent);color:var(--on-accent);
 padding:10px 24px;border-radius:999px;white-space:nowrap}
.contact:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
/* 로고·메뉴·단추가 다 1.5배라 1190px 아래에서는 셋이 같이 줄어든다(실측) */
@media(max-width:1190px){
  .logo img{height:clamp(57px,5.1vw,77px)}
  .bar nav{gap:clamp(14px,1.4vw,20px);font-size:clamp(15px,1.5vw,22px)}
  .contact{font-size:clamp(15px,1.5vw,22px);padding:10px clamp(16px,1.7vw,24px)}
}

@media(max-width:960px){.bar nav{display:none}}

/* 히어로 — 2026-09-05 부터 **한 줄짜리 띠**다 (JP000005, 대표님 지시).
   첫 화면 안에 인쇄물이 들어와야 한다. 여기 높이를 늘리면 인쇄물이 접힌 자리 아래로
   밀려나고, 그것이 예전에 디자인 스튜디오처럼 읽히던 이유였다.
   글자 크기 86px -> 46px, 위아래 여백 56/40 -> 34/22 로 줄였다. */
.hero{padding:34px 0 22px}
/* 2026-09-09 대표님 지시 "합창단 브로셔 디자인 제작 전문 -> 볼드". 400 -> 700. */
.hero h1{font-family:system-ui,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;font-size:clamp(31px,4.4vw,46px);
 line-height:1.15;margin:0 0 16px;letter-spacing:-.03em;font-weight:700}
/* 전문 분야 한 줄. 대표님 지시 2026-09-06.
   ⚠ .sub 안에 넣지 말 것 — 그것은 1fr auto 두 칸 격자라 셋째 아이가 들어오면
   줄이 접히고 오른쪽 지역 표기가 밀린다. 그래서 h1 바로 아래 따로 선다. */
.hero .spec{margin:0 0 14px;font-size:16.5px;font-weight:700;color:var(--fg);
 letter-spacing:-.01em;line-height:1.5}
.hero .sub{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:end;
 border-top:1px solid var(--line);padding-top:16px}
.hero .sub p{margin:0;font-size:15.5px;font-weight:600;color:var(--dim);max-width:34em;
 letter-spacing:.02em;line-height:1.7}
.hero .sub .who{font-size:14.5px;font-weight:600;letter-spacing:.16em;color:var(--dim);text-align:right;white-space:nowrap}
@media(max-width:760px){.hero .sub{grid-template-columns:1fr}.hero .sub .who{text-align:left}}

.end{background:var(--fg);color:var(--bg);padding:76px 0}
.end h2{color:var(--bg);font-size:clamp(32px,5vw,56px);letter-spacing:-.02em;margin-bottom:16px}
.end p{color:#b0b0b0;font-size:19px;font-weight:500;margin:0 0 32px;max-width:32em}
.cta{display:flex;gap:11px;flex-wrap:wrap}
.btn{padding:16px 32px;border-radius:999px;font-size:17px;font-weight:700;border:1.5px solid var(--bg);color:var(--bg);display:inline-block}
.btn.fill{background:var(--bg);color:var(--fg)}
/* ⚠ 2026-09-09 — 카카오 노랑(#fae100)을 걷었다. 대표님 지시
   "색깔만 노란 버튼에서 다른 걸로 바꿔. 카톡으로 오해하지 않게."
   카카오를 뺐는데 단추만 노랑으로 남으면 **누르면 카톡이 열리는 줄 알고 누른다.**
   색이 곧 약속이라 색만 남겨도 틀린 표시가 된다.
   2026-09-09 청록 -> 주황(--accent). 흰 글자를 얹는다. */
.btn.k{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

footer{background:var(--fg);color:#949494;font-size:15px;padding:0 0 46px}
footer .fg{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;border-top:1px solid #262626;padding-top:34px}
footer b{color:var(--bg);display:block;margin-bottom:8px;font-size:16px}
footer .flogo{height:21px;width:auto;display:block;margin-bottom:16px}
footer p{margin:0 0 4px}
.biz{margin-top:26px;padding-top:16px;border-top:1px solid #262626;font-size:13.5px;color:#7a7a7a}
@media(max-width:760px){footer .fg{grid-template-columns:1fr;gap:20px}}