@import url('./contact-title-r23.css?v=original-letters-keyline-r23');
#contact.contact-letterbox{scroll-margin-top:var(--nav-height,0px)}
.ctl .copy h2 i{animation:none;transform:none;transform-origin:50% 78%}
.ctl .copy h2 i img{
 filter:drop-shadow(1px 0 0 #f6ebd4) drop-shadow(-1px 0 0 #f6ebd4)
  drop-shadow(0 1px 0 #f6ebd4) drop-shadow(0 -1px 0 #f6ebd4)
  drop-shadow(1px 3px 0 #38291dcc) drop-shadow(1px 5px 2px #20170f66);
}
.ctl.front-visible .copy h2 i{
 animation:ctl-ltrwob calc(2.05s + var(--i)*.15s) ease-in-out infinite;
 animation-delay:calc(var(--i)*-.33s);
 transform-origin:50% 88%;
}
@keyframes ctl-title-arrive{
 0%{transform:translateY(9%) rotate(var(--r));opacity:.65}
 58%{transform:translateY(-3%) rotate(calc(var(--r)*-.3));opacity:1}
 82%{transform:translateY(1%) rotate(0deg)}
 100%{transform:translateY(0) rotate(0deg);opacity:1}
}
.ctl.reduced-motion .copy h2 i{animation:none;transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
 :where(html:not([data-motion-mode="full"])) .ctl.front-visible .copy h2 i{animation:none;transform:none;opacity:1}
}

/* r42 portrait (2026-10-07): plan ③ "편지지 너머 빼꼼", no cabinet below.
   Order from the top: CONTACT title → courier looking over the letter → letter.
   The stage equals the visible height (r41 fit). The courier is the canon
   pose-sheet cel at one uniform scale (--peekH = case height); its gloves
   overlap the letter's top edge by 0.095H and everything below that line is
   clipped, so the body reads as standing behind the paper. Extra height on tall
   phones is split evenly above and below instead of leaving an empty band. */
@media(max-aspect-ratio:1/1){
 #contact.contact-letterbox{height:auto;min-height:calc(100svh - var(--nav-height,0px))}
 .ctl{
  --ctlH:max(520px,calc(100svh - var(--nav-height,0px)));
  --sheetW:min(calc(100vw - 32px),440px);
  --titleW:min(calc(var(--sheetW)*.84),320px);
  --titleH:calc(var(--titleW)/4.797);
  --peekH:calc(var(--sheetW)*.235);
  --headH:calc(8px + var(--titleH) + var(--peekH)*.905);
  --sheetH:clamp(360px,calc(var(--ctlH) - var(--headH) - 24px),540px);
  --slack:max(0px,calc((var(--ctlH) - var(--headH) - var(--sheetH) - 24px)/2));
  --titleTop:calc(8px + var(--slack));
  --peekTop:calc(var(--titleTop) + var(--titleH));
  --frontTop:calc(var(--peekTop) + var(--peekH)*.905);
 }
 .ctl:has(.stage.sending){--ctlH:max(520px,calc(100svh - var(--nav-height,0px)))}
 .ctl .copy,.ctl .stage.open .copy{top:var(--titleTop);left:calc(50% - var(--titleW)/2);width:var(--titleW)}
 .ctl .letter{top:var(--frontTop);left:calc(50% - var(--sheetW)/2)}
 .ctl .inner{padding:7% 8% 5%;overflow-y:auto;overscroll-behavior:auto}
 .ctl .form{min-height:0;grid-template-rows:auto minmax(56px,1fr) auto}
 .ctl .form>.message-field{grid-template-rows:auto minmax(40px,1fr) auto}
 .ctl .form>.message-field textarea{min-height:40px}
 .ctl .ctl-room picture{height:100%}
 .ctl .ctl-room img{object-position:50% 100%}
 /* "밑에 책장이 보일 필요는 없어": cabinet, ladder and ladder courier are not shown on portrait. */
 .ctl #ctl-s1{display:none}
 .ctl .stage .ctl-peek{display:block}
}
/* Short phones (iPhone SE class): tighter paper margins keep every field at 44px. */
@media(max-aspect-ratio:1/1) and (max-height:700px){
 .ctl .inner{padding:5% 7% 4%}
 .ctl .form{gap:6px}
 .ctl .row{gap:6px 12px}
 .ctl .foot{gap:6px;margin-top:2px;padding-top:6px}
 .ctl .send{min-height:48px}
}

/* Courier peek layer (portrait only). The wrapper ends 0.095H below the letter's top
   edge: the gloves overlap the paper, the rest of the body is hidden behind it. */
.ctl .ctl-peek{display:none;position:absolute;left:0;right:0;top:0;height:calc(var(--peekTop) + var(--peekH));overflow:hidden;z-index:7;pointer-events:none}
/* v6 (R2 2026-10-10, r5C 2026-10-11): body layer behind the letter (z 5), glove layer in front. K2: while the courier rises or ducks the glove
   layer is clipped at the letter's top edge exactly like the body (the paper hides both), so no cut glove piece floats on the paper; once
   the .55s rise has ended the gloves come over the edge (clip .905 -> 1.16 peekH). Ducking (leave / SEND) clips them at the edge at once. */
.ctl .ctl-peek.ctl-peek--body{z-index:5}
.ctl .ctl-peek.ctl-peek--hands{height:calc(var(--peekTop) + var(--peekH)*.905);transition:height 0s}
.ctl .ctl-peek.ctl-peek--hands.up{height:calc(var(--peekTop) + var(--peekH)*1.16);transition:height 0s .55s}
.ctl .stage.sending .ctl-peek.ctl-peek--hands,.ctl .stage.sent .ctl-peek.ctl-peek--hands{height:calc(var(--peekTop) + var(--peekH)*.905);transition:height 0s}
.ctl .ctl-peek img{position:absolute;top:var(--peekTop);left:calc(50% - var(--peekH)*1024/470/2);width:calc(var(--peekH)*1024/470);height:auto;max-width:none;
 transform:translateY(calc(var(--peekH)*1.05));transition:transform .55s cubic-bezier(.22,1.25,.36,1)}
/* contact-peek-r42.js adds .up when CONTACT comes into view (and removes it when leaving). */
.ctl .ctl-peek.up img{transform:none}
/* SEND: the courier ducks behind the letter before the first fold (0.12s), returns after WRITE AGAIN. */
.ctl .stage.sending .ctl-peek img,.ctl .stage.sent .ctl-peek img{transform:translateY(calc(var(--peekH)*1.05));transition:transform .18s ease-in}
.ctl.reduced-motion .ctl-peek img,.ctl.reduced-motion .ctl-peek.ctl-peek--hands.up{transition:none}
@media(prefers-reduced-motion:reduce){:where(html:not([data-motion-mode="full"])) .ctl .ctl-peek img,:where(html:not([data-motion-mode="full"])) .ctl .ctl-peek.ctl-peek--hands.up{transition:none}}
/* 2026-10-07 user: "WRITE AGAIN 글자는 데스크탑 모바일 다 삭제해줘" — removed on every size.
   THANK YOU stays. (Writing again: reload, or a portfolio inquiry button.) */
.ctl .contact-crossing .crossing-confirm button{display:none!important}

/* 2026-10-07 user picked THANK YOU option ③ (hand-painted seaside sign) → "3안을 디벨롭해보자".
   Lettering images (scene/thanks-r42, provenance.json); the h3 keeps its text for screen
   readers. One line on PC/landscape, stacked on portrait phones. It is "painted" in from
   left to right each time the block appears; reduced motion shows it at once. */
.ctl .contact-crossing .crossing-confirm h3{
 --ty-w:clamp(240px,min(30vw,46svh),400px);--ty-ar:2.637;
 width:var(--ty-w);aspect-ratio:var(--ty-ar);height:auto;
 color:transparent!important;text-shadow:none!important;font-size:0!important;line-height:0!important;letter-spacing:0!important;white-space:nowrap;overflow:hidden;
 background:url(scene/thanks-r42/thanks-line-r42g.webp?v=r42g) center/contain no-repeat;
 filter:drop-shadow(0 3px 4px #4a2a1a3d);
 -webkit-mask:linear-gradient(90deg,#000 50%,transparent 58%) 0 0/220% 100% no-repeat;
 mask:linear-gradient(90deg,#000 50%,transparent 58%) 0 0/220% 100% no-repeat;
 animation:ctl-ty-write 1.15s cubic-bezier(.45,.05,.3,1) .12s both}
@keyframes ctl-ty-write{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@media(max-aspect-ratio:1/1){
 .ctl .contact-crossing .crossing-confirm h3{--ty-w:min(64vw,270px);--ty-ar:1.347;background-image:url(scene/thanks-r42/thanks-stacked-r42g.webp?v=r42g)}
}
@media(max-height:430px) and (min-aspect-ratio:1/1){
 .ctl .contact-crossing .crossing-confirm h3{--ty-w:min(34vw,62svh,280px)}
}
.ctl.reduced-motion .contact-crossing .crossing-confirm h3{animation:none;-webkit-mask:none;mask:none}
@media(prefers-reduced-motion:reduce){:where(html:not([data-motion-mode="full"])) .ctl .contact-crossing .crossing-confirm h3{animation:none;-webkit-mask:none;mask:none}}
@media(forced-colors:active){
 .ctl .contact-crossing .crossing-confirm h3{background:none;-webkit-mask:none;mask:none;animation:none;color:CanvasText!important;font:400 40px/1.1 Georgia,serif!important;width:auto;aspect-ratio:auto}
}
@media(forced-colors:active){.ctl .copy h2 i img{filter:none}}