/* ONYX 오닉 — 영등포. 「갈라지는 자리」: 한 줄기에서 두 갈래로 내려가는 룸 칸, 오닉스 층 무늬, 신호 주홍 한 색.
   design M002.P024.T133 시안 1판. 사진 칸은 모두 450px 이하(원본 450, 확대 없음). */
:root{
  --ink:#0c0c0e;--slab:#16161a;--slab2:#1d1d22;--bone:#ece8e1;--mute:#b4afa8;--dim:#8f8a84;--sig:#e2553f;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Noto Sans JP","Noto Sans SC","Malgun Gothic",sans-serif;
  --num:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --pad:clamp(20px,4.4vw,64px);
  --t:min(450px,31.25vw,50svh);--g:8px;
  --r1:12px;--r2:999px
}
*{box-sizing:border-box;margin:0}
html{background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:16px;line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-text-size-adjust:100%}
body{font-size:16px}
html:lang(en) body{word-break:normal}
html:lang(ja) body,html:lang(zh) body{word-break:normal;line-break:strict}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--bone);outline-offset:3px;border-radius:6px}
.ox-skip{position:absolute;left:-9999px}
.ox-skip:focus{left:16px;top:16px;z-index:50;background:var(--bone);color:var(--ink);padding:8px 14px;border-radius:var(--r2)}

/* 머리말 */
.ox-top{position:absolute;inset:0 0 auto 0;height:72px;display:flex;align-items:center;justify-content:space-between;padding-left:var(--pad);padding-right:var(--pad);z-index:6}
.ox-mark{display:block;width:132px;height:auto}
.ox-mark-link{display:block;text-decoration:none}
.ox-lang{display:flex;gap:2px;background:rgba(12,12,14,.78);border-radius:var(--r2);padding:4px}
.ox-lang a{display:block;padding:8px 13px;border-radius:var(--r2);text-decoration:none;font-size:15px;line-height:1.2;color:var(--bone)}
.ox-lang a[aria-current]{background:var(--bone);color:var(--ink);font-weight:700}

/* 첫 화면(2판): 오른쪽 곧은 갈래(전 높이 두 칸) · 가운데 한 계단 아래(두 칸) · 왼쪽 글 아래 둘째 계단(두 칸, 1680 이상 세 칸). 칸마다 450 이하. */
.ox-hero{position:relative;height:clamp(600px,100svh,1000px);background-color:var(--ink);
  background-image:radial-gradient(ellipse 42% 46% at 58% 46%,rgba(226,85,63,.20),rgba(226,85,63,0)),
    radial-gradient(ellipse 60% 70% at 18% 22%,rgba(236,232,225,.07),rgba(236,232,225,0)),
    repeating-linear-gradient(180deg,rgba(236,232,225,.05) 0 1px,rgba(236,232,225,0) 1px 26px)}
.ox-tile{position:relative;margin:0;overflow:hidden;flex:1 1 0;min-width:0;min-height:0;max-width:450px;max-height:450px}
.ox-tile img{width:100%;height:100%;object-fit:cover}
.ox-r1{position:absolute;right:0;top:0;bottom:0;width:min(25.7%,450px);display:flex;flex-direction:column;gap:var(--g)}
.ox-r2{position:absolute;right:calc(min(25.7%,450px) + var(--g));top:13.3%;bottom:72px;width:min(31.25%,450px);display:flex;flex-direction:column;gap:var(--g)}
.ox-tC{flex:0 0 min(450px,58%)}
.ox-left{position:absolute;left:0;top:0;bottom:72px;width:calc(100% - min(25.7%,450px) - min(31.25%,450px) - 2 * var(--g));display:flex;flex-direction:column;gap:20px}
.ox-steps{flex:1 1 0;min-height:0;max-height:450px;display:flex;gap:var(--g)}
.ox-tG{display:none}
.ox-ai{position:absolute;right:10px;bottom:10px;background:rgba(12,12,14,.86);color:var(--bone);font-size:13px;line-height:1.3;padding:4px 9px;border-radius:var(--r2)}
.ox-lead{padding-top:92px;padding-left:var(--pad);padding-right:24px;display:flex;flex-direction:column;gap:10px}
.ox-kicker{font-size:13px;letter-spacing:.18em;color:var(--mute);text-transform:uppercase}
.ox-h1{font-weight:800;line-height:1.06;letter-spacing:-.025em}
.ox-h1 .l1{display:block;font-size:clamp(26px,3vw,44px);color:var(--mute);font-weight:700;margin-bottom:6px}
.ox-h1 .l2{display:block;font-size:clamp(58px,6.7vw,96px)}
.ox-h1 .l2 b{color:var(--sig);font-weight:800}
.ox-sub{font-family:var(--num);font-style:italic;color:var(--mute);font-size:18px}
.ox-intro{color:var(--bone);max-width:30em}
.ox-acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.ox-btn{display:inline-block;background:var(--sig);color:var(--ink);font-weight:800;font-size:18px;line-height:1.2;padding:16px 28px;border-radius:var(--r2);text-decoration:none;box-shadow:0 10px 30px rgba(226,85,63,.28)}
.ox-btn:hover{background:#ec6a55}
.ox-tlink{font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.ox-band{position:absolute;left:var(--pad);right:calc(min(25.7%,450px) + 32px);bottom:14px;display:flex;flex-wrap:wrap;gap:6px 40px;z-index:2}
.ox-band dt{font-size:13px;color:var(--dim)}
.ox-band dd{font-size:17px;font-weight:700}
.ox-band .lg a{margin-right:12px;text-decoration:none}
.ox-band .lg a[aria-current]{text-decoration:underline;text-underline-offset:4px}

/* 절 공통 */
.ox-sec{padding:128px var(--pad) 112px;position:relative}
.ox-sec h2{font-size:clamp(30px,3.6vw,52px);line-height:1.12;letter-spacing:-.025em;font-weight:800;margin-bottom:28px;max-width:16em}
.ox-sec h2 small{display:block;font-family:var(--num);font-style:italic;font-weight:400;font-size:18px;letter-spacing:0;color:var(--dim);margin-bottom:10px}
.ox-note{color:var(--mute);max-width:42em}

/* 룸 */
.ox-rooms .ox-grid{display:grid;grid-template-columns:repeat(3,minmax(0,420px));gap:28px;justify-content:start}
.ox-rooms figure{margin:0}
.ox-rooms figure:nth-child(3n+2){margin-top:56px}
.ox-rooms figure:nth-child(3n){margin-top:112px}
.ox-rooms img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.ox-rooms figcaption{color:var(--mute);margin-top:10px;max-width:26em}
.ox-more{margin-top:48px}
.ox-more summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none}
.ox-more summary::-webkit-details-marker{display:none}
.ox-more .ox-grid2{display:grid;grid-template-columns:repeat(5,minmax(0,240px));gap:16px;margin-top:24px}
.ox-more figure{margin:0}
.ox-more img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.ox-more figcaption{color:var(--mute);margin-top:6px;font-size:16px}

/* 요금 */
.ox-price{background:var(--slab)}
.ox-price table{display:block;width:100%}
.ox-price tbody{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.ox-price tr{display:flex;flex-direction:column;gap:6px}
.ox-price th,.ox-price td{display:block;text-align:left}
.ox-price th{color:var(--mute);font-weight:600;font-size:17px}
.ox-price td{font-family:var(--num);font-size:clamp(38px,4.6vw,68px);line-height:1;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.ox-price td span{color:var(--sig)}

/* 숫자 띠 */
.ox-numbers{background-color:var(--slab2);background-image:repeating-linear-gradient(180deg,rgba(236,232,225,.04) 0 1px,rgba(236,232,225,0) 1px 18px)}
.ox-numbers .ox-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.ox-num b{display:block;font-family:var(--num);font-weight:400;font-size:clamp(60px,7.4vw,124px);line-height:.95;font-variant-numeric:lining-nums;letter-spacing:-.02em}
.ox-num b i{font-style:normal;font-size:.42em;margin-left:4px;color:var(--mute)}
.ox-num span{display:block;margin-top:14px}
.ox-num cite{display:block;color:var(--dim);font-style:normal;font-size:16px;margin-top:4px}

/* 영등포역 일대 */
.ox-area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
.ox-area ol{list-style:none;padding:0;display:grid;gap:6px;counter-reset:st}
.ox-area li{background:var(--slab);border-radius:var(--r1);padding:22px 26px;display:grid;grid-template-columns:44px 1fr;gap:2px 18px}
.ox-area li::before{counter-increment:st;content:counter(st,decimal-leading-zero);font-family:var(--num);color:var(--sig);font-size:20px;grid-row:1/3}
.ox-area .nm{font-weight:800;font-size:20px}
.ox-area .ad{color:var(--mute)}
.ox-area .src{color:var(--dim);font-size:16px;margin-top:18px}

/* 오시는 길 */
.ox-visit{background:var(--slab);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.ox-addr{font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.2;margin-bottom:22px}
.ox-visit .ox-acts{flex-direction:column;align-items:flex-start;gap:16px}
.ox-copy{background:none;border:0;color:var(--bone);font:inherit;font-weight:700;font-size:17px;padding:10px 0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ox-map{margin:0;background:var(--slab2);border-radius:var(--r1);padding:18px}
.ox-map svg{display:block;width:100%;height:auto}
.ox-map figcaption{color:var(--mute);font-size:16px;margin-top:10px}

/* 주차 */
.ox-parking dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ox-parking dt{color:var(--dim);font-size:16px}
.ox-parking dd{font-size:clamp(20px,1.8vw,26px);font-weight:700;line-height:1.35;margin-top:6px}
.ox-parking p{margin-top:32px}

/* 언어 */
.ox-langs{background:var(--slab2)}
.ox-langs ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 32px}
.ox-langs a{display:block;text-decoration:none;padding:18px 0}
.ox-langs b{display:block;font-size:clamp(34px,3.8vw,58px);font-weight:800;line-height:1.1}
.ox-langs span{display:block;color:var(--mute);margin-top:6px}
.ox-langs a[aria-current] b{color:var(--sig)}

/* 연락 */
.ox-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;background-color:var(--ink);background-image:radial-gradient(ellipse 50% 80% at 85% 100%,rgba(226,85,63,.18),rgba(226,85,63,0))}
.ox-contact{grid-template-columns:minmax(0,1fr) minmax(0,640px);align-items:center}
.ox-film{position:relative;margin:0;border-radius:6px;overflow:hidden;max-width:640px;background:var(--slab)}
.ox-film video{display:block;width:100%;height:auto;aspect-ratio:832/464;object-fit:cover}
.ox-vbtn{position:absolute;left:10px;bottom:10px;background:rgba(12,12,14,.86);color:var(--bone);border:0;font:inherit;font-size:14px;font-weight:700;line-height:1.2;padding:12px 16px;min-height:44px;border-radius:var(--r2);cursor:pointer}
.ox-bigtel{font-family:var(--num);font-size:clamp(42px,6.4vw,96px);line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums}

/* FAQ */
.ox-faq .ox-qs{max-width:980px;display:grid;gap:8px}
.ox-faq details{background:var(--slab);border-radius:var(--r1);padding:20px 26px}
.ox-faq summary{font-weight:700;font-size:18px;cursor:pointer;line-height:1.45}
.ox-faq details p{color:var(--mute);margin-top:10px}
.ox-faq .src{color:var(--dim);font-size:16px}

/* 푸터 */
.ox-foot{padding:72px var(--pad) 128px;background:#08080a;color:var(--mute);display:grid;gap:18px}
.ox-foot .ox-mark{width:112px}
.ox-foot nav a{margin-right:18px}
.ox-prov{background:var(--slab);border-radius:var(--r1);padding:20px 26px;display:grid;gap:8px;max-width:780px}
.ox-prov .links{display:flex;gap:24px;flex-wrap:wrap}
.ox-prov summary{cursor:pointer}
.ox-prov code{word-break:break-all;font-size:16px}

/* 붙는 연락 */
.ox-dock{position:fixed;right:24px;bottom:24px;z-index:20;display:none}
.ox-dock.on{display:block}
.ox-dock .ox-tg{display:none}

/* 404 */
.ox-404{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:64px var(--pad)}

@media (min-width:1680px){
  .ox-tG{display:block}
}
@media (max-width:1099px){
  .ox-hero{height:auto;display:grid;grid-template-columns:var(--pad) repeat(3,minmax(0,1fr)) var(--pad);column-gap:var(--g);padding-top:88px;padding-bottom:32px}
  .ox-r1,.ox-r2,.ox-left,.ox-steps{display:contents}
  .ox-tile{flex:none;aspect-ratio:1/1;max-height:none}
  .ox-tA{grid-column:4;grid-row:1}
  .ox-tC{grid-column:3;grid-row:1;margin-top:18%}
  .ox-tE{grid-column:2;grid-row:1;margin-top:36%}
  .ox-tB,.ox-tD,.ox-tF,.ox-tG{display:none}
  .ox-lead{grid-column:2/5;grid-row:2;margin-top:32px;padding-top:0;padding-left:0;padding-right:0}
  .ox-band{position:static;grid-column:2/5;grid-row:3;margin-top:24px}
  .ox-rooms .ox-grid{grid-template-columns:repeat(2,minmax(0,420px))}
  .ox-rooms figure:nth-child(3n),.ox-rooms figure:nth-child(3n+2){margin-top:0}
  .ox-rooms figure:nth-child(2n){margin-top:48px}
  .ox-more .ox-grid2{grid-template-columns:repeat(3,minmax(0,240px))}
  .ox-area,.ox-visit{grid-template-columns:minmax(0,1fr);gap:32px}
  .ox-price tbody,.ox-numbers .ox-row,.ox-langs ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ox-contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:460px){
  .ox-top{height:60px}
  .ox-mark{width:96px}
  .ox-lang a{padding:7px 9px;font-size:14px}
  .ox-hero{grid-template-columns:62fr 38fr;grid-template-rows:min(240px,30svh) minmax(min(400px,48svh),auto) auto;gap:6px;padding-top:0;padding-bottom:8px}
  .ox-tile{aspect-ratio:auto;max-width:none}
  .ox-tA{grid-column:1/-1;grid-row:1}
  .ox-tC{grid-column:1;grid-row:2;margin-top:0}
  .ox-tE{grid-column:2;grid-row:2;margin-top:0}
  .ox-lead{position:relative;z-index:2;grid-column:1/-1;grid-row:2;align-self:end;margin-top:0;padding:72px var(--pad) 18px;gap:8px;
    background-image:linear-gradient(180deg,rgba(12,12,14,.5),rgba(12,12,14,.95) 30%)}
  .ox-h1 .l1{font-size:24px}
  .ox-h1 .l2{font-size:60px}
  .ox-sub{display:none}
  .ox-intro{font-size:16px}
  .ox-btn{font-size:17px;padding:14px 22px}
  .ox-band{grid-column:1/-1;grid-row:3;margin-top:14px;padding-left:var(--pad);padding-right:var(--pad);flex-wrap:wrap;gap:4px 12px}
  .ox-band dt{font-size:12px}
  .ox-band dd{font-size:14px;white-space:nowrap}
  .ox-band .lg a{margin-right:4px}
  .ox-band .lg a:last-child{margin-right:0}
  .ox-sec{padding:80px var(--pad) 72px}
  .ox-rooms .ox-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .ox-rooms figure:nth-child(2n){margin-top:0}
  .ox-more .ox-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ox-price tbody{gap:24px 16px}
  .ox-price td{font-size:34px}
  .ox-numbers .ox-row{gap:28px 16px}
  .ox-parking dl{grid-template-columns:minmax(0,1fr);gap:20px}
  .ox-area li{padding:18px 20px;grid-template-columns:34px 1fr;gap:2px 12px}
  .ox-contact{grid-template-columns:minmax(0,1fr)}
  .ox-dock{left:0;right:0;bottom:0;background:var(--bone);padding:10px 16px;display:none;align-items:center;gap:12px}
  .ox-dock.on{display:flex}
  .ox-dock .ox-btn{flex:1;text-align:center;box-shadow:none;padding:13px 0;font-size:17px}
  .ox-dock .ox-tg{display:block;color:var(--ink);font-weight:800;text-decoration:none;padding:12px 4px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}