/* 구피스탠스 사이트 공통 스타일 — 원두 노트와 같은 종이·크림 톤, 간판 세이지와 조명 앰버는 아주 조금만 */
@import url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/pretendard.min.css");

:root {
  --bg: #efede6;
  --paper: #f8f4ea;
  --ink: #2b2a27;
  --muted: #77736a;
  --line: #ddd7ca;
  --sage: #c9d3a8;
  --sage-ink: #4f5a35;
  --amber: #b5772b;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.07);
  color-scheme: only light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Pretendard", sans-serif;
  font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; word-break: keep-all; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 머리말 */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid rgba(0,0,0,.05); }
.top .in { max-width: 960px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top .brand img { width: 52px; height: 52px; mix-blend-mode: multiply; }
.top nav { display: flex; gap: 18px; font-size: 14.5px; }
.top nav a { text-decoration: none; color: var(--muted); padding: 6px 0; }
.top nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* 공통 블록 */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.label { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
h1, h2, h3 { line-height: 1.4; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 24px; font-weight: 600; margin: 8px 0 18px; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 14px; }
.lead { font-size: 18px; line-height: 1.8; }
.muted { color: var(--muted); }
blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--sage); font-size: 18px; line-height: 1.7; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* 첫 화면 */
.hero { position: relative; }
.hero img { width: 100%; height: min(78vh, 760px); object-fit: cover; object-position: center 40%; }
.hero .cap { max-width: 720px; margin: 0 auto; padding: 34px 20px 8px; }
.hero .cap h1 { font-size: 30px; font-weight: 600; margin: 10px 0 12px; }

/* 카드 묶음 */
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.three { grid-template-columns: repeat(3, 1fr); } .grid.two { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--paper); box-shadow: var(--shadow); padding: 22px 20px; }
.card h3 { margin-bottom: 6px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* 그림과 글 나란히 */
.split { display: grid; gap: 22px; align-items: center; }
@media (min-width: 640px) { .split { grid-template-columns: 1fr 1.1fr; } .split.rev > :first-child { order: 2; } }
.art { background: var(--paper); box-shadow: var(--shadow); padding: 14px; }

/* 버튼 */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--ink); color: var(--paper);
  text-decoration: none; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* 안내 표 */
.info { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; }
.info dt { color: var(--muted); }
.info dd { margin: 0; }

/* 이야기 링크 */
.links { display: grid; gap: 10px; }
.links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; background: var(--paper);
  box-shadow: var(--shadow); text-decoration: none; }
.links small { display: block; color: var(--muted); font-size: 12.5px; letter-spacing: .1em; }
.links span.t { font-weight: 500; }
.links .arrow { color: var(--muted); }

/* 꼬리말 */
footer { padding: 40px 20px 56px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.9; }
footer img { width: 64px; margin: 0 auto 6px; mix-blend-mode: multiply; }
footer a { text-decoration: none; }

/* 공사 사진 */
.build { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.build figure { margin: 0; }
.build img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.build figcaption { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 6px; }
.build figure.wide { grid-column: 1 / -1; }
.build figure.wide img { aspect-ratio: 4 / 3; }

/* Samsung Internet: 자체 다크 스타일이 있으면 강제 다크를 하지 않음. 다크에서도 라이트 그대로 */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  html, body { background: var(--bg) !important; color: var(--ink) !important; }
  img, svg { filter: none !important; opacity: 1 !important; }
}