/* 객실안내 리디자인(덴가차야 /Rooms·객실 6) — owner: claude-rooms-redesign, 2026-10-02.
 * 발상: 오사카 동네의 따뜻한 집 — 라이트-웜 바탕, 사진 우선 비대칭(큰 사진 + 정보 레일),
 * 서체(2026-10-02 desmell): 원본 브랜드 KoPubDotum 단일 — 제목은 굵기·크기로(명조 제거). --cr-serif 이름은 호환용으로 남김(값=고딕).
 * 느린 페이드 최소 모션, 손으로 넘기는 갤러리. 브랜드 갈색은 버튼·링크·구분선에만.
 * 범위: .cr 아래만. 원본(아임웹) 전역 규칙과 겹치지 않도록 .cocone-main .cr 로 한정한다. */
.cocone-main .cr{
 --cr-paper:#f7f2ea;--cr-paper-deep:#efe7dc;--cr-ink:#2a211c;--cr-muted:#655850;--cr-line:rgba(42,33,28,.14);
 --cr-accent:#7a2900;--cr-accent-hover:#5e2000;--cr-gutter:clamp(16px,4.4vw,64px);
 --cr-serif:var(--cocone-sans);
 background:var(--cr-paper);color:var(--cr-ink);font-size:16px;line-height:1.8;
 padding:0 var(--cr-gutter) clamp(56px,7vw,112px);box-sizing:border-box;word-break:keep-all;overflow-wrap:anywhere
}
.cocone-main .cr[lang=ja]{--cr-serif:var(--cocone-sans-ja);font-family:var(--cocone-sans-ja);word-break:normal;line-break:strict}
.cocone-main .cr *,.cocone-main .cr *::before,.cocone-main .cr *::after{box-sizing:border-box}
.cocone-main .cr :is(h1,h2,h3,p,ul,dl,dd,figure){margin:0;padding:0}
.cocone-main .cr ul{list-style:none}
.cocone-main .cr a{color:inherit;text-decoration:none}
.cocone-main .cr-display{font-family:var(--cr-serif);font-weight:700;letter-spacing:-.01em;line-height:1.28;color:var(--cr-ink)}
.cocone-main .cr-heading{font-family:var(--cr-serif);font-weight:700;font-size:clamp(20px,1.7vw,24px);line-height:1.4}
.cocone-main .cr a:focus-visible,.cocone-main .cr button:focus-visible,.cocone-main .cr [tabindex]:focus-visible{outline:2px solid var(--cr-accent);outline-offset:3px}

/* ── 링크 공통: 밑줄이 따라오는 텍스트 링크 */
.cocone-main .cr-more{display:inline-flex;align-items:center;min-height:44px;color:var(--cr-accent);font-size:15px;font-weight:500;
 text-decoration:underline;text-decoration-color:rgba(122,41,0,.35);text-underline-offset:6px;text-decoration-thickness:1px;transition:text-decoration-color .18s ease,color .18s ease}
.cocone-main .cr-more:hover{color:var(--cr-accent-hover);text-decoration-color:currentColor}

/* ── 목록(/Rooms) */
.cocone-main .cr-intro{max-width:1320px;margin:0 auto;padding:clamp(40px,6vw,96px) 0 clamp(32px,4vw,64px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;border-bottom:1px solid var(--cr-line)}
.cocone-main .cr-intro .cr-display{font-size:clamp(34px,4.6vw,64px)}
.cocone-main .cr-intro-note{color:var(--cr-muted);font-size:15px;max-width:30em}
.cocone-main .cr-list{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,32px);row-gap:clamp(56px,7vw,120px);padding-top:clamp(40px,5vw,88px)}
.cocone-main .cr-entry{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:end;row-gap:22px}
.cocone-main .cr-entry-media{position:relative;display:block;overflow:hidden;background:var(--cr-paper-deep)}
.cocone-main .cr-entry-media img{object-fit:cover;transition:transform .22s ease}
.cocone-main .cr-entry:hover .cr-entry-media img{transform:scale(1.01)}
.cocone-main .cr-entry-name{font-family:var(--cr-serif);font-weight:700;font-size:clamp(24px,2.3vw,34px);line-height:1.3;letter-spacing:-.01em}
.cocone-main .cr-entry-name a{display:inline-block;padding:7px 0;transition:color .18s ease}
.cocone-main .cr-entry-name a:hover{color:var(--cr-accent)}
.cocone-main .cr-entry-facts{display:grid;gap:4px;margin:14px 0 10px;font-size:15px}
.cocone-main .cr-entry-facts div{display:flex;gap:14px}
.cocone-main .cr-entry-facts dt{color:var(--cr-muted);min-width:4.5em;flex-shrink:0}
.cocone-main .cr-entry-summary{color:var(--cr-muted);font-size:15px;line-height:1.75;max-width:30em;margin-bottom:6px}
/* 리듬: lead(큰 사진 왼쪽) · offset(작은 사진 오른쪽, 글 왼쪽) · band(가로 띠) · mirror(큰 사진 오른쪽) · pair(크기 다른 둘) */
.cocone-main .cr-entry--lead .cr-entry-media{grid-column:1/9;aspect-ratio:4/3}
.cocone-main .cr-entry--lead .cr-entry-text{grid-column:9/13;padding-bottom:8px}
.cocone-main .cr-entry--offset .cr-entry-media{grid-column:6/12;grid-row:1;aspect-ratio:5/4}
.cocone-main .cr-entry--offset .cr-entry-text{grid-column:2/6;grid-row:1;align-self:start;padding-top:12%}
.cocone-main .cr-entry--band .cr-entry-media{grid-column:1/-1;aspect-ratio:21/9}
.cocone-main .cr-entry--band .cr-entry-text{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);column-gap:clamp(16px,2.2vw,32px);align-items:start;border-top:1px solid var(--cr-line);padding-top:20px}
.cocone-main .cr-entry--band .cr-entry-facts{margin:6px 0 0}
.cocone-main .cr-entry--band .cr-entry-summary{grid-column:1;grid-row:2}
.cocone-main .cr-entry--band .cr-more{grid-column:3;grid-row:1;justify-self:end}
.cocone-main .cr-entry--mirror .cr-entry-media{grid-column:5/13;grid-row:1;aspect-ratio:3/2}
.cocone-main .cr-entry--mirror .cr-entry-text{grid-column:1/5;grid-row:1;padding-bottom:8px}
.cocone-main .cr-entry--pair-a{grid-column:1/8}
.cocone-main .cr-entry--pair-b{grid-column:8/13;align-self:start;margin-top:clamp(40px,8vw,140px)}
.cocone-main .cr-entry--pair-a,.cocone-main .cr-entry--pair-b{display:flex;flex-direction:column;align-items:stretch;row-gap:22px}
.cocone-main .cr-entry--pair-a .cr-entry-media{aspect-ratio:4/3}
.cocone-main .cr-entry--pair-b .cr-entry-media{aspect-ratio:4/5}

/* ── 상세: 객실 전환 줄 */
.cocone-main .cr-switch{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:8px 28px;border-bottom:1px solid var(--cr-line);font-size:15px}
.cocone-main .cr-switch-all{flex-shrink:0;display:inline-flex;align-items:center;min-height:56px;color:var(--cr-muted);transition:color .18s ease}
.cocone-main .cr-switch-all:hover{color:var(--cr-accent)}
.cocone-main .cr-switch ul{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin-left:auto}
.cocone-main .cr-switch ul::-webkit-scrollbar{display:none}
.cocone-main .cr-switch li a{display:inline-flex;align-items:center;min-height:56px;color:var(--cr-muted);border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.cocone-main .cr-switch li a:hover{color:var(--cr-ink)}
.cocone-main .cr-switch li a[aria-current=page]{color:var(--cr-ink);border-bottom-color:var(--cr-accent)}

/* ── 상세: 사진(왼쪽 큰 면) + 정보 레일(오른쪽, 따라옴) */
.cocone-main .cr-stage{max-width:1320px;margin:0 auto;padding-top:clamp(24px,3vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);column-gap:clamp(28px,4vw,72px);align-items:start}
.cocone-main .cr-stage-media{grid-column:1;grid-row:1;min-width:0}
.cocone-main .cr-rail{grid-column:2;grid-row:1/span 3;position:sticky;top:124px;padding-top:4px}
.cocone-main .cr-rail-name{font-size:clamp(30px,2.8vw,42px)}
.cocone-main .cr-rail-facts{margin:32px 0 30px;border-top:1px solid var(--cr-line)}
.cocone-main .cr-rail-facts div{display:grid;grid-template-columns:minmax(5.5em,max-content) minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--cr-line);font-size:15px;line-height:1.65}
.cocone-main .cr-rail-facts dt{color:var(--cr-muted)}
.cocone-main .cr-rail-facts dd{display:flex;flex-direction:column}
.cocone-main .cr-rail-facts small{font-size:15px;color:var(--cr-muted)}
.cocone-main .cr-book{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 24px;background:var(--cr-accent);color:#fff!important;font-size:16px;font-weight:500;letter-spacing:.02em;border-radius:2px;transition:background-color .18s ease}
.cocone-main .cr-book:hover{background:var(--cr-accent-hover)}
.cocone-main .cr-rail-note{margin-top:16px;font-size:15px;line-height:1.7;color:var(--cr-muted)}
.cocone-main .cr-rail-note a{display:inline-flex;align-items:center;min-height:44px;color:var(--cr-accent);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(122,41,0,.35)}
.cocone-main .cr-about{grid-column:1;padding-top:clamp(40px,5vw,72px);max-width:38em;display:grid;gap:1.1em;font-size:16.5px;line-height:1.9}
.cocone-main .cr[lang=en] .cr-about{line-height:1.75}
.cocone-main .cr-amenities{grid-column:1;margin-top:clamp(40px,5vw,72px);padding-top:28px;border-top:1px solid var(--cr-line)}
.cocone-main .cr-amenities ul{margin-top:18px;columns:3 12em;column-gap:32px;font-size:15px;line-height:1.6}
.cocone-main .cr-amenities li{break-inside:avoid;padding:7px 0;border-bottom:1px solid rgba(42,33,28,.07)}

/* ── 갤러리: 손으로 넘김(스냅) */
.cocone-main .cr-gallery{--cr-gh:clamp(340px,64vh,660px)}
.cocone-main .cr-gallery-track{display:flex;gap:10px;height:var(--cr-gh);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;animation:cr-fade .7s ease both}
.cocone-main .cr-gallery-track::-webkit-scrollbar{display:none}
.cocone-main .cr-gallery-slide{position:relative;flex:0 0 auto;height:100%;max-width:100%;scroll-snap-align:start;background:var(--cr-paper-deep);overflow:hidden}
.cocone-main .cr-gallery-slide img{object-fit:cover}
.cocone-main .cr-gallery-bar{display:flex;align-items:center;gap:6px;margin-top:12px}
.cocone-main .cr-gallery-bar button{width:48px;height:44px;border:1px solid var(--cr-line);background:transparent;color:var(--cr-ink);font-size:18px;cursor:pointer;border-radius:2px;transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.cocone-main .cr-gallery-bar button:hover:not(:disabled){border-color:var(--cr-accent);color:var(--cr-accent)}
.cocone-main .cr-gallery-bar button:disabled{color:rgba(42,33,28,.3);cursor:default}
.cocone-main .cr-gallery-count{order:-1;margin-right:auto;font-size:15px;color:var(--cr-muted);font-variant-numeric:tabular-nums}
.cocone-main .cr-gallery-count span{color:var(--cr-ink)}
@keyframes cr-fade{from{opacity:0}to{opacity:1}}

/* ── 상세: 다른 객실(목록과 다른 패턴 — 가로줄 리스트) */
.cocone-main .cr-others{max-width:1320px;margin:clamp(72px,8vw,128px) auto 0}
.cocone-main .cr-others ul{margin-top:18px;border-top:1px solid var(--cr-line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.cocone-main .cr-others li a{display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--cr-line);transition:background-color .18s ease}
.cocone-main .cr-others-thumb{grid-row:1/3;position:relative;width:96px;aspect-ratio:4/3;overflow:hidden;background:var(--cr-paper-deep)}
.cocone-main .cr-others-thumb img{object-fit:cover}
.cocone-main .cr-others-name{font-family:var(--cr-serif);font-size:18px;line-height:1.4;align-self:end}
.cocone-main .cr-others-meta{grid-column:2;font-size:15px;color:var(--cr-muted);align-self:start}
.cocone-main .cr-others-go{grid-column:3;grid-row:1/3;color:var(--cr-accent);transition:transform .18s ease}
.cocone-main .cr-others li a:hover .cr-others-name{color:var(--cr-accent)}
.cocone-main .cr-others li a:hover .cr-others-go{transform:translateX(3px)}

/* ── 태블릿 */
@media (max-width:1023px){
 .cocone-main .cr-stage{grid-template-columns:minmax(0,1fr)}
 .cocone-main .cr-rail{grid-column:1;grid-row:auto;position:static;padding-top:28px}
 .cocone-main .cr-rail-name{font-size:clamp(28px,5vw,38px)}
 .cocone-main .cr-switch ul{margin-left:0}
}
/* ── 모바일: 한 줄 흐름, 사진 크기만 바꿔 리듬 */
@media (max-width:767px){
 .cocone-main .cr{font-size:16px}
 .cocone-main .cr-intro{padding:36px 0 24px}
 .cocone-main .cr-list{display:flex;flex-direction:column;row-gap:56px;padding-top:32px}
 .cocone-main .cr-entry,.cocone-main .cr-entry--pair-a,.cocone-main .cr-entry--pair-b{display:flex;flex-direction:column;align-items:stretch;row-gap:16px;margin-top:0}
 .cocone-main .cr-entry-text{padding:0!important}
 .cocone-main .cr-entry .cr-entry-media{margin:0 calc(var(--cr-gutter) * -1);aspect-ratio:4/3}
 .cocone-main .cr-entry--offset .cr-entry-media,.cocone-main .cr-entry--pair-b .cr-entry-media{margin:0 0 0 18%;aspect-ratio:4/5}
 .cocone-main .cr-entry--band .cr-entry-media{aspect-ratio:16/10}
 .cocone-main .cr-entry--band .cr-entry-text{display:block;border-top:0;padding-top:0}
 .cocone-main .cr-entry--offset .cr-entry-text,.cocone-main .cr-entry--pair-b .cr-entry-text{padding-left:18%!important}
 .cocone-main .cr-entry-facts div{gap:10px}
 .cocone-main .cr-switch{flex-direction:column;align-items:stretch;gap:0;margin:0 calc(var(--cr-gutter) * -1);padding:0 var(--cr-gutter)}
 .cocone-main .cr-switch-all{min-height:48px;border-bottom:1px solid var(--cr-line)}
 .cocone-main .cr-switch ul{gap:22px}
 .cocone-main .cr-switch li a{min-height:52px}
 .cocone-main .cr-stage{padding-top:24px}
 .cocone-main .cr-stage-media{margin:0 calc(var(--cr-gutter) * -1)}
 .cocone-main .cr-gallery{--cr-gh:min(78vw,420px)}
 .cocone-main .cr-gallery-track{gap:6px;scroll-padding-left:var(--cr-gutter);padding:0 var(--cr-gutter)}
 .cocone-main .cr-gallery-bar{padding:0 var(--cr-gutter)}
 .cocone-main .cr-amenities ul{columns:2 9em}
 .cocone-main .cr-others ul{grid-template-columns:minmax(0,1fr)}
 .cocone-main .cr-others li a{grid-template-columns:84px minmax(0,1fr) auto;column-gap:16px}
 .cocone-main .cr-others-thumb{width:84px}
}
@media (prefers-reduced-motion:reduce){
 .cocone-main .cr *{animation:none!important;transition:none!important}
 .cocone-main .cr-gallery-track{scroll-behavior:auto}
}