/* ==========================================================================
   친구포차 — 안내 글(/guide/) 전용 스타일 (site.css 뒤에 로드)

   검색어 하나에 글 하나를 대응시키는 페이지들입니다. 홈과 같은 색·글꼴을 쓰되,
   읽는 글이라 본문 폭은 68자 안팎으로 좁히고 사진은 본문보다 조금 넓게 둡니다.
   모바일 글자 하한(본문 14px · 라벨 12px)은 홈과 같습니다.
   ========================================================================== */

:root{--wrap:1180px;--read:720px}

/* ---------- 머리 ---------- */
.g-top{
  padding:28px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.g-top .wordmark{font-size:22px}
.g-top .topnav a{opacity:.85}

.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin:34px 0 18px;
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--muted);
}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--sign-soft)}
.crumbs span{color:var(--muted-2)}
.crumbs b{color:var(--sign-soft);font-weight:500}

.g-head{max-width:var(--read);margin-bottom:28px}
.g-kicker{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--olive);
  margin:0 0 12px;
}
.g-head h1{
  font-family:var(--f-display);
  font-size:clamp(32px,6.4vw,54px);
  line-height:1.08;
  margin:0 0 16px;
  font-weight:400;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.g-head h1 .y{color:var(--sign)}
.g-head h1 .r{color:var(--red)}
.g-lede{
  margin:0;
  font-size:16.5px;
  line-height:1.75;
  color:var(--paper);
}
.g-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:18px;
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--muted);
}
.g-meta b{color:var(--sign-soft);font-weight:500}

/* ---------- 대표 사진 ---------- */
.g-hero{
  aspect-ratio:16/9;
  border-radius:18px;
  border:1px solid var(--line);
  margin:0 0 44px;
}
@media (max-width:720px){ .g-hero{aspect-ratio:4/3;border-radius:14px;margin-bottom:34px} }

/* ---------- 본문 ---------- */
.g-body{
  display:grid;
  grid-template-columns:minmax(0,var(--read)) minmax(240px,320px);
  gap:48px;
  align-items:start;
}
@media (max-width:980px){ .g-body{grid-template-columns:minmax(0,1fr)} }

.g-article{min-width:0}
.g-article h2{
  font-family:var(--f-display);
  font-size:clamp(24px,4.2vw,32px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:52px 0 14px;
  text-wrap:balance;
}
.g-article h2:first-child{margin-top:0}
.g-article h3{
  font-size:18px;
  font-weight:600;
  margin:30px 0 10px;
  letter-spacing:-.01em;
}
.g-article p{
  margin:0 0 16px;
  font-size:15.5px;
  line-height:1.85;
  color:#D9D0BC;
}
.g-article p b{color:var(--paper);font-weight:600}
.g-article p .y{color:var(--sign-soft);font-weight:600}
.g-article ul,.g-article ol{
  margin:0 0 18px;
  padding-left:22px;
  color:#D9D0BC;
  font-size:15.5px;
  line-height:1.8;
}
.g-article li{margin-bottom:6px}
.g-article li b{color:var(--paper);font-weight:600}
.g-article a{color:var(--sign-soft);text-decoration:underline;text-underline-offset:3px}
.g-article a:hover{color:var(--sign)}

/* 본문 사진: 본문보다 조금 넓게 */
.g-fig{
  margin:30px 0;
}
.g-fig .ph{aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line)}
.g-fig.tall .ph{aspect-ratio:3/4}
.g-fig figcaption{
  margin-top:10px;
  font-size:13.5px;
  color:var(--muted);
  line-height:1.6;
}
.g-fig figcaption b{color:var(--sign-soft);font-weight:500}
.g-fig.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g-fig.pair figcaption{grid-column:1/-1}
.g-fig.pair.tall .ph{aspect-ratio:3/4}
@media (max-width:560px){ .g-fig.pair{grid-template-columns:1fr} }

/* 아직 못 찍은 사진 자리 — 사장님이 보내 주시면 교체 */
.ph.todo{
  border:1px dashed var(--line-2);
  background:linear-gradient(178deg,#201B12 0%,#17130C 100%);
}
.ph.todo::before{
  content:attr(data-label);
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 24px;
  font-family:var(--f-mono);
  font-size:13px;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--muted);
}
.ph.todo::after{opacity:.12}

/* 인용 (벽 문구 등) */
.g-quote{
  margin:30px 0;
  padding:22px 26px;
  border-left:3px solid var(--sign);
  background:var(--ink-2);
  border-radius:0 14px 14px 0;
  font-family:"Noto Serif KR",serif;
  font-size:17px;
  line-height:1.8;
  color:var(--paper);
}
.g-quote cite{
  display:block;
  margin-top:10px;
  font-family:var(--f-mono);
  font-size:12.5px;
  font-style:normal;
  color:var(--muted);
}

/* 요점 상자 */
.g-keys{
  margin:30px 0;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--ink-2);
  padding:20px 24px 8px;
}
.g-keys-label{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.12em;
  color:var(--sign-soft);
  margin-bottom:12px;
}
.g-keys dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:baseline}
.g-keys dt{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);letter-spacing:.04em;padding-top:2px}
.g-keys dd{margin:0 0 10px;font-size:15px;color:var(--paper);line-height:1.6}
.g-keys dd small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}

/* 페이지 안 FAQ */
.g-faq{margin:40px 0 0}
.g-faq details{
  border-top:1px solid var(--line);
  padding:4px 0;
}
.g-faq details:last-child{border-bottom:1px solid var(--line)}
.g-faq summary{
  cursor:pointer;
  list-style:none;
  padding:14px 0;
  font-size:16px;
  font-weight:600;
  color:var(--paper);
  display:flex;
  justify-content:space-between;
  gap:14px;
  min-height:44px;
  align-items:center;
}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::after{content:"+";font-family:var(--f-mono);color:var(--sign);font-size:20px;flex:none}
.g-faq details[open] summary::after{content:"−"}
.g-faq details p{margin:0 0 16px;font-size:15px;line-height:1.8;color:#D9D0BC}

/* ---------- 옆 칸 ---------- */
.g-aside{
  position:sticky;
  top:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
@media (max-width:980px){ .g-aside{position:static;margin-top:30px} }
.g-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--ink-2);
  padding:20px 22px;
}
.g-card-label{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.12em;
  color:var(--sign-soft);
  margin-bottom:12px;
}
.g-card p{margin:0 0 8px;font-size:14.5px;line-height:1.7;color:var(--muted)}
.g-card p b{color:var(--paper);font-weight:600}
.g-card .live{margin:0 0 10px}
.g-card .g-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  min-height:48px;
  padding:0 16px;
  border-radius:12px;
  background:var(--sign);
  color:#241A00;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
}
.g-card .g-btn:hover{background:var(--sign-soft)}
.g-card .g-btn.ghost{background:none;border:1px solid var(--line-2);color:var(--paper)}
.g-card .g-btn.ghost:hover{border-color:var(--sign)}
.g-card .g-btn em{font-style:normal;color:inherit;opacity:.75}
.g-card .g-tel{
  display:block;
  font-family:var(--f-mono);
  font-size:20px;
  font-weight:600;
  color:var(--paper);
  text-decoration:none;
  margin:4px 0 6px;
}
.g-card .g-tel:hover{color:var(--sign)}
.g-card ul{margin:0;padding:0;list-style:none}
.g-card li{
  border-top:1px solid var(--line);
  padding:0;
}
.g-card li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:46px;
  padding:9px 0;
  color:var(--paper);
  text-decoration:none;
  font-size:14.5px;
}
.g-card li a:hover{color:var(--sign-soft)}
.g-card li a small{color:var(--muted);font-size:12.5px;display:block;margin-top:2px}
.g-card li a em{font-style:normal;color:var(--sign)}

/* ---------- 허브 목록 ---------- */
.g-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:10px 0 50px;
}
@media (max-width:720px){ .g-grid{grid-template-columns:1fr} }
.g-item{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--ink-2);
  overflow:hidden;
  text-decoration:none;
  color:var(--paper);
  transition:border-color .2s;
}
.g-item:hover{border-color:var(--sign)}
.g-item .ph{aspect-ratio:16/9}
.g-item-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.g-item-k{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;color:var(--olive)}
.g-item h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.g-item p{margin:0;font-size:14.5px;line-height:1.7;color:var(--muted);flex:1}
.g-item-go{font-family:var(--f-mono);font-size:13px;color:var(--sign-soft);padding-top:10px;border-top:1px dashed var(--line-2)}

/* ---------- 다른 안내 글 ---------- */
.g-more{margin:56px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.g-more-label{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;color:var(--sign-soft);margin-bottom:14px}
.g-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:640px){ .g-more ul{grid-template-columns:1fr} }
.g-more li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--paper);
  text-decoration:none;
  font-size:14.5px;
  background:var(--ink-2);
}
.g-more li a:hover{border-color:var(--sign)}
.g-more li a em{font-style:normal;color:var(--sign);flex:none}

/* ---------- 홈 안내 섹션 ---------- */
.guide-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
@media (max-width:1100px){ .guide-strip{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .guide-strip{grid-template-columns:1fr 1fr} }
@media (max-width:420px){ .guide-strip{grid-template-columns:1fr} }
.guide-strip a{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 16px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--ink-2);
  text-decoration:none;
  color:var(--paper);
  min-width:0;
}
.guide-strip a:hover{border-color:var(--sign)}
.guide-strip .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--olive)}
.guide-strip b{font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.guide-strip span{font-size:13.5px;color:var(--muted);line-height:1.55}
.guide-strip em{font-style:normal;font-family:var(--f-mono);font-size:12.5px;color:var(--sign-soft);margin-top:auto;padding-top:8px}

/* 푸터·하단바는 site.css 그대로. 안내 페이지는 본문이 길어 아래 여백만 더 둡니다. */
.g-page main{padding-bottom:40px}