/*
 * 회사 소개 페이지 전용 (2026-09-29 — `index.html`만 읽는다).
 *
 * 🚨 **`style.css`와 섞지 않는다.** 그쪽은 똑똑똑의 시각 언어다 — 어두운 배경(#15171F) ·
 *    앰버(#FFA724) · 세로 축 선 · 파형. 회사 페이지가 그것을 쓰면 «회사 = 똑똑똑»으로 읽히고,
 *    그것이 01 §6.1 완화 ④가 막으려던 해석이다(도메인이 가리키는 것은 상호다).
 *
 * 🔁🚨 **사진 중심으로 세 번째로 다시 만들었다** (2026-09-29).
 *    ① 사진 자리를 회색 네모로 둔 판 — «디자인이 없다»
 *    ② 사진을 걷고 큰 글자와 색면으로만 만든 판 — 여전히 비어 보였다
 *    ③ 지금 — 실제 사진을 받아 첫 화면을 사진 한 장으로 채웠다.
 *    참고한 다섯(Ugmonk·Studio Neat·Dandelion·Ippodo·Panic)이 전부 그 구성이다.
 *
 * ⚠️ 글꼴은 **돋움체 하나**다. 바탕체는 쓰지 않는다.
 */

/*
 * 🆕🚨 **글꼴을 사이트에 넣었다** (2026-09-29 지시).
 *
 * 앞서는 글꼴 파일을 불러오는 줄이 없어 운영체제가 가진 것이 나왔다 —
 * 윈도우는 맑은 고딕, 맥은 Apple SD Gothic Neo, 안드로이드는 본고딕이라
 * 같은 쪽이 세 가지로 보였다.
 *
 * 제목·상호는 **KoPub 바탕**, 본문은 **본고딕**이다.
 * ⚠️ 이것은 앞서 정한 «글꼴은 돋움체 하나»를 뒤집는다. 전통차가 앞으로
 *    나오기 전에 정한 것이었다.
 *
 * 🚨 담긴 글자는 **KS X 1001의 한글 2,350자**와 아스키·기호다.
 *    지금 쓰인 글자만 담으면 문안을 고칠 때 새 글자가 다른 글꼴로 나오고,
 *    그것은 조용히 생긴다. 만드는 스크립트는 `infra/aws/build-webfonts.py`다.
 * 🚨 그래서 **굵기는 400과 700 둘뿐**이다. 600·800을 적으면 브라우저가
 *    획을 직접 불려 만들고 자소가 뭉개진다.
 * ⚠️ `Caddyfile`의 `@public`에 `/fonts/*`가 있어야 한다 — 없으면 404다.
 */
@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/noto-sans-kr-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/noto-sans-kr-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* 🔁🚨 **KoPub 바탕에서 본명조로 바꿨다** (2026-09-29).
   KoPub 2.0은 «사전승인 없이 수정·변형 불가»이고 «서버에 탑재한 웹 임베딩은 별도 승인»이다.
   글자를 줄여 woff2로 바꾼 것이 변형이고 사이트에 올리는 것이 서버 탑재다 — 둘 다 걸린다.
   본명조는 SIL Open Font License 1.1이라 변형과 웹 임베딩을 명시적으로 허용한다. */
