/* ============================================================
   Editorial / magazine pages — shared skin
   ------------------------------------------------------------
   한스 Team(/guides) 이 쓰던 디자인을 꺼내 둔 것이다. 그 화면은
   아직 자기 <style> 안에 같은 값을 들고 있다 — 고치면 살아 있는
   화면이 걸리므로 이번에는 건드리지 않았다. 둘이 갈라지지 않게
   언젠가 Guides 도 이 파일을 쓰도록 옮겨야 한다.

   쓰는 곳: /bus (한스 Bus)
   ============================================================ */

.lux-page {
    --lux-bg: #F3EFE8;                  /* warm ivory paper */
    --lux-bg-2: #E9E3D8;
    --lux-paper: #FBF9F4;
    --lux-ink: #181511;                 /* near-black ink */
    --lux-soft: #4A443B;
    --lux-muted: #837A6C;
    --lux-line: rgba(24,21,17,.14);
    --lux-hair: rgba(24,21,17,.30);
    --lux-accent: #9C5E50;              /* terracotta rose */
    --lux-gold: #B08D57;                /* muted brass */
    --lux-serif: 'Cormorant Garamond', 'Noto Serif KR', Georgia, serif;
    background: var(--lux-bg);
    color: var(--lux-ink);
    overflow: hidden;
    position: relative;
}

/* 종이 결 — 아이보리가 밋밋해 보이지 않게 */
.lux-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(24,21,17,.025) 1px, transparent 1px);
    background-size: 4px 4px;
    opacity: .6;
}

.lux-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(22px,4vw,48px);
    position: relative;
    z-index: 1;
}

.lux-rule { height: 1px; background: var(--lux-line); border: 0; }

/* ── 머리말 ─────────────────────────────────────────────────── */
/* 🔴 여기에 display:flex 를 걸지 않는다. 걸면 안쪽 .lux-wrap 이 flex 칸이 되어
   max-width 1240 을 쓰지 못하고 내용 너비로 쪼그라든다. 1440 창에서 재니 머리말이
   303px 에서 시작해 본문(140px)보다 163px 오른쪽으로 밀려 있었다. 가운데로 모이니
   언뜻 멀쩡해 보여서 오래 지나쳤다.

   제목과 오른쪽 메타를 양끝에 두는 flex 는 .lux-wrap 쪽에 있다(화면의 inline
   style). 바깥은 위아래 여백과 밑줄만 맡는다. */
.lux-masthead {
    padding: clamp(96px,12vw,150px) 0 clamp(22px,3vw,40px);
    border-bottom: 1px solid var(--lux-line);
}

.lux-page .lux-masthead-title {
    font-family: var(--lux-serif) !important;
    font-weight: 500 !important;
    font-size: clamp(56px,9vw,128px) !important;
    line-height: .92 !important;
    letter-spacing: -.01em !important;
    color: var(--lux-ink) !important;
    margin: 0 !important;
}

.lux-page .lux-masthead-title em {
    font-style: italic;
    color: var(--lux-accent);
}

.lux-masthead-meta {
    text-align: right;
    color: var(--lux-muted);
    font-size: clamp(11px,.95vw,12.5px);
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1.9;
    padding-bottom: 8px;
}

.lux-masthead-meta b { color: var(--lux-ink); font-weight: 700; }

/* ── 가운데 인용 제목 ───────────────────────────────────────── */
/* font-size 와 color 에 !important 가 필요하다. site.css 의 전역 가독성 규칙에
   `body h2, body h2 * { font-size:30px !important; color:#000 !important }` 가 있어
   h2 를 지켜내도 그 안의 <em> 이 걸린다. Guides 에서 겪은 것과 같다. */
.lux-page .lux-quote {
    font-family: var(--lux-serif) !important;
    font-weight: 500 !important;
    font-size: clamp(24px,3.1vw,42px) !important;
    line-height: 1.32 !important;
    letter-spacing: -.01em !important;
    color: var(--lux-ink) !important;
    margin: 0 0 clamp(34px,4vw,54px) !important;
    text-align: center;
}

