/* Arupix blog — 긴 글·미디어 에디토리얼 층. style.css(토큰·머리띠·알약·단추·발치·리빌) 위에 얹는다 — style.css 는 건드리지 않는다.
   출처: 홈의 sec__head(라벨 왼쪽 0 · 내용 469u 오프셋 · 1px 머리선) · case 행(사진 hover scale 1.02) · mono 라벨(12px · .02em)
   r1(AD-arupix-blog-complete 재심): 글 판형 = [왼쪽 레일 461u: 메타+목차 sticky | 오른쪽: 표지 955 → 본문 600 → 넓은 그림 955] — 레일이 첫 화면부터 문서 끝까지 쓰인다(지적 1)
   · 표는 ≤767 에서 행을 쌓는다(td::before = data-th · 지적 3) · 꼬리는 1px 선 + 문장 + 단추 → 목록 .entry 문법의 관련 글 → 발치(지적 4)
   본문 자수: Inter Tight 17px 에서 600px ≈ 68ch · 영상은 poster + <img.loop__still> + 재생/정지 단추 */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
::selection{background:var(--ink);color:var(--bg)}
.pill[aria-current]{background:var(--fill);box-shadow:inset 0 0 0 1px var(--ink)} /* 현재 쪽은 윤곽 — 검정 알약은 머리띠에 «Book a call» 하나만(AD 기타 ⓑ) */

/* ── 목록 ── */
.bl{padding:120px 8px 0}
.bl__head{border-top:1px solid var(--line);padding-top:14px;margin-bottom:56px;transition:border-color .35s}
.bl__crumb{color:var(--g1);margin-bottom:26px}
.bl__title{font-size:calc(66 * var(--u));font-weight:300;line-height:1.02;letter-spacing:-.04em;max-width:1000px}
.bl__title em{font-size:1.06em}
.bl__intro{margin-top:28px;max-width:560px;font-size:18px;line-height:1.4;color:var(--ink2);transition:color .35s}
.bl__list{border-top:1px solid var(--line);transition:border-color .35s}
.entry{display:grid;grid-template-columns:calc(760 * var(--u)) 1fr;column-gap:32px;padding:14px 0 40px;border-bottom:1px solid var(--line);color:var(--ink);transition:border-color .35s}
.entry__media{overflow:hidden;border-radius:var(--r);background:#d8d6d1}
.entry__media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.entry:hover .entry__media img{transform:scale(1.02)}
.entry__body{display:flex;flex-direction:column;padding-top:2px;min-width:0}
.entry__meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--g1);margin-bottom:20px}
.entry__title{font-size:34px;font-weight:300;line-height:1.08;letter-spacing:-.03em;max-width:560px}
.entry__title em{font-size:1.06em}
.entry__answer{margin-top:18px;max-width:520px;font-size:16px;line-height:1.4;color:var(--ink2);transition:color .35s}
.entry__more{margin-top:auto;padding-top:28px;color:var(--ink)}

/* ── 글 머리 — 크럼 · 표제(목록과 같은 낱말 하나만 세리프 이탤릭 · 지적 8) · 짧은 답 ── */
.art{padding:120px 8px 0}
.art__head{border-top:1px solid var(--line);padding-top:14px;transition:border-color .35s}
.art__crumb{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--g1);margin-bottom:26px}
.art__crumb a:hover{color:var(--ink)}
.art__title{font-size:calc(60 * var(--u));font-weight:300;line-height:1.02;letter-spacing:-.04em;max-width:1060px}
.art__title em{font-size:1.06em}
.art__lead{margin-top:28px;max-width:760px;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:var(--ink2);transition:color .35s}

/* ── 본문 격자 — 왼쪽 레일 461u(메타 + 목차 · sticky · 현재 절 검정) | 오른쪽 열(표지 955 · 글 600 · 넓은 그림 955) · 홈 sec__head 의 469u 오프셋과 같은 자리 ── */
.art__body{display:grid;grid-template-columns:calc(461 * var(--u)) minmax(0,1fr);column-gap:8px;margin-top:40px;align-items:start}
.art__rail{position:sticky;top:80px;align-self:start;min-width:0;padding:6px 40px 0 0}
.art__facts{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:baseline;font-size:13px;margin-bottom:26px}
.art__fact{display:contents}
.art__fact[hidden]{display:none} /* display:contents 가 hidden 을 덮었다(지적 2) — pack 이 게시일을 채우기 전엔 dt/dd 짝째 안 그린다 */
.art__facts dt{color:var(--g1)}
.art__facts dd{margin:0;color:var(--ink)}
.art__toc{border-top:1px solid var(--line);padding-top:12px;transition:border-color .35s}
.art__toc p{color:var(--g1);margin-bottom:8px}
.art__toc li{border-bottom:1px solid var(--line);transition:border-color .35s}
.art__toc a{display:block;padding:8px 0;font-size:13px;line-height:1.3;color:var(--g1);transition:color .35s}
.art__toc a:hover{color:var(--ink)}
.art__toc a.is-current{color:var(--ink);font-weight:500}
.art__main{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);column-gap:8px;min-width:0}
.art__main>*{grid-column:1;min-width:0}
.art__main>.fig--wide,.art__main>.tbl,.art__main>.figpair,.art__main>.loop--phone{grid-column:1 / -1}
.art__cover{margin:0 0 56px}
.art__cover img{width:100%;height:calc(612 * var(--u));object-fit:cover;border-radius:var(--r);background:#d8d6d1}
.prose p{font-size:17px;line-height:1.55;color:var(--ink2);margin:0 0 22px;transition:color .35s}
.prose p:last-child{margin-bottom:0}
.prose a{text-decoration:underline;text-decoration-color:var(--g2);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--ink)}
.prose strong{font-weight:500;color:var(--ink)}
.prose em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em}
/* 점검 행(2026-09-27 AD 지적 6) — 머리 메타 행(.art__facts)과 같은 어휘: 헤어라인 · 모노 라벨 왼쪽 · 값 오른쪽 · 문장은 본문 크기 · ≤767 은 라벨이 위로 */
.check{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 16px;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;margin:18px 0 22px;transition:border-color .35s}
.check__k{margin:0;color:var(--g1)}
.check__v{margin:0;font-size:17px;line-height:1.55;color:var(--ink);transition:color .35s}
@media (max-width:767px){.check{grid-template-columns:1fr;row-gap:6px}}
.art__main>h2{font-size:32px;font-weight:300;line-height:1.08;letter-spacing:-.03em;margin:calc(64 * var(--u)) 0 20px;scroll-margin-top:70px}
.art__main>h3{font-size:19px;font-weight:500;line-height:1.25;letter-spacing:-.015em;margin:34px 0 10px}
.art__main>h2+h3{margin-top:0}

/* 그림 — 캡션은 홈의 작은 라벨(mono 12px) + 13px 설명 */
.fig{margin:14px 0 40px}
.fig img{width:100%;height:auto;border-radius:var(--r);background:#d8d6d1}
.fig--portrait{max-width:460px}
.fig__cap{margin-top:10px;font-size:13px;line-height:1.45;color:var(--g1);max-width:600px;transition:color .35s}
.fig__cap .mono{display:block;margin-bottom:5px;color:var(--ink);transition:color .35s}
.fig__cap a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--g2)}
.fig__cap a:hover{color:var(--ink)}
.figpair{display:grid;grid-template-columns:1.6fr 1fr;gap:8px 16px;align-items:start;margin:14px 0 40px}
.figpair--two{grid-template-columns:1fr 1fr} /* 세로 사진 두 장 나란히(지적 6) · 둘 다 3/4 로 맞춰 밑선을 같이 — 욕실(2:3)은 아래 11% 가 잘린다(변기 쪽 · AD 지적 6 «세면대·거울 쪽으로») */
.figpair--two .fig img{aspect-ratio:3/4;object-fit:cover;object-position:50% 0}
.figpair--two .fig img[src*="lodging-bathroom"]{object-position:50% 100%} /* AD 재심 r1 지적 2 — 욕실은 아래(거울·세면대)를 남기고 위를 자른다 · 루프와 같은 크롭 */
.figpair .fig{margin:0}
.figpair .fig--portrait{max-width:none}

/* 표 — 899·1440: 자기 상자 안에서 가로 굴림 · ≤767: 행을 쌓는다(아래 375 절) */
.tbl{margin:8px 0 40px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--ink);transition:border-color .35s}
.tbl table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px;line-height:1.4}
.tbl th{text-align:left;padding:12px 20px 10px 0;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--g1);border-bottom:1px solid var(--line);vertical-align:bottom;transition:color .35s,border-color .35s}
.tbl td{padding:14px 20px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2);transition:color .35s,border-color .35s}
.tbl td:first-child{font-weight:500;color:var(--ink);width:26%}
.tbl th:last-child,.tbl td:last-child{padding-right:0}

/* 영상 — 세 겹(바탕색 · <img.loop__still> · video poster) · 프레임을 그린 뒤에만 정지 사진이 걷힌다 · 단추는 항상 보인다 */
.loop{margin:14px 0 40px}
.loop__box{position:relative;overflow:hidden;border-radius:var(--r);background:#d8d6d1;aspect-ratio:var(--ar,16/10)}
.loop__box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loop__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .5s ease}
.loop__still.is-off{opacity:0;pointer-events:none}
.loop__btn{position:absolute;left:12px;bottom:12px;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer}
.loop__btn:focus-visible{outline-color:#fff}
.loop.is-failed .loop__btn{display:none}
.loop--phone{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:end}
.loop--phone .loop__box{--ar:390/844}
.loop--phone .fig__cap{margin-top:0;padding-bottom:12px}
html.no-js .loop__still{opacity:1}
@media (prefers-reduced-motion:reduce){.loop__still{transition:none} .entry__media img,.loop__still{transition:none}}

/* ── 꼬리 — 1px 머리선 + 라벨(왼쪽 0) | 표제 · 문장 · 단추(469u 오프셋 = 본문 열) · 홈 sec__head 문법 · 카드 면 없음(지적 4) ── */
.art__end{margin-top:calc(90 * var(--u));border-top:1px solid var(--line);padding-top:14px;display:grid;grid-template-columns:calc(461 * var(--u)) minmax(0,1fr);column-gap:8px;transition:border-color .35s}
.art__end__label{color:var(--g1)}
.art__end__main{min-width:0}
.art__end h2{font-size:32px;font-weight:300;line-height:1.08;letter-spacing:-.03em;margin:0 0 22px;max-width:700px;scroll-margin-top:70px}
.art__end .loop{margin:0 0 34px;max-width:955px}
.art__end__p{max-width:600px;font-size:20px;line-height:1.35;letter-spacing:-.01em;color:var(--ink2);transition:color .35s}
.art__end__p a{text-decoration:underline;text-decoration-color:var(--g2);text-underline-offset:3px;text-decoration-thickness:1px}
.art__end__p a:hover{text-decoration-color:var(--ink)}
.art__end__p strong{font-weight:500;color:var(--ink)}
.art__sign{margin-top:16px;color:var(--g1)}
.art__btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.related{margin-top:calc(90 * var(--u));border-top:1px solid var(--line);padding-top:14px;transition:border-color .35s}
.related__head{position:relative;margin-bottom:34px;color:var(--g1)}
.related__count{position:absolute;right:0;top:0}
.ft{margin-top:40px} /* 관련 글 마지막 줄 → 발치: 40px(≤48 · 지적 4) */

/* ── 899 ── */
@media (max-width:1100px){
  .bl__title{font-size:44px}
  .entry{grid-template-columns:1fr;row-gap:18px;padding-bottom:36px}
  .entry__title{font-size:28px}
  .art__title{font-size:44px}
  .art__lead{font-size:19px}
  .art__body{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .art__rail{position:static;padding:0;margin-bottom:32px}
  .art__facts{margin-bottom:0}
  .art__toc{display:none}
  .art__main{grid-template-columns:minmax(0,1fr)}
  .art__main>*{grid-column:1;max-width:600px} /* 본문 자수 상한 — 640 은 75ch 였다(AD 기타 ⓒ) */
  .art__main>.fig--wide,.art__main>.tbl,.art__main>.figpair,.art__main>.loop--phone{grid-column:1;max-width:none}
  .art__cover{margin-bottom:44px}
  .art__cover img{height:auto;aspect-ratio:16/10}
  .fig--portrait{max-width:460px} /* .art__main>* 의 600 캡이 460 을 덮지 않게 재선언(지적 6) */
  .figpair .fig--portrait{max-width:none}
  .art__main>h2{margin-top:52px;font-size:28px}
  .art__end{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .art__end h2{font-size:28px}
  .art__end__p{font-size:18px}
  .ft{margin-top:40px}
}
/* ── 375 ── */
@media (max-width:767px){
  .bl,.art{padding-top:76px}
  .bl__head{margin-bottom:36px}
  .bl__title,.art__title{font-size:34px;line-height:1.05;letter-spacing:-.03em}
  .bl__intro{font-size:16px;margin-top:20px}
  .entry__meta{margin-bottom:12px}
  .entry__title{font-size:24px}
  .entry__answer{font-size:15px;margin-top:12px}
  .entry__more{padding-top:20px}
  .art__lead{font-size:17px;margin-top:20px}
  .art__body{margin-top:28px}
  .art__rail{margin-bottom:24px}
  .art__facts{font-size:12px;gap:6px 12px}
  .art__cover{margin-bottom:36px}
  .prose p{font-size:16px;line-height:1.55}
  .art__main>h2{font-size:26px;margin-top:44px}
  .art__main>h3{font-size:17px}
  .fig,.loop,.figpair{margin-bottom:32px}
  .fig--portrait{max-width:none}
  .figpair,.figpair--two{grid-template-columns:1fr;gap:20px}
  /* 표 쌓기 — 행 = 한 덩어리 · 첫 칸은 행 제목(500) · 나머지 칸은 mono 머리(data-th) 위 + 값 아래 · 1px 줄은 행 사이에만 · 가로 굴림 없음(지적 3) */
  .tbl{overflow:visible}
  .tbl table{display:block;min-width:0;width:100%;font-size:15px}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl thead tr,.tbl thead th{display:block;width:1px;padding:0;border:0;overflow:hidden}
  .tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl tr{padding:16px 0 18px;border-bottom:1px solid var(--line);transition:border-color .35s}
  .tbl td,.tbl td:first-child,.tbl td:last-child{padding:0;border:0;width:auto;position:static;background:none}
  .tbl td+td{margin-top:12px}
  .tbl td::before{content:attr(data-th);display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;color:var(--g1);margin-bottom:4px;transition:color .35s}
  .tbl td:first-child{font-size:17px;line-height:1.25}
  .tbl td:first-child::before{display:none}
  .loop--phone{grid-template-columns:1fr;gap:10px}
  .loop--phone .loop__box{max-width:300px}
  .loop__btn{height:36px;padding:0 12px;font-size:14px}
  .art__end{margin-top:60px;row-gap:18px}
  .art__end h2{font-size:24px;margin-bottom:16px}
  .art__end__p{font-size:16px}
  .art__btns{margin-top:22px}
  .related{margin-top:60px}
  .related__head{margin-bottom:24px}
  .ft{margin-top:32px}
}
/* 2026-09-29: the same editorial hierarchy, tuned for sustained reading. */
.bl__title,.art__title{font-size:clamp(36px,4.8vw,72px);font-weight:400;line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.bl__intro,.art__lead{font-size:clamp(17px,1.5vw,21px);font-weight:400;line-height:1.65;max-width:62ch;text-wrap:pretty}
.entry__title,.art__end h2{font-weight:400;line-height:1.3;letter-spacing:-.025em;text-wrap:balance}
.entry__answer,.prose p,.prose li{font-size:17px;line-height:1.75;max-width:68ch}
html[lang=ko] .art__title,html[lang=ja] .art__title,html[lang=ko] .bl__title,html[lang=ja] .bl__title{line-height:1.35;letter-spacing:-.025em}
html[lang=ko] .art__lead,html[lang=ja] .art__lead{line-height:1.85}
@media(max-width:767px){.entry__title{font-size:26px}.entry__answer,.prose p,.prose li{font-size:16px}}