/* /contact/ page (approved design v3). Loaded after /styles.css; every rule is scoped to body.contact-page.
   Header, theme toggle and KO/EN/JP switcher are the shared site ones (site.js); only their hit areas are enlarged here. */
.contact-page { --muted:#62645f; --soft:#6f706a; --red:#eb3f27; --pad:5vw;
  --sans:Manrope,'Noto Sans KR',sans-serif; --mono:'DM Mono','Noto Sans KR',monospace; --serif:Georgia,'Nanum Myeongjo',serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  min-height:100vh; display:flex; flex-direction:column; font-family:var(--sans); -webkit-text-size-adjust:100%; transition:background .3s,color .3s }
:root[data-theme="dark"] .contact-page { --muted:#b9bbb5; --soft:#9fa29b }
:root[lang="ja"] .contact-page { --sans:Manrope,'Noto Sans JP','Noto Sans KR',sans-serif; --mono:'DM Mono','Noto Sans JP',monospace; --serif:Georgia,'Noto Sans JP',serif }
:root[lang="ja"] .contact-page * { word-break:normal; line-break:strict }
.contact-page a { color:inherit }
.contact-page button { font:inherit; color:inherit }
.contact-page :focus-visible { outline:2px solid var(--ink); outline-offset:4px; border-radius:2px }
.contact-page .sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.contact-page .skip { position:absolute; left:12px; top:-60px; z-index:30; padding:12px 16px; background:var(--ink); color:var(--paper); font:500 .75rem var(--mono); text-decoration:none; border-radius:30px }
.contact-page .skip:focus { top:12px }

/* ── Shared header: same markup/order as the other pages, 44px targets ── */
.contact-page .header { gap:16px }
.contact-page .header > .brand { display:inline-flex; align-items:center; min-height:44px }
.contact-page .header > nav:not(.language-switcher) { gap:10px }
.contact-page .header > nav:not(.language-switcher) a { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 4px; white-space:nowrap }
.contact-page .header > nav:not(.language-switcher) a:hover { text-decoration:underline; text-underline-offset:5px }
.contact-page .header > nav:not(.language-switcher) a[aria-current="page"]::after { content:''; position:absolute; left:4px; right:4px; bottom:9px; height:2px; background:var(--ink) }
.contact-page .header > .language-switcher { gap:0; margin-left:auto; padding-left:10px }
.contact-page .header > .language-switcher button { position:relative; isolation:isolate; min-width:44px; min-height:44px; padding:0; border-radius:0; background:transparent; color:var(--soft); font:500 .62rem 'DM Mono',monospace; letter-spacing:.04em }
.contact-page .header > .language-switcher button::before { content:''; position:absolute; z-index:-1; left:50%; top:50%; width:30px; height:22px; transform:translate(-50%,-50%); border-radius:14px; transition:background .2s }
.contact-page .header > .language-switcher button:hover { background:transparent; color:var(--ink) }
.contact-page .header > .language-switcher button.is-active { background:transparent; color:var(--paper) }
.contact-page .header > .language-switcher button.is-active::before { background:var(--ink) }
.contact-page .header > .theme-toggle { position:relative; isolation:isolate; width:44px; height:44px; margin-left:6px; border:0; border-radius:0; background:transparent; transform:none }
.contact-page .header > .theme-toggle::before { content:''; position:absolute; z-index:-1; inset:6px; border:1px solid var(--line); border-radius:50%; transition:background .2s }
.contact-page .header > .theme-toggle:hover { background:transparent; color:var(--paper); transform:none }
.contact-page .header > .theme-toggle:hover::before { background:var(--ink) }

/* ── Stage: mostly air ── */
.contact-page main { flex:1; width:100%; max-width:1600px; margin:0 auto; padding:clamp(56px,12vh,140px) var(--pad) clamp(72px,12vh,140px); outline:0 }
.contact-page h1 { margin:0; font-size:clamp(2.5rem,4.6vw,4.6rem); font-weight:700; line-height:1.02; letter-spacing:-.075em; word-break:keep-all }
.contact-page h1 em { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.04em; padding-right:.04em; white-space:nowrap }
:root[lang="ko"] .contact-page h1, :root[lang="ja"] .contact-page h1 { letter-spacing:-.06em; line-height:1.15 }
:root[lang="ko"] .contact-page h1 em, :root[lang="ja"] .contact-page h1 em { font-style:normal; letter-spacing:-.07em }

.contact-page .rule { height:1px; margin:clamp(40px,7vh,72px) 0 clamp(18px,3vh,28px); background:var(--ink); transform-origin:left center }

/* The email is the object: type, not a button */
.contact-page .address { position:relative; display:block; max-width:100%; margin:0 0 0 -.04em; padding:0; border:0; background:none; cursor:pointer; text-align:left;
  font-family:Manrope,sans-serif; font-weight:700; font-size:clamp(1.8rem,3.5vw,3.5rem); line-height:1.08; letter-spacing:-.07em; min-height:44px; user-select:text; -webkit-user-select:text; touch-action:manipulation }
.contact-page .address .mask { display:block; overflow:hidden; padding:0 .06em .08em 0 }
.contact-page .address .rise { display:block }
.contact-page .address .type { position:relative; display:inline-block; white-space:nowrap; isolation:isolate; transition:transform .7s var(--ease); will-change:transform }
.contact-page .address .at { font-family:Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.02em; padding:0 .03em }
/* insets compensate the -.07em tracking so the band matches the ink, not the box */
.contact-page .address .sweep { position:absolute; z-index:-1; left:.06em; right:-.16em; bottom:.1em; height:.17em; background:var(--lime); transform:scaleX(0); transform-origin:left center; transition:transform .55s var(--ease) }
.contact-page .address:hover .sweep, .contact-page .address:focus-visible .sweep, .contact-page .address.is-copied .sweep { transform:scaleX(1) }
.contact-page .address:focus-visible { outline-offset:8px }

/* Lower band: actions on the left, the index list hangs on the right half */
.contact-page .lower { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,720px); gap:0 6vw; align-items:start; margin-top:clamp(10px,2vh,18px) }
.contact-page .meta { display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; margin:0; font:500 .78rem var(--sans); letter-spacing:-.01em; color:var(--muted) }
.contact-page .meta a, .contact-page .meta button { display:inline-flex; align-items:center; gap:6px; min-height:44px; min-width:44px; padding:0 2px; border:0; background:none; cursor:pointer; font:inherit; color:var(--ink); text-decoration:none }
.contact-page .meta a:hover span:first-child, .contact-page .meta button:hover span:first-child { text-decoration:underline; text-underline-offset:4px }
.contact-page .meta .arr { display:inline-block; transition:transform .3s var(--ease) }
.contact-page .meta a:hover .arr { transform:translate(2px,-2px) }
.contact-page .meta .dot { color:var(--soft); padding:0 4px }
.contact-page .status { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding-left:14px; font:400 .7rem var(--mono); color:var(--muted); word-break:keep-all }
.contact-page .status:empty { display:none }
.contact-page .status[data-tone]::before { content:''; flex:0 0 7px; height:7px; border-radius:50% }
.contact-page .status[data-tone="ok"]::before { background:var(--lime); box-shadow:0 0 0 1px var(--ink) }
.contact-page .status[data-tone="warn"]::before { background:var(--red) }

/* ── Elsewhere: quiet index list ── */
.contact-page .elsewhere { margin-top:clamp(28px,4.5vh,64px) }
.contact-page .channels { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); counter-reset:ch }
.contact-page .channels li { counter-increment:ch; border-bottom:1px solid var(--line) }
.contact-page .channels a { display:grid; grid-template-columns:44px 128px minmax(0,1fr) 24px; align-items:baseline; gap:12px; min-height:64px; padding:20px 0; text-decoration:none }
.contact-page .channels a::before { content:counter(ch, decimal-leading-zero); font:400 .66rem var(--mono); color:var(--soft) }
/* a long unbroken label (up to 24 chars) wraps inside its own column; inherited by the data-text ::after below */
.contact-page .channels .ch-label { min-width:0; font:500 .66rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); overflow-wrap:anywhere }
.contact-page .channels .name { font-size:1.05rem; font-weight:600; letter-spacing:-.03em; overflow-wrap:anywhere; transition:transform .45s var(--ease) }
.contact-page .channels .arr { justify-self:end; font:400 .9rem var(--mono); transition:transform .45s var(--ease) }
/* en/ja: a Hangul channel label is drawn from data-text (contact.js), out of the translator's reach */
.contact-page .channels [data-text]::after { content:attr(data-text) }