/* 머리 제목도 고객이 편집기로 친다. 엔터를 치면 안에 <div> 가 생기는데,
   site.css 의 `body h2 *` 가 그것을 30px 검정으로 끌어내린다. 안쪽은 무엇이든
   제목 크기를 물려받게 한다. em 규칙이 더 구체적이라 아래에서 이긴다. */
.lux-page .lux-quote * {
    font-size: inherit !important;
    color: inherit !important;
}

.lux-page .lux-quote em {
    font-style: italic;
    font-size: inherit !important;
    color: var(--lux-accent) !important;
}

/* ── 설명글 ─────────────────────────────────────────────────── */
/* /bus 의 사진 아래 설명글.

   🔴 .lux-page 를 앞에 붙이지 않는다. 어드민 편집 창에는 그 조상이 없어서,
   붙여 두면 손님 화면에서만 꾸며지고 편집 창은 민짜로 보인다 — 같은 글인데
   두 곳이 달라 보이면 쓰는 사람이 저장하기 전까지 결과를 모른다.
   색은 var() 기본값으로 받쳐 .lux-page 밖에서도 선다.

   🔴 꾸미기를 class 로 걸지 않는다. 편집기가 내놓는 것은 이렇다(실측):

       첫 줄<div>둘째 줄</div><div>셋째 줄</div>

   맨 앞 줄은 요소조차 아니고, 다음 줄부터 <div> 다. <p> 도 class 도 나오지
   않는다. 우리가 손으로 넣은 class 는 고객이 본문을 다시 치는 순간 통째로
   사라진다 — 그러면 그 자리를 또 우리가 고쳐 줘야 한다. 그런 경계는 쓰는
   사람에게 설명할 수가 없다.

   그래서 요소 자체에 건다. 고객이 편집기 단추만으로 만들 수 있는 모양이면
   무엇이든 지면이 완성되고, 우리가 다시 손댈 일이 없다. */
.bus-body {
    --bus-gap: 1.25em;
    max-width: 48em;
    margin: 0 auto;
    color: var(--lux-soft, #4A443B);
    line-height: 1.85;
}

/* 아래가 아니라 위에 여백을 준다. 맨 앞 줄은 요소가 아니라 여백을 받을 수
   없는데, 아래 여백으로 주면 첫 줄과 둘째 줄이 붙어 버린다.

   🔴 어드민 편집 창에서는 글이 두 겹 안쪽에 있다
   (.bus-body > .ht-rich-wrap > .ht-rich-editor > p). `>` 하나로는 거기까지
   닿지 않아 편집 창 여백이 전부 0 이 됐다(실측). 두 자리를 같이 적되 간격
   값은 --bus-gap 한 곳에만 둔다 — 두 곳에 적으면 언젠가 갈라진다. */
.bus-body > p,
.bus-body > div,
.bus-body .ht-rich-editor > p,
.bus-body .ht-rich-editor > div { margin: var(--bus-gap) 0 0; }

.bus-body > :first-child,
.bus-body .ht-rich-editor > :first-child { margin-top: 0; }

/* 첫 줄 강조는 「굵게」 단추로 한다 — 고객이 만들 수 있는 유일한 방법이다. */
.bus-body b,
.bus-body strong { color: var(--lux-ink, #181511); font-weight: 700; }

.bus-body a { color: var(--lux-accent, #9C5E50); text-decoration: none; }
.bus-body a:hover { text-decoration: underline; }

/* ── 연락처 ─────────────────────────────────────────────────── */
/* 🔴 본문 칸 안이 아니라 화면이 그린다. 가로줄도, 사이트 설정에서 전화·메일을
   끌어오는 장치(data-ht-contact)도 편집기로는 만들 수 없다. 만들 수 없는 것을
   고객 손이 닿는 자리에 두면, 한 번 지워진 뒤에는 되살릴 길이 없다.
   전화와 메일은 사이트 설정 한 곳에서 바뀌어 전 화면에 함께 반영된다. */
.bus-contact {
    max-width: 48em;
    margin: 2.4em auto 0;
    padding-top: 1.4em;
    border-top: 1px solid var(--lux-line, rgba(24,21,17,.14));
    color: var(--lux-soft, #4A443B);
    line-height: 1.85;
}

.bus-contact a { color: var(--lux-accent, #9C5E50); text-decoration: none; }
.bus-contact a:hover { text-decoration: underline; }

/* 머리 인용 제목을 .lux-page 밖(편집 창)에서도 같은 모양으로 */
.bus-headline {
    font-family: var(--lux-serif, 'Cormorant Garamond', Georgia, serif);
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.32;
    color: var(--lux-ink, #181511);
    text-align: center;
}

/* ── 사진 줄 ────────────────────────────────────────────────── */
/* 편집기가 만드는 모양을 그대로 받는다. 글 편집기에서 엔터를 치면 한 줄(div)이
   생기고, 그 안에 넣은 사진들이 그 줄의 칸이 된다. 줄을 더하면 사진이 늘어나고
   줄을 지우면 줄어든다 — 장수에 제한이 없다.

   🔴 줄 안에서 폭을 "똑같이" 나눈다. 비율대로 나누면(justified) 한 장만 갈아
   끼워도 그 줄 전체 폭이 다시 계산돼 옆 사진까지 움직인다. 고객이 할 일은
   배치가 아니라 갈아끼우기라서, 건드린 자리만 바뀌는 쪽이 맞다. */
.lux-gallery > div,
.lux-gallery > p {
    display: flex;
    gap: 10px;
    margin: 0 0 10px;
}

.lux-gallery img {
    flex: 1 1 0;
    width: 0;                 /* flex 가 폭을 정하게 — 원본 폭이 끼어들지 않는다 */
    min-width: 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;        /* 칸을 채우고 넘치는 만큼만 잘라낸다 */
    object-position: center;
    display: block;
    background: var(--lux-bg-2);
}

/* 한 장만 있는 줄 — 원래 비율을 살린다. 2:1 사진은 2:1 로, 4:1 파노라마는
   4:1 로 나온다. 세로로 긴 사진은 gallery-rows.js 가 aspect-ratio 를 1.8 로
   눌러 준다(치수를 알아야 해서 CSS 로는 못 한다).

   🔴 max-height 는 그 스크립트가 못 돌았을 때를 위한 그물일 뿐이다. 자르는
   양을 이 값으로 정하면 안 된다 — px 로 두면 폭이 좁은 미리보기에서 더 많이
   잘려 손님 화면과 다른 그림이 나온다(실측 1.79 대 1.02). */
.lux-gallery img:only-child {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: auto;
    height: auto;
    max-height: 640px;
}

/* 🔴 좁은 화면에서 줄을 풀지 않는다.

   전에는 760px 아래에서 둘씩, 480px 아래에서 하나씩으로 풀었다. "손톱만 해지는
   것"을 막으려던 것인데 결과가 거꾸로였다. 가운데 세 장이 저마다 화면 폭을 다
   쓰면서, 한 줄을 통째로 쓰라고 둔 첫 장보다 오히려 커 보였다 — 375px 에서 실측
   첫 장 184px, 가운데 세 장 각 221px. 묶음도 사라져 그냥 큰 사진을 하나씩
   스크롤하는 모양이 됐다.

   첫 장이 크고 가운데가 작은 것이 이 지면의 짜임이다. 폰에서도 그대로 둔다.
   좁으니 사이 간격만 줄인다. */
@media (max-width: 600px) {
    .lux-gallery > div,
    .lux-gallery > p { gap: 6px; margin-bottom: 6px; }
}