/* 모퉁이 이발관 — N16 벤토 그리드 상황판 */
:root {
  --ink: #141613;
  --ink-2: #1d201c;
  --cream: #ede5d3;
  --cream-2: #e1d6bf;
  --green: #1f3a2f;
  --red: #b3362a;
  --blue: #23466b;
  --line: rgba(20,22,19,.14);
  --head: 'Gasoek One', 'Pretendard Variable', sans-serif;
  --num: 'Oswald', 'Pretendard Variable', sans-serif;
  --body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--body); font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2 { margin: 0; font-weight: 400; }
p { margin: 0; }

/* ---------- 벤토 판 ---------- */
.board {
  display: grid; gap: 10px; max-width: 1120px; margin: 0 auto; padding: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "hero hero hero hero hero hero hero hero hours hours hours hours"
    "price price price price fade fade fade tools tools tools tools tools"
    "news news news news map map map map map call call call";
}
.tile { position: relative; margin: 0; border-radius: 14px; overflow: hidden; padding: 20px 22px; min-width: 0; }
.tile__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tile h2 { font-family: var(--head); font-size: 21px; line-height: 1.25; letter-spacing: -0.2px; }
.tile__foot { margin-top: 12px; font-size: 13px; line-height: 1.55; opacity: .75; }
.small { font-size: 12.5px; opacity: .7; }
.more { font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }

.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: #c94534; }
.btn--line { border: 1.5px solid rgba(237,229,211,.7); color: var(--cream); }
.btn--line:hover { background: rgba(237,229,211,.12); }
.btn--cream { background: var(--cream); color: var(--ink); }

/* 대표 칸 */
.t-hero { grid-area: hero; min-height: 370px; padding: 0; display: flex; align-items: flex-end; background: var(--ink-2); }
.t-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,19,.55) 0%, rgba(20,22,19,.35) 30%, rgba(20,22,19,.6) 55%, rgba(20,22,19,.92) 100%); }
.t-hero .brand { position: absolute; top: 24px; left: 28px; }
.t-hero__in { position: relative; z-index: 1; width: 100%; padding: 26px 28px 28px; display: flex; flex-direction: column; min-height: 370px; justify-content: flex-end; }
.brand { font-family: var(--head); font-size: 20px; letter-spacing: 0; }
.brand span { font-family: var(--num); font-weight: 500; font-size: 13px; letter-spacing: 3px; margin-left: 6px; padding: 2px 7px; border: 1px solid currentColor; border-radius: 4px; vertical-align: 3px; }
.t-hero h1 { font-family: var(--head); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.18; letter-spacing: -0.5px; }
.t-hero__sub { margin-top: 12px; max-width: 30em; font-size: 15.5px; opacity: .9; }
.t-hero__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* 영업시간 */
.t-hours { grid-area: hours; background: var(--cream); color: var(--ink); display: flex; flex-direction: column; }
.now { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--ink); color: var(--cream); white-space: nowrap; }
.now.is-on { background: var(--green); }
.now.is-on::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #7fd39a; vertical-align: 1px; }
.now.is-off { background: var(--red); color: #fff; }
.week { list-style: none; margin: 0; padding: 0; }
.week li { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
.week li:last-child { border-bottom: 0; }
.week span { font-weight: 700; min-width: 2em; white-space: nowrap; }
.week b { font-family: var(--num); font-weight: 500; font-size: 16px; letter-spacing: .3px; }
.week li[data-d="1"] b { font-family: var(--body); font-weight: 700; color: var(--red); font-size: 14.5px; }
.week li.is-today { background: var(--ink); color: var(--cream); border-radius: 8px; border-bottom-color: transparent; }
.week li.is-today span::after { content: ' 오늘'; font-size: 11.5px; font-weight: 600; opacity: .7; white-space: nowrap; }
.t-hours .tile__foot { margin-top: auto; padding-top: 10px; }

/* 대표 가격 */
.t-price { grid-area: price; background: var(--green); color: var(--cream); }
.price3 { list-style: none; margin: 0; padding: 0; }
.price3 a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(237,229,211,.3); text-decoration: none; }
.price3 li:last-child a { border-bottom: 0; }
.price3 .nm { font-weight: 600; font-size: 15.5px; }
.price3 .pr { font-family: var(--num); font-size: 22px; font-weight: 500; letter-spacing: .5px; }
.price3 .go { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--cream); color: var(--green); }
.price3 a:hover .go { background: var(--red); color: #fff; }

/* 사진 칸 */
.t-photo { padding: 0; background: var(--ink-2); min-height: 220px; }
.t-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-photo figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: 12.5px; font-weight: 600; padding: 5px 9px; background: rgba(20,22,19,.72); border-radius: 7px; width: fit-content; max-width: calc(100% - 20px); }
.t-fade { grid-area: fade; }
.t-tools { grid-area: tools; }