/* ── Footer: one line ── */
.contact-page .foot { display:flex; justify-content:space-between; gap:16px; padding:22px var(--pad) 26px; font:400 .6rem var(--mono); letter-spacing:.06em; color:var(--soft) }

/* ── Motion (one pass on load; contact.js adds .is-motion unless reduced motion is requested) ── */
@keyframes contact-focus-in { from { opacity:0; filter:blur(14px); transform:translateY(.12em) } to { opacity:1; filter:blur(0); transform:none } }
@keyframes contact-draw { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes contact-lift { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes contact-fade { from { opacity:0 } to { opacity:1 } }
.contact-page.is-motion h1 { animation:contact-focus-in 1.2s var(--ease) both }
.contact-page.is-motion .rule { animation:contact-draw 1.3s var(--ease) .3s both }
.contact-page.is-motion .meta { animation:contact-fade .8s ease .95s both }
.contact-page.is-motion .channels { animation:contact-fade .6s ease 1s both }
.contact-page.is-motion .channels li { animation:contact-lift .8s var(--ease) both; animation-delay:calc(1.05s + var(--i,0) * 90ms) }
.contact-page .channels li:nth-child(2) { --i:1 } .contact-page .channels li:nth-child(3) { --i:2 } .contact-page .channels li:nth-child(4) { --i:3 }
.contact-page .channels li:nth-child(5) { --i:4 } .contact-page .channels li:nth-child(6) { --i:5 } .contact-page .channels li:nth-child(7) { --i:6 } .contact-page .channels li:nth-child(8) { --i:7 }
.contact-page .channels li:nth-child(9) { --i:8 } .contact-page .channels li:nth-child(10) { --i:9 } .contact-page .channels li:nth-child(11) { --i:10 } .contact-page .channels li:nth-child(12) { --i:11 }
.contact-page.is-motion .foot { animation:contact-fade .8s ease 1.4s both }

/* ── Responsive ── */
@media (max-width:900px) {
  .contact-page .header { flex-wrap:wrap; height:auto; min-height:0; padding:10px var(--pad) 4px; row-gap:0 }
  .contact-page .header > nav:not(.language-switcher) { position:static; left:auto; transform:none; order:5; flex:0 0 100%; width:100%; min-width:0; justify-content:flex-start; gap:22px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; border-top:1px solid var(--line); margin-top:6px }
  .contact-page .header > nav:not(.language-switcher)::-webkit-scrollbar { display:none }
  .contact-page .lower { grid-template-columns:1fr }
  .contact-page .elsewhere { margin-top:clamp(56px,10vh,96px) }
}
@media (max-width:650px) {
  .contact-page { --pad:6vw }
  .contact-page .header { height:auto; min-height:0; padding:8px var(--pad) 2px }
  .contact-page .header > .brand { font-size:1.35rem }
  .contact-page .header > nav:not(.language-switcher) { gap:0; justify-content:space-between }
  .contact-page .header > nav:not(.language-switcher) a { font-size:.78rem }
  .contact-page .header > nav:not(.language-switcher) a:first-child { padding-left:0 }
  .contact-page .header > nav:not(.language-switcher) a:last-child { padding-right:0 }
  .contact-page .header > .language-switcher { margin:0 0 0 auto; padding-left:4px }
  .contact-page .header > .language-switcher button { min-width:44px; padding:0; font-size:.62rem }
  .contact-page .header > .theme-toggle { width:44px; height:44px; margin-left:0 }
  .contact-page h1 { font-size:clamp(2.3rem,11vw,3.2rem) }
  .contact-page .address { font-size:clamp(1.55rem,8.4vw,2.3rem) }
  .contact-page .status { flex-basis:100%; padding-left:0; min-height:28px }
  .contact-page .channels a { grid-template-columns:30px minmax(0,1fr) 20px; grid-template-rows:auto auto; row-gap:4px; padding:18px 0 }
  .contact-page .channels a::before { grid-row:1 / 3 }
  .contact-page .channels .ch-label { grid-column:2; grid-row:2 }
  .contact-page .channels .name { grid-column:2; grid-row:1 }
  .contact-page .channels .arr { grid-column:3; grid-row:1 / 3; align-self:center }
}
@media (max-width:360px) {
  .contact-page .header { padding-inline:var(--pad) }
  .contact-page .header > .brand { font-size:1.2rem }
  .contact-page .header > nav:not(.language-switcher) a { font-size:.74rem }
  .contact-page .header > .language-switcher { padding-left:2px }
  .contact-page .header > .language-switcher button { min-width:44px }
  .contact-page .header > .theme-toggle { width:44px; height:44px }
}
@media (prefers-reduced-motion:reduce) {
  .contact-page *, .contact-page *::before, .contact-page *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .contact-page .address .type { transform:none !important }
}

/* ── Address, channel rows and footer clock (contact.js). Every animation/transition below is also switched off by the
   prefers-reduced-motion block above. ── */
@keyframes contact-blink { 50% { opacity:0 } }

/* Typed address (portfolio typed-quote timing and caret; replaces the old rise), then the lime mark settles like the
   portfolio quote's: the band stays in light, a 3px underline in dark (where hover/focus/copy still widen it to the band) */
.contact-page .address.is-typing .ch { visibility:hidden }
.contact-page .address.is-typing .ch.is-on { visibility:visible }
/* letters stay inline-block once split, so the width never changes mid-motion; the caret takes no width */
.contact-page .address .ch { display:inline-block }
.contact-page .address .caret { display:inline-block; width:.08em; height:.95em; margin:0 -.14em 0 .06em; vertical-align:-.1em; background:var(--ink); animation:contact-blink 1s steps(1) infinite }
.contact-page .address .sweep { transition:transform .55s var(--ease), height .45s var(--ease) }
.contact-page .address.is-marked .sweep { transform:scaleX(1); transition:transform .7s cubic-bezier(.7,0,.2,1) }
.contact-page .address.is-settled .sweep { transform:scaleX(1) }
:root[data-theme="dark"] .contact-page .address.is-settled:not(:hover):not(:focus-visible):not(.is-copied) .sweep { height:3px }

/* Copy: the letters lift and settle in a quick left-to-right wave (on top of the held lime sweep). Transform only, so
   nothing reflows; the mask gets headroom so a lifted letter isn't clipped */
@keyframes contact-wave {
  0% { transform:none; animation-timing-function:cubic-bezier(.3,0,.4,1) }
  35% { transform:translateY(-.14em); animation-timing-function:cubic-bezier(.3,1.4,.5,1) }
  100% { transform:none }
}
.contact-page .address .mask { padding-top:.2em; margin-top:-.2em }
.contact-page .address.is-wave .ch { animation:contact-wave .55s both; animation-delay:calc(var(--c,0) * 30ms) }

/* Channel rows: a thin lime band wipes in along the row's own rule (a band at text height crossed the mono labels and
   descenders), the ↗ leaves top-right and comes back bottom-left.
   Mouse hover only (no sticky hover after a tap) plus keyboard focus. */
@keyframes contact-arrow-out-in {
  0% { transform:none; animation-timing-function:cubic-bezier(.5,0,.9,.4) }
  42% { transform:translate(110%,-110%); animation-timing-function:steps(1,end) }
  43% { transform:translate(-110%,110%); animation-timing-function:cubic-bezier(.2,.7,.1,1) }
  100% { transform:none }
}
.contact-page .channels a { position:relative; isolation:isolate }
.contact-page .channels a::after { content:''; position:absolute; z-index:-1; left:0; right:0; bottom:-1px; height:2px; background:var(--lime); transform:scaleX(0); transform-origin:right center; transition:transform .55s var(--ease) }
.contact-page .channels .arr { overflow:hidden; line-height:1; padding:.2em; margin:-.2em }
.contact-page .channels .arr > span { display:inline-block }
.contact-page .channels a:focus-visible::after { transform:scaleX(1); transform-origin:left center }
.contact-page .channels a:focus-visible .arr > span { animation:contact-arrow-out-in .6s both }
.contact-page .channels a:focus-visible .ch-label { color:var(--ink) }
@media (hover:hover) and (pointer:fine) {
  .contact-page .channels a:hover .name { transform:translateX(6px) }
  .contact-page .channels a:hover .ch-label { color:var(--ink) }
  .contact-page .channels a:hover::after { transform:scaleX(1); transform-origin:left center }
  .contact-page .channels a:hover .arr > span { animation:contact-arrow-out-in .6s both }
}

/* Seoul local time, sitting with ITLUBS.COM on the footer line; the colon dims every other second (never vanishes,
   so the time always reads as a time) */
@keyframes contact-colon { 50% { opacity:.3 } }
.contact-page .foot .clock { margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums }
.contact-page .foot .colon { animation:contact-colon 2s steps(1) infinite }