@font-face {
  font-family: "Noto Serif KR";
  src: url("/fonts/noto-serif-kr-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --serif: "Noto Serif KR", "Nanum Myeongjo", "Apple SD Gothic Neo", "Batang", serif;
}

:root {
  --paper: #f7f3ec;   /* 종이색 — 흰색보다 따뜻하다 */
  --card: #fffdf9;
  --ink: #1f1c18;
  --ink-soft: #6c655b;
  --rule: #e2d9cb;
  --m-page: 1100px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.inner { max-width: var(--m-page); margin: 0 auto; padding: 0 24px; }
main { max-width: var(--m-page); margin: 0 auto; padding: 0 24px 44px; }

/* 섹션 이름 — 작게 세워 위계를 만든다 */
.label {
  margin: 0 0 18px;
  font-size: 13px; letter-spacing: .12em; color: var(--ink-soft); font-weight: 700;
}

/* ── 상단 ── */
/* 🆕 2026-09-29: 상단을 화면 위에 고정한다(사용자 지시).
   🚨 배경색을 깐다 — 없으면 아래로 지나가는 사진과 글이 상단 글자와 겹친다.
   🚨 z-index를 둔다 — 첫 화면 사진의 어두운 층(.hero::after)이 위로 올라온다. */
.nav {
  position: sticky; top: 0; z-index: 20;
  padding: 20px 0; background: var(--paper);
}
/* 🆕 2026-09-29: 문서 쪽 상단 구분선. 첫 페이지에서 사진이 시작하는 높이와 같은 자리다 —
   위아래 여백이 두 쪽에서 같으므로 아래 선만 그으면 높이가 맞는다.
   ⚠️ 첫 페이지에는 긋지 않는다. 거기는 그 자리에 사진이 있다. */
.nav.ruled { border-bottom: 1px solid var(--rule); }
.nav .inner { display: flex; align-items: center; gap: 22px; font-size: 15px; }
/* 🆕 상호를 두 줄로 세웠다 (2026-09-29) — 로마자는 도메인(kkuk.co.kr)과 같은 철자다. */
.nav .brand {
  display: inline-flex; flex-direction: column; gap: 2px;
  text-decoration: none; line-height: 1.05;
}
.nav .brand strong {
  font-family: var(--serif);
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
}
.nav .brand span {
  font-size: 10px; font-weight: 700; letter-spacing: .24em;
  color: var(--ink-soft);
}
.nav .spacer { flex: 1; }
.nav a.item { color: var(--ink-soft); text-decoration: none; }
.nav a.item:hover { color: var(--ink); }

/*
 * ── 첫 화면 — 사진 한 장 ──
 * 🚨 **글자는 사진 위에 있다.** 사진이 밝은 쪽이면 글자가 죽으므로 아래쪽에 어두운 층을 깔고
 *    흰 글자를 올린다(층이 없으면 사진마다 읽히는 정도가 달라진다).
 */
.hero { position: relative; margin-bottom: 96px; }
.hero > img {
  width: 100%; height: clamp(360px, 56vh, 620px); object-fit: cover;
}
/* 🔁 **사진을 수채화처럼 흐리게 만든 뒤 어두운 층을 옷게 줄였다** (2026-09-29 지시).
   사진 자체가 밝고 연해져서 구 값(.76)은 글자보다 층이 더 눈에 띄었다. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31, 28, 24, .52) 0%, rgba(31, 28, 24, .18) 46%, transparent 76%);
}
.hero-text {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  max-width: var(--m-page); margin: 0 auto; padding: 0 24px 44px;
  color: #fffdf8;
}
.hero-text h1 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(30px, 5.2vw, 56px); line-height: 1.2;
  letter-spacing: -.015em; font-weight: 700;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
}
.hero-text p {
  margin: 0; font-size: clamp(16px, 2vw, 20px); color: rgba(255, 253, 248, .86);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}

/* ── 만드는 사람 ── */
.maker { display: grid; gap: 26px; padding-bottom: 88px; }
@media (min-width: 820px) {
  .maker { grid-template-columns: 180px 1fr; gap: 48px; align-items: start; }
}
.maker .portrait { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; }
.maker p { margin: 0 0 14px; max-width: 34em; }
.maker p:last-child { margin-bottom: 0; }

/* ── 사업 영역 ── */
.works { padding: 56px 0 0; border-top: 1px solid var(--rule); }
.panels { display: grid; gap: 26px; }
@media (min-width: 820px) { .panels { grid-template-columns: 1fr 1fr; gap: 30px; } }

.panel {
  display: flex; flex-direction: column;
  text-decoration: none; background: var(--card);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(60, 48, 34, .07);
  transition: transform .18s ease, box-shadow .18s ease;
}
.panel:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(60, 48, 34, .14); }
.panel > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.panel .body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.panel h2 {
  margin: 0 0 10px; font-family: var(--serif);
  font-size: 27px; letter-spacing: -.01em; font-weight: 700;
}
.panel .body > p { margin: 0 0 20px; color: var(--ink-soft); font-size: 16px; }
.panel .more {
  margin-top: auto; align-self: flex-start;
  font-size: 15px; font-weight: 700;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 2px;
}

/* ── 푸터 ── 링크 · 사업자 정보 · 저작권 */
footer {
  border-top: 1px solid var(--rule);
  padding: 26px 0 20px;
  font-size: 14px; color: var(--ink-soft);
}
/* 🔁 2026-09-29: 방침·약관·아동 안전 표준을 늘어놓던 링크 줄을 없앴다.
   그 셋은 ttok.html과 나머지 여섯 쪽 푸터에 그대로 있다. */
footer p { margin: 8px 0 0; font-size: 13px; }
/* 🚨 **기본 밑줄을 끈다.** 끄지 않으면 아래 border-bottom과 겹쳐 밑줄이 두 겹으로 그려진다
   (2026-09-29에 그 상태로 한 번 나갔다 — 링크 줄을 지울 때 이 선언까지 함께 지워졌다). */
footer a { text-decoration: none; }
footer .policy { margin: 0 0 14px; font-size: 14px; }
footer .policy a {
  margin-right: 18px; color: var(--ink);
  border-bottom: 1px solid var(--rule); padding-bottom: 1px;
}
footer .policy a:hover { border-bottom-color: var(--ink); }

/* 🚨 사업자 정보 — 통신판매업 표시의무(09 §5.3.1). 작게 쓰되 감추지 않는다.
   🔁 2026-09-29에 본문 절에서 푸터 줄로 바꿨다: 한 줄로 이어 쓰고 이름과 값을 붙여 놓는다. */
.company { margin: 0; font-size: 13px; line-height: 1.85; }
.company dt { display: inline; margin-right: 6px; color: var(--ink-soft); }
.company dd {
  display: inline; margin: 0 14px 0 0; padding: 0;
  color: var(--ink);
}

/* ══ 문서 쪽 (문의하기 등) — 첫 페이지와 같은 시각 언어 ══ */
.page { max-width: 720px; margin: 0 auto; padding: 8px 24px 64px; }
.page h1 {
  margin: 10px 0 10px; font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px); line-height: 1.25;
  letter-spacing: -.015em; font-weight: 700;
}
.page h2 {
  margin: 48px 0 12px; font-family: var(--serif);
  font-size: 22px; letter-spacing: -.01em; font-weight: 700;
}
.page p { margin: 0 0 16px; }
.page ul { margin: 0 0 16px; padding-left: 1.15em; }
.page li { margin: 0 0 8px; }
.page a { color: var(--ink); }
.muted { color: var(--ink-soft); }