/* 소식 */
.t-news { grid-area: news; background: var(--cream-2); color: var(--ink); }
.news { list-style: none; margin: 0; padding: 0; }
.news li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; }
.news time { font-family: var(--num); font-size: 16px; font-weight: 500; color: var(--red); }
.news b { font-weight: 700; }

/* 오시는 길 */
.t-map { grid-area: map; padding: 0; background: var(--ink-2); display: flex; align-items: flex-end; min-height: 250px; }
.t-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,19,.92) 0%, rgba(20,22,19,.78) 55%, rgba(20,22,19,.2) 100%); }
.t-map__in { position: relative; z-index: 1; padding: 20px 22px; max-width: 380px; font-size: 14px; }
.t-map .addr { margin: 8px 0 6px; font-size: 17px; font-weight: 700; }
.t-map .btn { margin-top: 12px; min-height: 42px; font-size: 14px; }

/* 연락 */
.t-call { grid-area: call; background: var(--red); color: #fff; display: flex; flex-direction: column; }
.call-num { display: block; margin: 8px 0 10px; font-family: var(--num); font-size: clamp(28px, 2.6vw, 34px); font-weight: 600; letter-spacing: .5px; text-decoration: none; line-height: 1.1; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.links a:hover { background: rgba(255,255,255,.14); }
.t-call .tile__foot { margin-top: auto; padding-top: 12px; opacity: .88; }

/* ---------- 두 번째 판 ---------- */
.board--more {
  padding-top: 0;
  grid-template-areas:
    "menu menu menu menu menu menu menu first first first first first"
    "menu menu menu menu menu menu menu faq faq faq faq faq";
}
.t-menu { grid-area: menu; background: var(--cream); color: var(--ink); scroll-margin-top: 12px; }
.menu { margin: 0; }
.menu div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.menu dt { font-weight: 700; font-size: 15.5px; }
.menu dt small { display: block; font-weight: 400; font-size: 13px; opacity: .65; }
.menu dd { margin: 0; font-family: var(--num); font-size: 20px; font-weight: 500; white-space: nowrap; }
.t-first { grid-area: first; background: var(--blue); color: var(--cream); }
.steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 0 0 12px 38px; font-size: 14.5px; line-height: 1.6; }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--num); font-size: 18px; font-weight: 500; opacity: .7; }
.steps b { display: block; font-size: 15.5px; }
.t-faq { grid-area: faq; background: var(--ink-2); color: var(--cream); border: 1px solid rgba(237,229,211,.14); }
.t-faq h2 { margin-bottom: 8px; }
.t-faq details { border-top: 1px solid rgba(237,229,211,.16); }
.t-faq summary { cursor: pointer; padding: 11px 0; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.t-faq summary::-webkit-details-marker { display: none; }
.t-faq summary::after { content: '+'; font-family: var(--num); font-size: 18px; line-height: 1.2; }
.t-faq details[open] summary::after { content: '–'; }
.t-faq details p { padding: 0 0 12px; font-size: 14px; opacity: .82; }

/* ---------- 푸터 ---------- */
.foot { border-top: 1px solid rgba(237,229,211,.12); margin-top: 18px; }
.foot__in { max-width: 1120px; margin: 0 auto; padding: 28px 24px 36px; font-size: 13px; line-height: 1.8; color: rgba(237,229,211,.62); }
.foot .brand { color: var(--cream); margin-bottom: 8px; }
.foot a { text-decoration: none; }
.foot span { white-space: nowrap; }

/* ---------- 퀵메뉴 공통 레이어 ---------- */
.quick { position: fixed; z-index: 50; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; width: 66px; }
.quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: 6px 4px; border-radius: 10px; background: var(--ink-2); border: 1px solid rgba(237,229,211,.16); color: var(--cream); text-decoration: none; text-align: center; font-size: 13px; line-height: 1.25; }
.quick a span { font-family: var(--num); font-size: 9.5px; letter-spacing: .2px; opacity: .75; margin-top: 2px; }
.quick a:hover { border-color: var(--cream); }
.quick .q-book { background: var(--red); border-color: var(--red); }
.quick .q-top { min-height: 40px; font-family: var(--num); }

/* ---------- 반응형 ---------- */
@media (max-width: 1180px) {
  .quick { right: 6px; width: 60px; }
  .quick a span { display: none; }
  .board, .foot__in { margin-right: 72px; margin-left: auto; }
}
@media (max-width: 1023px) {
  .board, .foot__in { margin: 0 auto; }
  .board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "hero hero" "hours call" "hours price" "map map" "fade tools" "news news";
  }
  .board--more { grid-template-areas: "menu menu" "first faq"; }
  .quick { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; flex-direction: row; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(20,22,19,.96); border-top: 1px solid rgba(237,229,211,.14); }
  .quick a { flex: 1; min-height: 48px; margin: 0 3px; font-size: 14px; }
  .quick a span, .quick .q-top { display: none; }
  body { padding-bottom: 72px; }
}
@media (max-width: 640px) {
  .board { padding: 8px; gap: 8px; grid-template-areas: "hero hero" "hours hours" "call call" "map map" "price price" "fade tools" "news news"; }
  .board--more { padding-top: 0; grid-template-areas: "menu menu" "first first" "faq faq"; }
  .tile { padding: 18px 18px; }
  .t-hero, .t-photo, .t-map { padding: 0; }
  .t-hero, .t-hero__in { min-height: 440px; }
  .t-hero__in { padding: 22px 18px 20px; }
  .t-hero .brand { top: 18px; left: 18px; }
  .t-hero h1 { font-size: 30px; }
  .t-hero__sub { font-size: 15px; }
  .t-hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .t-photo { min-height: 200px; }
  .t-map { min-height: 0; }
  .t-map::after { background: linear-gradient(180deg, rgba(20,22,19,.55) 0%, rgba(20,22,19,.92) 60%); }
  .t-map__in { padding: 120px 18px 20px; }
  .call-num { font-size: 32px; }
  .foot__in { padding: 24px 18px 28px; }
}
/* PC: 판 전체가 첫 화면(1280×800)에 들어오도록 칸을 조인다 */
@media (min-width: 1024px) {
  .board:not(.board--more) { gap: 8px; padding: 10px 12px; }
  .board:not(.board--more) .tile { padding: 16px 20px; }
  .board:not(.board--more) .t-hero, .board:not(.board--more) .t-photo, .board:not(.board--more) .t-map { padding: 0; }
  .t-hero, .t-hero__in { min-height: 300px; }
  .t-hero .brand { position: static; margin-bottom: auto; padding-bottom: 14px; }
  .t-hero__in { padding: 22px 28px 24px; }
  .t-hero__sub { max-width: 36em; margin-top: 8px; }
  .t-hero__cta { margin-top: 14px; }
  .tile__head { margin-bottom: 8px; }
  .week li { padding: 2px 8px; font-size: 14.5px; }
  .week b { font-size: 15px; }
  .t-hours .tile__foot { padding-top: 6px; }
  .price3 a { padding: 6px 0; }
  .price3 .pr { font-size: 20px; }
  .t-photo { min-height: 190px; }
  .t-map { min-height: 200px; }
  .t-map__in { padding: 16px 20px; }
  .t-map .btn { margin-top: 8px; }
  .news li { padding: 6px 0; font-size: 13.5px; }
  .call-num { margin: 4px 0 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }