/* Korean edition of Casa Ondina — loads after the approved style.css and changes only what Korean text needs.
   Latin brand type (Fraunces · Work Sans, CASA/Ondina logo) stays first in every stack; Hangul falls through to
   a self-hosted IBM Plex Sans KR subset (OFL 1.1, renamed per the Reserved Font Name rule; licence in assets/fonts/OFL.txt). */
@font-face{font-family:"Arupix Concept KO";src:url(assets/fonts/ibmplexsanskr-400.woff2?v=20261005koallv3) format("woff2");font-weight:100 449;font-style:normal;font-display:swap}
@font-face{font-family:"Arupix Concept KO";src:url(assets/fonts/ibmplexsanskr-500.woff2?v=20261005koallv3) format("woff2");font-weight:450 900;font-style:normal;font-display:swap}
html{font-synthesis:none}
body{font-family:"Work Sans","Arupix Concept KO",system-ui,-apple-system,"Segoe UI",sans-serif;word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.display,.menu a{font-family:"Fraunces","Arupix Concept KO",Georgia,serif;letter-spacing:-.01em;line-height:1.16}
.menu-follow a{font-family:"Work Sans","Arupix Concept KO",sans-serif}
/* Tracked uppercase labels read as gaps in Hangul — keep the size, drop most of the tracking. */
.pill,.arrow-link,.facts li{letter-spacing:.02em}
.hero-title{line-height:1.14}
.lines .line{padding-bottom:.04em}
.tr-text p,.duo-lead p,.duo-tail p,.shop-foot p{line-height:1.75}
/* Touch targets ≥44px without changing the drawn controls: an invisible hit area around each small control. */
.burger,.lang,.icon{position:relative}
.burger::after,.lang::after,.icon::after{content:"";position:absolute;inset:-13px -10px}
/* 2026-10-05 R2 — at short desktop heights (root: 1440×900 trays copy ended at y924) the Korean copy needs room: cap the tray card height. Base style.css untouched. */
@media(min-width:1024px){#trays .card{height:min(56vh,calc(100vh - 350px))}}
/* 2026-10-05 full review — headings wrap at Korean phrase boundaries (no forced <br>); the hero is one sentence in one .line. */
.display,.hero-title .line b{text-wrap:balance;word-break:keep-all}
/* Header: visible «한국어» language button and a real language list (한국어 current · English original). */
.lang{letter-spacing:.02em;text-transform:none}
.langlist{left:auto;right:0;padding:4px 12px;color:var(--ink);letter-spacing:.02em;text-transform:none;font-family:"Work Sans","Arupix Concept KO",sans-serif}
.langlist li{padding:0}
.langlist a{display:flex;align-items:center;min-height:44px;padding:0 6px;color:var(--ink);text-decoration:none;white-space:nowrap}
.langlist a:hover{text-decoration:underline}
.langlist a[aria-current="page"]{font-weight:600}
body.menu-open .langlist,body.menu-open .langlist a{color:var(--ink)}
/* Burger + «단체 주문» pill do not fit the 96px-logo grid at ≤360px; the menu still lists 단체 주문. */
@media (max-width:360px){.head-left .pill{display:none}}
/* Menu: scrolls inside itself on short / landscape screens instead of clipping. */
.menu{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain}
@media (max-height:520px){.menu{padding-top:80px;padding-bottom:32px}.menu-cols a{font-size:24px;padding:5px 0}}
/* Visible keyboard focus in the board's own palette. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.menu :focus-visible,body.menu-open .site-head :focus-visible{outline-color:var(--cream)}
.langlist :focus-visible{outline-color:var(--ink)}
main:focus{outline:none}
/* Narrow screens scroll normally: keep anchored content clear of the fixed header. */
@media (max-width:1023px){.slide,#contact{scroll-margin-top:72px}}
@media (max-width:480px){.slide,#contact{scroll-margin-top:68px}}

/* ==== 2026-10-05 MOBILE-R3 — phone (≤767) and tablet (768–1023). Replaces the R2 block as one system.
   User: «폰트는 괜찮은 듯 하다. 다만 UI 자체가 너무 별로이다. 글로만 너무 가득 채워져있는 느낌에 리듬도 별로 없다».
   Type roles, header, hero, menu are R2 values unchanged. Sections are re-composed per meaning:
   hero → bakery (photo + flavour list) → coffee (portrait photo beside a drink menu, peach tint) →
   group orders (peach photo region) → breakfast (heading+hours, photo, dish list) → terrace (full-bleed pause) → visit rows → footer.
   On small screens the long desktop paragraphs are replaced by the .m-only blocks (same facts, shorter, root-reviewed copy);
   desktop (≥1024) never shows .m-only and is the approved scene layout, untouched. Spacing scale (4px base):
   --s1 4 · --s2 8 · --s3 12 · --s4 16 · --s6 24 · --s8 32 · --s10 40 · --s12 48 · --s14 56. ==== */
::selection{background:var(--blue);color:var(--ink)}
.hero-cta,.hero-hours,.vk,.card figcaption,.foot-top,.m-only{display:none}

@media (max-width:1023px){
  :root{--mg:20px;--hd:56px;--h1:clamp(22px,6vw,24px);--h2:clamp(19px,5.2vw,20px);--body:15px;--ui:14px;--label:12.5px;--small:13.5px;--fine:12px;--line:rgba(23,55,45,.14);
    --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s14:56px;--tint:#f8e6dc}

  /* Header (R2 values). */
  body{padding-top:calc(var(--hd) + env(safe-area-inset-top))}
  .site-head{height:calc(var(--hd) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--mg),env(safe-area-inset-right)) 0 max(var(--mg),env(safe-area-inset-left))}
  .site-head.hide{transform:none}
  .logo svg{width:86px;height:51px}
  .burger{width:44px;height:44px;gap:5px}
  .burger span,.burger span:nth-child(1),.burger span:nth-child(2),.burger span:nth-child(3){width:24px}
  .burger::after,.lang::after{display:none}
  .lang{min-height:44px;padding:0 8px;font-size:13px}
  .langlist{top:calc(100% + 4px);font-size:13px}
  .pill{font-size:12px;padding:4px 12px 3px}
  .menu{padding:calc(var(--hd) + env(safe-area-inset-top) + 20px) max(var(--mg),env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(var(--mg),env(safe-area-inset-left))}
  .menu .menu-cols a{display:flex;align-items:center;min-height:44px;padding:0;font-size:20px;line-height:1.3;letter-spacing:0}
  .menu-follow{text-align:left;padding-top:20px;font-size:var(--small);font-weight:400;opacity:.85}

  .track .rv,.lines b{opacity:1;transform:none;transition:none}

  /* Hero (R2 values). */
  .hero{display:flex;flex-direction:column;padding:12px var(--mg) 8px}
  .hero-media{order:1;margin:0;height:auto;aspect-ratio:3/2}
  .hero-media img{object-position:70% 42%}
  .hero-title{order:2;margin:16px 0 0;max-width:none;text-align:left;font-size:var(--h1);line-height:1.35;letter-spacing:-.01em}
  .hero-hours{order:3;display:block;margin:6px 0 0;font-size:var(--ui);line-height:1.5;color:var(--ink-soft)}
  .hero-cta{order:4;display:flex;flex-wrap:wrap;gap:0 24px;margin:8px 0 0}
  .hero-btn{display:inline-flex;align-items:center;min-height:44px;font-size:var(--ui);font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

  /* ---- Shared section primitives ---- */
  .duo-lead,.tr-text,.shop-body{display:contents}
  .duo-lead p,.duo-tail,.tr-text > p,.tr-text > .arrow-link,.shop-foot{display:none}  /* desktop prose → .m-only blocks */
  .m-blk{display:contents}
  .track .display{font-size:var(--h2);line-height:1.35;letter-spacing:-.01em;margin:0}
  .m-blk p,.m-blk li,.m-blk dd{margin:0;font-size:var(--body);line-height:1.65;font-weight:400}
  .m-blk ul{list-style:none;margin:0;padding:0}
  .track .arrow-link{min-width:0;min-height:44px;margin:0;padding:0;gap:8px;border:0;justify-self:start;align-self:start;font-size:var(--ui);font-weight:500;letter-spacing:.01em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
  .track .arrow{width:16px}
  .track .arrow::before{width:16px}
  .track .arrow-link:hover .lbl,.track .arrow-link:hover .arrow{transform:none}
  .duo-fig,.tr-fig{width:100%;height:auto;aspect-ratio:auto;margin:0;overflow:hidden}
  .duo-fig img,.tr-fig img{display:block;width:100%;height:auto}
  [data-kind="band"]{display:none}

  /* ---- Bakery: product-led. Photo + caption, heading, one craft line, the four flavours, sets, link. ---- */
  #pasteleria .stage{display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);padding:var(--s10) var(--mg) var(--s12)}
  #pasteleria .duo-fig{order:0;margin:0;overflow:visible}  /* reset style.css 481–1023 order:2 — photo leads on every narrow width */
  #pasteleria .duo-fig img{aspect-ratio:3/2;object-fit:cover;object-position:50% 55%}
  .m-cap{display:block;margin-top:var(--s2);font-size:var(--label);line-height:1.4;color:var(--ink-soft)}
  #pasteleria h2{margin-top:var(--s6)}
  .m-bakery .m-note{margin-top:var(--s2)}
  .m-blk .m-flavors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4);margin-top:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .m-blk .m-flavors li{font-weight:500;line-height:1.4}
  .m-blk .m-sets{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s3)}
  .m-blk .m-sets li{font-size:var(--ui);color:var(--ink-soft);line-height:1.5}
  .m-bakery .m-act{margin-top:var(--s2)}

  /* ---- Coffee: a small menu beside a portrait crop, on a quiet peach tint. ---- */
  #cafe .stage{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);grid-template-areas:"h h" "n n" "p m" "k k" "a a";column-gap:var(--s4);row-gap:0;align-items:start;background:var(--tint);padding:var(--s10) var(--mg)}
  #cafe h2{grid-area:h}
  .m-cafe .m-note{grid-area:n;margin-top:var(--s2)}
  #cafe .duo-fig{grid-area:p;margin-top:var(--s6);max-height:250px}
  #cafe .duo-fig img{aspect-ratio:4/5;max-height:250px;object-fit:cover;object-position:42% 55%}
  .m-menu{grid-area:m;margin:var(--s6) 0 0;display:grid;row-gap:var(--s4)}
  .m-menu div{display:grid;row-gap:2px}
  .m-menu dt{font-size:var(--body);font-weight:500;line-height:1.4}
  .m-blk .m-menu dd{font-size:var(--ui);line-height:1.5;color:var(--ink-soft)}
  .m-blk .m-milk{grid-area:k;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--ui);color:var(--ink-soft)}
  .m-cafe .m-act{grid-area:a;margin-top:var(--s1)}

  /* ---- Group orders: the one coloured region — three equal product photos, then terms and the link. ---- */
  #trays .stage{display:flex;flex-direction:column;gap:0;background:var(--blue);padding:var(--s12) var(--mg) var(--s12);margin:var(--s4) 0}
  .shop-room,.shop-blue{display:none}
  .shop-title{margin:0}
  .shop-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);height:auto;margin-top:var(--s4)}
  .card{position:static;height:auto;aspect-ratio:auto;margin:0;overflow:visible;background:none}
  .card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
  .card figcaption{display:block;margin-top:var(--s2);font-size:var(--label);line-height:1.4;color:var(--ink)}
  .card figcaption .m-sub{display:block;color:var(--ink-soft)}
  .m-trays .m-note{margin-top:var(--s6)}
  .m-blk .m-qty{margin-top:var(--s3);font-weight:500;letter-spacing:.01em}
  .m-blk .m-lines{display:grid;row-gap:2px;margin-top:var(--s1)}
  .m-blk .m-lines li{font-size:var(--ui);line-height:1.5}
  .m-trays .m-extra{margin-top:var(--s3)}
  .m-trays .m-act{margin-top:var(--s1)}

  /* ---- Breakfast: heading with its hours, a readable photo, then the dish and what else is served. ---- */
  #breakfast .stage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h t" "p p" "d d" "n n" "o o" "f f" "a a";column-gap:var(--s4);row-gap:0;align-items:baseline;background:var(--cream);padding:var(--s12) var(--mg) var(--s10)}
  #breakfast h2{grid-area:h}
  .m-breakfast .m-hours{grid-area:t;font-size:var(--ui);color:var(--ink-soft);white-space:nowrap}
  #breakfast .tr-fig{grid-area:p;margin-top:var(--s4)}
  #breakfast .tr-fig img{aspect-ratio:4/3;object-fit:cover;object-position:50% 62%}
  .m-blk .m-dish{grid-area:d;margin-top:var(--s4);font-weight:500}
  .m-breakfast .m-note{grid-area:n;margin-top:var(--s1)}
  .m-blk .m-also{grid-area:o;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
  .m-blk .m-also li{font-weight:500;line-height:1.4}
  .m-blk .m-after{grid-area:f;margin-top:var(--s2);font-size:var(--ui);color:var(--ink-soft)}
  .m-breakfast .m-act{grid-area:a;margin-top:var(--s1)}

  /* ---- Terrace: a full-bleed photo pause, then the seats and visitor notes. ---- */
  #terrace .stage{display:flex;flex-direction:column;gap:0;background:var(--cream);padding:var(--s4) 0 var(--s12)}
  #terrace .tr-fig img{aspect-ratio:1/1;object-fit:cover;object-position:50% 72%}
  #terrace h2{margin:var(--s6) var(--mg) 0}
  .m-terrace{display:block;padding:0 var(--mg)}
  .m-blk .m-seats{margin-top:var(--s2);font-weight:500}
  .m-blk .m-notes{display:grid;row-gap:var(--s2);margin-top:var(--s3)}
  .m-terrace .m-act{margin-top:var(--s3)}

  /* ---- Visit: practical labelled rows, all visible. ---- */
  #visit .stage{display:flex;flex-direction:column;gap:0;background:var(--cream);padding:var(--s10) var(--mg) var(--s12);border-top:1px solid var(--line)}
  #visit .tr-fig{display:none}
  .m-rows{display:grid;margin:var(--s4) 0 0}
  .m-rows div{display:grid;grid-template-columns:5.5em minmax(0,1fr);column-gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
  .m-rows div:last-child{border-bottom:1px solid var(--line)}
  .m-rows dt{grid-row:1 / span 2;font-size:var(--label);font-weight:500;line-height:1.65;color:var(--ink-soft);padding-top:2px}
  .m-rows dd{grid-column:2}
  .m-visit .m-act{margin-top:var(--s3)}

  /* ---- Footer (R2 base): every fact is shown earlier, so the fact pills and three duplicate #visit links step aside. ---- */
  .site-foot{background:#f8ece6;color:var(--ink);padding:24px max(var(--mg),env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(var(--mg),env(safe-area-inset-left));font-size:var(--small);line-height:1.65;font-weight:400}
  .site-foot .rule{background:var(--line)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding-top:14px}
  .foot-here,.foot-legal{grid-column:1 / -1}
  .foot-here p{margin:0;font-size:var(--small);overflow-wrap:anywhere}
  .foot-here .here{font-weight:500}
  .foot-legal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;text-align:left}
  .foot-legal li{margin:0}
  .foot-legal li:not(.m-nav):not(:last-child){display:none}
  .foot-legal .m-nav{display:block}
  .foot-legal a{display:flex;align-items:center;min-height:44px;font-size:var(--small);border-bottom:1px solid var(--line)}
  .foot-work,.foot-social{margin:0;text-align:left;align-self:auto}
  .foot-work a,.foot-social a{display:inline-flex;align-items:center;min-height:44px;margin:0;font-size:var(--small);text-decoration:underline;text-underline-offset:4px}
  .awards{display:none}
  .foot-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:0;padding-top:8px;font-size:var(--fine)}
  .foot-bottom p:last-child{grid-column:1 / -1}
  .site-foot :focus-visible{outline-color:var(--ink)}
}

/* Phone: logo left, language + menu right (R2). */
@media (max-width:767px){
  .site-head{display:flex;align-items:center;gap:0}
  .logo{order:0;margin-right:auto}
  .head-right{order:1;gap:0}
  .head-left{order:2;gap:0;margin-right:-10px}
  .head-left .pill,.head-right .icon{display:none}
  .menu-cols{grid-template-columns:minmax(0,1fr)}
  .to-top{display:none}
  .foot-top{display:block;margin:0}
  .foot-top a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
}
/* 320-class phones: the coffee menu would be squeezed beside the photo — photo goes on top, menu below at full width. */
@media (max-width:359px){
  :root{--mg:16px}
  #cafe .stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "n" "p" "m" "k" "a"}
  #cafe .duo-fig,#cafe .duo-fig img{max-height:none}
  #cafe .duo-fig img{aspect-ratio:16/9;object-position:42% 55%}
  .m-menu{margin-top:var(--s4)}
}

/* Tablet: same roles, larger H1/H2/menu (R2), measure capped; photos may sit beside text. */
@media (min-width:768px) and (max-width:1023px){
  :root{--h1:26px;--h2:22px;--mg:max(32px,calc((100vw - 680px) / 2))}
  .menu .menu-cols a{font-size:22px}
  .hero-media{aspect-ratio:16/10}
  #cafe .duo-fig,#cafe .duo-fig img{max-height:320px}
  #terrace .tr-fig{margin:0 var(--mg)}
  #terrace .tr-fig img{aspect-ratio:16/9}
}

/* Short landscape phones/tablets (844×390, 640×360): R2 two-column hero. */
@media (max-width:1023px) and (max-height:520px) and (orientation:landscape){
  .hero{display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,.55fr);grid-template-rows:auto auto 1fr;column-gap:20px;align-items:start;padding:8px var(--mg)}
  .hero-media{grid-column:1;grid-row:1 / span 3;aspect-ratio:auto;height:min(240px,calc(100vh - var(--hd) - env(safe-area-inset-top) - 32px));min-height:150px}
  .hero-title{grid-column:2;grid-row:1;margin:0}
  .hero-hours{grid-column:2;grid-row:2}
  .hero-cta{grid-column:2;grid-row:3;align-self:start}
  #terrace .tr-fig img{aspect-ratio:21/9}
  /* QA repair: section photos must not outgrow a short screen. */
  #pasteleria .duo-fig img,#breakfast .tr-fig img{aspect-ratio:auto;height:min(220px,calc(100vh - 180px));min-height:140px;object-fit:cover}
}