/* 입력칸 — 종이 위의 카드와 같은 흰색, 테두리는 본문 구분선과 같은 색 */
.form { margin: 26px 0 28px; }
.form label { display: block; margin-bottom: 18px; font-size: 14px; color: var(--ink-soft); }
.form input, .form textarea, .form select {
  display: block; width: 100%; margin-top: 7px;
  padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 7px;
}
.form select { cursor: pointer; }
.form select:disabled { color: var(--ink-soft); cursor: default; }
.form textarea { min-height: 170px; resize: vertical; line-height: 1.7; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.form .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.form .row .muted { font-size: 14px; }

.btn {
  font: inherit; font-size: 15px; font-weight: 700;
  padding: 11px 20px; border-radius: 7px; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn:hover { opacity: .88; }
.btn.ghost:hover { border-color: var(--ink); opacity: 1; }

/* ══ 서비스 쪽 (ttok.html) ══
 * 🔁 2026-09-29에 style.css(어두운 배경·앰버·세로 축 선·파형)에서 이쪽으로 옮겼다.
 * 근거를 확인한 결과 01 §6.1 완화 ④가 지키려던 것은 **페이지 구조**(회사가 루트 · 서비스가
 * 아래)이지 색이 아니었다. 어두운 배경과 앰버는 04 §1이 정한 **앱의 값**이고 웹이 원본이 아니다.
 * ⚠️ 그래서 남는 어긋남이 하나 있다 — 앱 화면과 스토어 그림은 여전히 어둡다.
 *    아래 .shots가 그것을 흰 카드에 담아 «찍은 사진»으로 읽히게 한다.
 */
/* 🚨 들머리 이름을 `hero`로 쓰지 않는다 — 첫 페이지의 `.hero`는 사진 한 장 위에 흰 글자를
   얹는 규칙이라(어두운 층 포함) 여기에 걸리면 글 뒤에 검은 띠가 깔린다. 한 번 겪었다. */
.intro { margin: 0 0 8px; }
.lead { max-width: 30em; margin: 0 0 30px; font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); }

/* 앱 화면 — 흰 카드에 여백을 두고 담는다 */
/* 🚨 **어느 창 폭에서나 한 장이 300px 안팎으로 보이게 한다** (2026-09-29).
   앞 판은 좁은 창에서 한 칸이라 화면 하나가 본문 폭을 통째로 써서 실물보다 컸고,
   720px부터는 본문 폭 안에서 셋으로 나뉘어 한 장이 200px까지 줄었다.
   ⚠️ 세 칸은 본문(720px)보다 넓은 자리를 잡을 수 있을 때만 쓴다. */
.shots { display: grid; gap: 22px; margin: 34px 0 44px; }
@media (min-width: 1040px) {
  .shots {
    width: 960px; margin-left: calc((100% - 960px) / 2);
    grid-template-columns: repeat(3, 1fr); gap: 26px;
  }
  .shot { max-width: none; }
}
.shot {
  max-width: 330px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px 14px 16px; box-shadow: 0 1px 2px rgba(60, 48, 34, .07);
}
.shot img { width: 100%; border-radius: 6px; }
.shot figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }

/* 전이 그림 — 파형에서 글줄로 */
.figure { margin: 32px 0 36px; }
.figure svg { width: 100%; height: auto; }
.figure .legend { display: grid; gap: 8px; margin-top: 14px; font-size: 15px; }
@media (min-width: 620px) { .figure .legend { grid-template-columns: 1fr 1fr; gap: 24px; } }
.figure .legend strong { display: block; }
.figure .legend span { color: var(--ink-soft); }

/* 설명 카드 · 두 칸 묶음 */
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 22px 24px; margin: 28px 0;
}
.card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 19px; font-weight: 700; }
.card ul { margin: 0; }
.sec { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule); }
.sec h2 { margin-top: 0; }
.items { display: grid; gap: 22px; }
@media (min-width: 720px) { .items { grid-template-columns: 1fr 1fr; gap: 32px; } }
.items h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.items p { margin: 0; color: var(--ink-soft); }

/* ══ 공지사항 ══ 🔁 2026-09-29에 style.css에서 옮겨 적었다(값은 종이색에 맞춰 다시 정했다).
 * 🚨 **날짜가 표지다** — 공지는 날짜부터 훑는 곳이라 제목 안에 묻지 않고 위에 따로 세운다.
 */
.notice-item { border-top: 1px solid var(--rule); padding: 26px 0; }
.notice-item:first-of-type { border-top: 0; padding-top: 8px; }
.notice-item .when {
  margin: 0; font-size: 14px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.notice-item h3 {
  margin: 6px 0 10px; font-family: var(--serif);
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
}
.notice-item p:last-child { margin-bottom: 0; }

#notice-nav { display: flex; gap: 12px; align-items: center; margin-top: 30px; font-size: 14px; }
#notice-nav[hidden] { display: none; }
#notice-nav button {
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 7px 14px;
}
#notice-nav button:hover:not(:disabled) { border-color: var(--ink); }
#notice-nav button:disabled { color: var(--ink-soft); cursor: default; opacity: .5; }

/* ══ 문서 쪽이 더 쓰는 것들 (방침·약관·도움말·아동 안전 표준·계정 삭제) ══ */
.page h3 { margin: 30px 0 10px; font-size: 18px; font-weight: 700; }
.page .lead { max-width: 34em; }
.page ol { margin: 0 0 16px; padding-left: 1.3em; }
.page strong { font-weight: 700; }

/* 시행일 줄 */
.updated { margin: 0 0 34px; font-size: 14px; color: var(--ink-soft); }
.updated small { font-size: 14px; }

/* 아직 시행 전임을 알리는 딱지 (약관) */
.draft {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 14px 18px; margin: 0 0 34px;
  font-size: 14px; color: var(--ink-soft);
}
.draft strong { color: var(--ink); }

/* 표 — 좁은 화면에서는 표 자체만 옆으로 밀린다(쪽 전체가 밀리지 않게) */
.tblwrap { overflow-x: auto; margin: 0 0 22px; }
.page table { border-collapse: collapse; width: 100%; font-size: 15px; }
.page th, .page td {
  text-align: left; vertical-align: top;
  padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule);
}
.page th { color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
/* 🚨 칸 너비를 정해 둔다 — 정하지 않으면 브라우저가 내용이 긴 칸에 폭을 몰아주고
   나머지 칸이 감싼 상자(overflow-x) 밖으로 밀려 보이지 않는다. 2026-09-29에 겪었다. */
.page table.cols3 { table-layout: fixed; min-width: 560px; }
.page table.cols3 col:nth-child(1) { width: 26%; }
.page table.cols3 col:nth-child(2) { width: 30%; }
.page table.cols3 col:nth-child(3) { width: 44%; }
.page td small { display: inline-block; margin-top: 3px; font-size: 13px; color: var(--ink-soft); }

/* ── 도움말 — 접는 목록 ──
 * 🚨 브라우저 기본 삼각형을 지우고 꺾쇠를 직접 그린다. 엔진마다 모양이 다르고 회전 하나로
 *    접힘·펼침을 만들 수 있다. 글자(▸)로 쓰면 글꼴마다 크기가 달라진다.
 */
.faq details.cat { border-top: 1px solid var(--rule); }
.faq details.cat[open] { padding-bottom: 18px; }
.faq details.cat > summary > h2 { margin: 0; font-size: 22px; }
.faq details.qa { padding-left: 2px; }
.faq details.qa > summary > h3 { margin: 0; font-size: 17px; font-weight: 700; }
.faq details.qa[open] { padding-bottom: 6px; }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary > * { flex: 1; }
.faq summary::after {
  content: ""; flex: none; align-self: center;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .15s ease;
}
.faq details[open] > summary::after { transform: rotate(-135deg); }
.faq details.qa p { margin: 0 0 14px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }