@import url("./contact-heart.css?v=contact-heart-r99.canon-r42.sept-v6-r5.r5-fix.r6-fix");

/* CONTACT — 편지·우체통 장면 (컨택트 방 v7-scene-only/letterbox6 를 정본 구역에 맞춰 이식, 2026-09-10)
   원본은 한 페이지 전체(100vh/100vw)였다. 여기서는 상단바 아래 한 화면(--ctlH)을 무대로 쓰고, 모든 선택자를 .ctl 아래로 가둔다. */
#contact.contact-letterbox{scroll-margin-top:0;min-height:0;height:calc(100svh - var(--nav-height,0px));overflow:hidden;background:#fff}
/* 2026-09-12 감사 [69][71]: 편지지와 우편벽이 화면 '높이'로만 커져 태블릿 세로에서 겹치고(-576px) 낮은 화면에서는 가운데가 34% 비었다.
   두 덩어리에 가로 상한(34vw/62vw)을 걸고, 남는 폭을 '사이 간격'과 '오른쪽 여백'으로 나눠 간격을 화면폭의 9~15%로 묶는다. */
.ctl{--ctlH:calc(100svh - var(--nav-height,0px));--ink:#171923;--muted:#55565b;--cobalt:#2446ed;--red:#e5372a;--err:#c62828;--paper:#f6efdc;--serif:"Libre Caslon Text",Georgia,serif;--mono:"IBM Plex Mono",monospace;--sans:Arial,sans-serif;--pad:clamp(20px,4vw,64px);--sheet:url(assets/contact/letterbox/sheet-kraft.webp?v=3);--sheetW:min(calc(var(--ctlH)*.56), 34vw);--sheetH:calc(var(--sheetW)/.80);--sheetInk:calc(var(--sheetW)*.9454);--stW:min(26vw, calc(var(--ctlH)*.4));--wallH:min(var(--ctlH), 62vw);--wallW:calc(var(--wallH)*.8404);--gapFree:calc(100% - var(--wallW) - var(--sheetW));--colGap:clamp(9vw, calc(var(--gapFree)/2), 15vw);--colR:max(calc(var(--pad) - var(--sheetW)*.0273), calc(var(--gapFree) - var(--colGap)));position:relative;width:100%;height:var(--ctlH);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
.ctl *{box-sizing:border-box}
.ctl .stage{position:relative;width:100%;height:var(--ctlH);overflow:hidden}
/* 왼쪽 우편 벽 */
.ctl #ctl-s1{position:absolute;left:0;bottom:0;height:var(--wallH);z-index:0}
.ctl #ctl-s1 .ctl-s1canvas{position:relative;display:block;height:100%;aspect-ratio:790/940}
.ctl #ctl-s1 img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.ctl #ctl-s1 .ctl-s1base{clip-path:url(#ctl-mascot-clip);mask-image:linear-gradient(to right,#000 87.2%,transparent 87.2%)}
.ctl #ctl-s1 .ctl-s1original{clip-path:url(#ctl-wall-clip)}
.ctl #ctl-s1 .ctl-s1char{clip-path:url(#ctl-mascot-clip);pointer-events:none}
/* 오른쪽 우체통 장면 — 편지가 장갑 안에 들어가도록 상자와 인물을 나눠 둔다 */
.ctl .s2{position:absolute;right:0;bottom:0;height:var(--ctlH);aspect-ratio:1090/940;opacity:0;pointer-events:none}
.ctl .s2 img{position:absolute;display:block;max-width:none}
.ctl #ctl-s2box{z-index:1}
.ctl #ctl-s2box img{left:0;top:0;width:100%}
.ctl #ctl-s2char{z-index:3}
.ctl .pose{left:0;top:0;width:100%;opacity:0}
.ctl #ctl-hold-mask{display:none}
.ctl #ctl-pWait{opacity:1}
.ctl #ctl-s2char.bump{animation:ctl-bump .5s cubic-bezier(.3,.9,.3,1) 1}
@keyframes ctl-bump{30%{transform:translateY(-9px) rotate(-.7deg)}62%{transform:translateY(2px) scaleY(.99)}}
/* CONTACT 글자(그림 일곱 장) */
.ctl .copy{position:absolute;right:calc(var(--colR) + var(--sheetW)*.0273);top:calc(var(--ctlH)*.1);width:var(--sheetInk);text-align:right;z-index:5}
.ctl .copy h2{margin:0;position:relative;display:block;aspect-ratio:4.797}
.ctl .copy h2 i{position:absolute;display:block;transform-origin:50% 88%;animation:ctl-ltrwob calc(2.05s + var(--i)*.15s) ease-in-out infinite;animation-delay:calc(var(--i) * -.33s)}
.ctl .copy h2 i img{display:block;width:100%;height:auto}
@keyframes ctl-ltrwob{0%{transform:translateY(0) rotate(0deg)}26%{transform:translateY(-3.6%) rotate(-3.2deg)}52%{transform:translateY(2.2%) rotate(2.4deg)}78%{transform:translateY(-1.5%) rotate(-1.3deg)}100%{transform:translateY(0) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){:where(html:not([data-motion-mode="full"])) .ctl .copy h2 i{animation:none}}
.ctl.reduced-motion .copy h1 i{animation:none}
.ctl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 편지지 */
.ctl .letter{visibility:hidden;position:absolute;right:var(--colR);top:calc(var(--ctlH)*.23);height:var(--sheetH);width:var(--sheetW);z-index:6;perspective:1600px;opacity:0;pointer-events:none}
.ctl .stage.open .letter{visibility:visible;opacity:1;pointer-events:auto}
/* 2026-09-12 감사 [17]: 보내고 나면 투명해진 편지지가 클릭을 가로채고 탭 순서에도 남아 있었다 — 장면에서 완전히 뺀다 */
.ctl .stage.sent .letter{visibility:hidden;pointer-events:none}
/* 건네진 뒤엔 장갑 층이 덮고, 넣은 뒤엔 우체통이 덮는다 */
.ctl .stage.inhand .letter{z-index:2}
.ctl .stage.inbox .letter{z-index:0}
.ctl .paper{position:absolute;inset:0;transform-style:preserve-3d;opacity:1}
.ctl .panel{position:absolute;left:0;right:0;height:33.333333%;transform-style:preserve-3d}
.ctl .panel.top{top:0;transform-origin:bottom}
.ctl .panel.mid{top:33.333333%;pointer-events:none}
.ctl .panel.bot{top:66.666667%;transform-origin:top}
.ctl .face{position:absolute;inset:0;backface-visibility:hidden;background-image:var(--sheet);background-size:100% 300%;background-repeat:no-repeat;overflow:hidden}
.ctl .panel.top .face.f{background-position:0 0}
.ctl .panel.bot .face.f{background-position:0 100%}
.ctl .panel.mid .face.f{background-position:0 50%}
.ctl .panel.top .face.b{background-position:0 0}
.ctl .panel.bot .face.b{background-position:0 100%}
.ctl .face.b{backface-visibility:hidden;left:3.3%;right:3.3%;transform:rotateX(180deg);background:#e2ccab;border:1px solid #504637;border-radius:0;overflow:hidden}
.ctl .face.b::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(23,25,35,.09),rgba(23,25,35,0) 26%,rgba(23,25,35,0) 74%,rgba(23,25,35,.05))}
.ctl .panel.top .face.b::after{background:linear-gradient(to top,rgba(23,25,35,.09),rgba(23,25,35,0) 26%,rgba(23,25,35,0) 74%,rgba(23,25,35,.05))}
.ctl .panel.top .face.b,.ctl .panel.bot .face.b{box-shadow:none}
.ctl .panel.top .face.b{background:#e2ccab}
.ctl .panel.top .face.b::after,.ctl .panel.bot .face.b::after{opacity:.65}
.ctl .folded-envelope{position:absolute;opacity:0;overflow:hidden;transform:translateZ(3px)}
.ctl .envelope-exterior{background-color:#e2ccab;background-image:linear-gradient(to bottom,transparent calc(50% - 1px),rgba(80,70,55,.34) 50%,rgba(255,255,255,.18) calc(50% + 1px),transparent calc(50% + 2px)),linear-gradient(180deg,rgba(255,255,255,.10),transparent 24%,rgba(82,61,37,.055));border:1px solid #504637}
.ctl .envelope-seal{position:absolute;left:80%;top:50%;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #a6251c;border-radius:50%;background:#e5372a;box-shadow:inset 0 0 0 2px rgba(255,224,186,.2),0 1px 1px rgba(23,25,35,.18);z-index:3}

.ctl .face.b::before{content:"";position:absolute;left:0;right:0;height:7px;pointer-events:none;z-index:2}
.ctl .panel.top .face.b::before{bottom:0;background:linear-gradient(to top,rgba(23,25,35,.26),rgba(23,25,35,.04) 50%,transparent)}
.ctl .panel.bot .face.b::before{top:0;background:linear-gradient(to bottom,rgba(23,25,35,.26),rgba(23,25,35,.04) 50%,transparent)}
.ctl .stage.sending .face.b{box-shadow:0 2px 3px rgba(23,25,35,.15)}
.ctl .openbtn{display:none}
@keyframes ctl-sheetin{from{opacity:0;transform:translateY(2.4vh) scale(.984)}to{opacity:1;transform:none}}
.ctl .letter.in{animation:ctl-sheetin .5s cubic-bezier(.2,.85,.25,1)}
/* 편지지 위 서식 */
.ctl .inner{position:absolute;inset:0;padding:15% 9% 5% 9%;transform:translateZ(1px);transition:opacity .3s;display:flex}
.ctl .f{display:grid;gap:4px;min-width:0}
.ctl .f>span{display:flex;gap:8px;align-items:baseline;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* 2026-09-12 감사 [39]: 한글 보조문구는 같은 px라도 획이 조밀해 11px 미만이 안 읽힌다 — 데스크톱 12px 하한 */
.ctl .f>span i{font:400 12px var(--sans);font-style:normal;color:#4a463c;text-transform:none;letter-spacing:0}
/* 2026-09-12 감사 [70]: 입력칸이 어느 화면에서도 29px였다 — 44px 최소 타깃을 준다 */
.ctl .f input,.ctl .f textarea{width:100%;min-height:44px;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:4px 0 5px;font:16px var(--sans);color:var(--ink);outline:0;border-radius:0}
/* 2026-09-12 감사 [15][82]: 포커스 표시가 1px 밑줄 색 변화뿐이라 두 상태 대비 2.65:1 — 2px 외곽선 + 2px 밑줄로 올린다 */
.ctl .f input:focus-visible,.ctl .f textarea:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-bottom-color:var(--cobalt);border-bottom-width:2px}
.ctl .f textarea{height:54px;resize:none}
.ctl .form>.f{grid-template-rows:auto minmax(0,1fr)}
.ctl .form>.f textarea{height:100%;min-height:54px}
.ctl .form>.message-field{grid-template-rows:auto minmax(54px,1fr) auto}
.ctl .selected-work{display:flex;align-items:center;gap:10px;min-width:0;min-height:34px;padding:3px 0;color:#4a463c;font:11px var(--mono);letter-spacing:.03em}
.ctl .selected-work[hidden]{display:none}
.ctl .selected-work__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl .selected-work__label b{font-weight:500;color:var(--ink)}
.ctl .selected-work__clear{flex:none;min-height:32px;padding:0 .8em;border:1px solid rgba(23,25,35,.55);background:transparent;color:var(--ink);font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:0}
.ctl .selected-work__clear:disabled{opacity:.5;cursor:default}
.ctl .selected-work__clear:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.ctl .form{display:grid;gap:11px;width:100%;grid-template-rows:auto minmax(0,1fr) auto}
.ctl .row{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.ctl .row>.f:nth-child(3){grid-column:1 / -1}
.ctl .hp{position:absolute;left:-9999px;opacity:0}
.ctl .f.bad input,.ctl .f.bad textarea{border-bottom-color:var(--red);border-bottom-width:2px}
/* 2026-09-12 감사 [20]: 색 하나로만 알리면 색을 구분 못 하는 사람에게 신호가 없다 — 이름표 옆에 글자로도 적는다 */
.ctl .f.bad>span:first-child::after{content:"필요";color:var(--err);font:500 10px var(--mono);letter-spacing:0;margin-left:auto}
/* 2026-09-12 감사 [117]: 입력 상한이 없어 길게 쓴 사람만 이유 없는 전송 실패를 만났다.
   상한의 80%를 넘어설 때만 남은 글자수가 라벨 오른쪽 끝에 나타난다 — 평소에는 화면에 없다. */
.ctl .f>span .cnt{margin-left:auto;flex:none;font:500 11px var(--mono);letter-spacing:.02em;color:#4a463c;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctl .f>span .cnt.full{color:var(--err)}
.ctl .f>span .cnt[hidden]{display:none}
/* '필요' 표시와 자리가 겹치므로 오류 때는 글자수를 감춘다 */
.ctl .f.bad>span:first-child .cnt{display:none}
/* 2026-09-12 감사 [21]: 동의를 안 하면 안내문만 뜨고 체크박스엔 아무 표시가 없었다 */
.ctl .consent.bad{outline:2px solid var(--err);outline-offset:4px}
@keyframes ctl-shakeit{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.ctl .paper.shake{animation:ctl-shakeit .3s ease}
/* 2026-09-12 감사 [118]: 오류 문구가 10.5px·대비 4.28:1 이라 틀렸다는 걸 못 읽었다 — 12px·#c62828(흰 바탕 5.63:1) */
.ctl .note{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--err);text-align:center;min-height:1.2em}
.ctl .note:empty{position:absolute;width:1px;height:1px;min-height:0;margin:0;overflow:hidden;clip-path:inset(50%)}
.ctl .note:not(:empty){font-weight:500}
.ctl .note[data-ok]{color:#2f6b2a}
.ctl .foot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px;padding-top:14px;border-top:1px solid rgba(23,25,35,.45)}
.ctl .consent{display:flex;gap:6px 12px;align-items:center;justify-content:center;flex-wrap:wrap;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ctl .consent label,.ctl .consent .pv,.ctl .consent i{white-space:nowrap}
.ctl .consent i{font:400 12px var(--sans);font-style:normal;color:#4a463c;text-transform:none;letter-spacing:0}
/* 2026-09-12 감사 [70][27][91]: 체크박스 13x13px·라벨 줄 높이 13px 이라 터치 기준(24px)의 절반이었다 */
.ctl .consent label{display:flex;gap:8px;align-items:center;min-height:44px;cursor:pointer}
.ctl .consent input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--red)}
/* 2026-09-12 감사 [60]: '내용 보기'가 <u> 죽은 글자였다 — 실제로 열리는 단추로 바꾼다 */
.ctl .consent .pv{display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:0 2px;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ctl .consent .pv i{color:var(--cobalt)}
.ctl .consent .pv:focus-visible,.ctl .send:focus-visible,.ctl .pvclose:focus-visible,.ctl .openbtn:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.ctl .consent input:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
/* 2026-09-12 감사 [70][93]: SEND 가 낮은 화면에서 34px·글자 6px 까지 줄었다 — 44px·13px 하한과 64px 상한 */
.ctl .send{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-width:46%;min-height:max(44px,3.1em);max-height:64px;padding:0 2.4em;border:.16em solid var(--ink);color:var(--ink);background:#fff;font-family:var(--mono);font-size:max(13px,calc(var(--sheetW)*.034));letter-spacing:.16em;text-transform:uppercase;cursor:pointer;white-space:nowrap;border-radius:0}
.ctl .sw{display:flex;align-items:flex-end;gap:.05em;height:1.75em;padding:.1em 0}
.ctl .sw i{display:block;height:100%;aspect-ratio:var(--ar);background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ctl .send:hover{background:var(--ink);color:#fff}
.ctl .send:active{transform:translateY(1px)}
.ctl .stamp{position:absolute;z-index:7;pointer-events:none;opacity:0;transform-origin:50% 50%;left:calc(var(--pad) + 3vw);top:calc(var(--ctlH)*.5 - var(--stW)*.55);width:var(--stW)}
.ctl .stamp img{display:block;width:100%;height:auto}
/* 2026-09-12 감사 [41]: 600 굵기를 불렀는데 index.html 은 400·500 만 받아와 방문자에겐 가짜 볼드가 걸렸다 */
.ctl .stamp .date{position:absolute;left:18%;right:18%;top:57.5%;text-align:center;font:500 calc(var(--stW)*.046) var(--mono);letter-spacing:.06em;color:#d8342a;filter:url(#ctl-dink);white-space:nowrap}
/* 2026-09-12 감사 [60]: 개인정보 안내 패널 — 편지지 위에 겹쳐 띄워 폼 높이를 흔들지 않는다 */
.ctl .privacy{position:absolute;inset:7% 6%;z-index:9;display:flex;flex-direction:column;gap:8px;padding:16px;background:#f3ebd5;border:1px solid rgba(23,25,35,.4);box-shadow:0 8px 24px rgba(23,25,35,.18);overflow:auto;overscroll-behavior:contain;text-align:left;isolation:isolate;transform:translateZ(10px)}
.ctl .privacy[hidden]{display:none}
.ctl .privacy h3{margin:0;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ctl .privacy dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:12px;line-height:1.5}
.ctl .privacy dt{font:500 11px var(--mono);letter-spacing:.04em;color:#4a463c;white-space:nowrap}
.ctl .privacy dd{margin:0;font-size:12px;color:var(--ink)}
.ctl .pvclose{align-self:flex-start;margin-top:6px;min-height:44px;padding:0 1.4em;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:0}
/* 모바일: 벽과 우체통을 위아래로, 편지는 WRITE 버튼으로 연다
   2026-09-12 감사 [69]: 세로가 더 긴 화면(768x1024 태블릿 세로)에서 가로 2열 배치가 무너져 편지지가 우편벽을 576px 덮었다.
   폭이 아니라 '세로가 더 길면' 1열로 간다. (JS 쪽 matchMedia 조건도 같은 문장으로 맞춰 두었다) */
@media (max-width:760px), (max-aspect-ratio:1/1){
/* --sheetW 에 세로 상한(--ctlH*.62)을 함께 건다. 태블릿 세로(768x1024)처럼 폭이 넓으면
   폭만 보고 키운 편지지(744px→높이 930px)가 무대(948px) 아래로 흘러넘쳐 SEND 가 잘렸다. */
/* 2026-09-18 contact-mobile-r1: 390x844 진입 프레임에서 그림이 아래 56% 에만 있고 위 44%(341px)가 흰 띠였다.
   원인은 --scene1 이 '폭 기준'(100vw*940/1010)으로만 커져서, 세로로 긴 폰에서는 남는 높이를 아무도 안 쓰기 때문.
   고치는 방식: 우편벽 높이를 '제목 블록이 쓰고 남은 높이 전부'로 잡고(=--scene1), 넘치는 폭은 왼쪽 선반 쪽으로만
   흘려보낸다(사다리·마스코트가 있는 오른쪽은 안 자른다). 잘리는 곳은 반복되는 선반 칸이라 화면 밖으로 이어지는 것처럼 읽힌다.
   --copyH 는 기존 .copy 높이 근사식(--sheetW*.342 + 4.4vw)과 같은 값이라, 아래 .stage:not(.open) .copy 의
   가운데정렬 식이 그대로 재사용되어 제목이 줄어든 띠 안에서 자동으로 위아래 같은 여백을 갖는다. */
.ctl{--pad:16px;--scene:min(var(--ctlH)*.5,100vw*940/1010);--copyH:calc(var(--sheetW)*0.342 + 4.4vw);--wallTop:calc(var(--ctlH)*.05 + var(--copyH));--scene1:calc(var(--ctlH) - var(--wallTop));--sheetW:min(calc(100vw - 24px), calc(var(--ctlH)*.62));--sheetH:calc(var(--sheetW)/.80);--colR:12px}
.ctl .s2{height:min(var(--scene),calc((100vw - 24px)*940/1090));right:12px}
.ctl #ctl-s1{height:var(--scene1);left:0;right:0;display:flex;justify-content:center}
/* 폭이 화면보다 넓어진 만큼만 오른쪽으로 밀어, 잘림을 전부 왼쪽(선반)으로 보낸다. 안 넘치면 max()가 0 이라 가운데 그대로. */
.ctl #ctl-s1 .ctl-s1canvas{transform:translateX(calc(max(0px, var(--scene1)*0.8404 - 100vw) * -0.5))}
.ctl .copy p{display:none}
.ctl .copy{top:calc(var(--ctlH)*.08);left:calc(50% - var(--sheetW)/2);right:auto;width:var(--sheetW);text-align:left;transition:top .5s cubic-bezier(.2,.85,.25,1)}
.ctl .stage:not(.open) .copy{top:calc((var(--ctlH) - var(--scene1) - (var(--sheetW)*0.342 + 4.4vw))/2)}
.ctl .letter{left:calc(50% - var(--sheetW)/2);right:auto;top:calc(var(--ctlH)*.19)}
.ctl .inner{padding:11% 8% 6% 8%}
.ctl .inner:has(.selected-work:not([hidden])){padding-bottom:3%}
.ctl .form:has(.selected-work:not([hidden])){grid-template-rows:auto minmax(108px,1fr) auto}
.ctl .form:has(.selected-work:not([hidden])) .foot{padding-top:7px}
.ctl .row{gap:6px 12px}
/* 2026-09-12 감사 [39]: 모바일 한글 보조문구 하한 11px */
.ctl .f{gap:3px}
.ctl .f>span{font-size:11px;gap:5px}
.ctl .f>span i{font-size:11px}
/* 2026-09-12 감사 [35][91]: 13px/22px 이라 아이폰 사파리가 포커스 때마다 화면을 확대했다 — 16px 하한 */
.ctl .f input,.ctl .f textarea{font-size:16px;padding:6px 0}
.ctl .form{gap:6px}
.ctl .form>.f textarea{min-height:44px}
/* 2026-09-12 감사 [27]: 동의줄만 터치 기준에서 빠져 있었다(체크박스 13px·라벨 13px·'내용 보기' 12px) */
.ctl .consent{font-size:10.5px;width:100%;justify-content:center;gap:4px 14px}
.ctl .consent i{font-size:11px}
.ctl .consent input{width:24px;height:24px}
.ctl .send{min-height:max(44px,3.2em);font-size:max(13px,calc(var(--sheetW)*.034));width:100%;justify-content:center}
.ctl .foot{align-items:stretch;gap:8px;margin-top:4px;padding-top:10px}
.ctl .note{font-size:12px}
.ctl .privacy{inset:10% 6% 7%;padding:14px}
.ctl .openbtn{display:inline-flex;align-items:center;justify-content:center;gap:.8em;width:100%;margin-top:4.4vw;min-height:3.6em;padding:0 1.2em;border:.16em solid var(--red);border-radius:0;background:#fff;color:#cf2a1e;   /* 감사 #D03: 흰 바탕 대비 4.28→5.25:1 */font:calc(var(--sheetW)*.034) var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .22s,transform .22s}
.ctl .openbtn svg{width:1.5em;height:auto;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.ctl .openbtn i{font:400 1em var(--sans);font-style:normal;text-transform:none;letter-spacing:0}
.ctl .openbtn:active{background:var(--red);color:#fff}
.ctl .stage.open .openbtn{opacity:0;transform:translateY(-8px);pointer-events:none}
.ctl .stamp{--stW:56vw;left:22px;top:calc(var(--ctlH)*.06)}
}

/* 2026-09-12 감사 [70]: 낮은 가로 화면(노트북 1280x650 등)은 편지지 안이 빠듯해 44px 타깃이 안 들어간다 — 여백을 줄여 자리를 만든다 */
@media (min-width:761px) and (min-aspect-ratio:1/1) and (max-height:820px){
/* 편지지 아래로 비어 있던 높이(1280x650 기준 41px)를 종이에 돌려준다 — 문의 내용 칸이 40px 한 줄까지 눌렸다 */
.ctl{--sheetW:min(calc(var(--ctlH)*.624), 34vw);--sheetH:calc(var(--sheetW)/.80)}
.ctl .letter{top:calc(var(--ctlH)*.16)}
.ctl .copy{top:calc(var(--ctlH)*.02)}
.ctl .inner{padding:13% 8% 4%}
.ctl .f{gap:3px}
.ctl .form{gap:6px}
.ctl .row{gap:6px 16px}
.ctl .form>.f textarea{min-height:40px}
.ctl .foot{margin-top:4px;padding-top:8px;gap:8px}
}

/* 2026-09-12 감사 [93]: 가로모드(844x390)에서 SEND 가 화면 3px 아래로 밀려나고 글자가 6px 였다.
   화면이 아주 낮으면 편지지를 가로로 눕히고(폭=높이*1.55) 폼을 2열로 접어 버튼을 화면 안에 들인다. */
@media (min-width:761px) and (min-aspect-ratio:1/1) and (max-height:520px){
.ctl{--sheetH:calc(var(--ctlH)*.86);--sheetW:min(calc(var(--sheetH)*1.55), 50vw)}
.ctl .letter{top:calc(var(--ctlH)*.12)}
.ctl .copy{top:calc(var(--ctlH)*.006);width:min(var(--sheetInk), calc(var(--ctlH)*.50))}
.ctl .inner{padding:8% 5% 3%}
.ctl .form{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px 14px}
.ctl .row{grid-column:1;grid-row:1 / span 2;grid-template-columns:1fr;align-content:start;gap:5px}
.ctl .row>.f:nth-child(3){grid-column:auto}
.ctl .form>.f{grid-column:2;grid-row:1}
.ctl .foot{grid-column:2;grid-row:2;align-self:end;margin-top:2px;padding-top:6px;gap:4px}
.ctl .form:has(.selected-work:not([hidden])){position:relative}
.ctl .form:has(.selected-work:not([hidden])) .message-field{grid-template-rows:auto minmax(46px,1fr)}
.ctl .form:has(.selected-work:not([hidden])) .selected-work{position:absolute;left:0;bottom:-7px;width:calc((100% - 14px)/2);min-height:32px;padding:0;z-index:1}
.ctl .form:has(.selected-work:not([hidden])) .selected-work__clear{min-height:30px}
.ctl .f{gap:2px}
.ctl .f>span{font-size:9px;gap:4px}
.ctl .f>span i{font-size:11px}
/* 2열로 접힌 뒤 오른쪽 칸의 남는 높이 — 문의 내용 칸에 준다(오류문구가 두 줄로 늘어나도 종이 안) */
.ctl .form>.f textarea{min-height:46px}
.ctl .consent{font-size:10px;gap:2px 10px}
.ctl .consent i{font-size:11px}
/* 2026-09-12 감사 [10]: 여기 26px 이 앞쪽 44px 규칙을 되돌려, 가로로 눕힌 폰에서만 동의줄이 26px 로 남아 있었다.
   자리를 만드는 방법은 '줄여서 끼우기'가 아니라 '두 줄을 한 줄로 합치기'다 — 이 좁은 칸에서만 영문 보조어를
   감추면 '☐ 개인정보 동의  내용 보기'가 한 줄에 들어가고, 동의줄 전체 높이가 오히려 54px→44px 로 줄어든다. */
.ctl .consent label,.ctl .consent .pv{min-height:44px}
.ctl .consent .en{display:none}
.ctl .consent input{width:24px;height:24px}
.ctl .send{min-width:0;width:100%;padding:0 1.2em;font-size:12px}
.ctl .note{font-size:12px;margin-top:2px}
.ctl .stamp{--stW:min(34vw, calc(var(--ctlH)*.7))}
.ctl .privacy{padding:12px;gap:6px}
/* 2026-09-12 감사 [10]: 36px 이라 닫기 단추만 터치 기준에서 빠져 있었다 */
.ctl .pvclose{min-height:44px}
}

/* 2026-09-12 감사 [5][14][15]: 고대비 모드(forced-colors: active)에서 CONTACT 가 무너진다.
   원인은 두 가지다.
   (1) 편지지는 <img> 가 아니라 배경 '그림'이라 고대비가 색을 안 바꾼다. 그래서 종이는 베이지로 남고
       그 위의 밑줄·체크상자만 시스템 색(흰색)으로 바뀌어 대비 1.61:1 로 사라졌다.
   (2) SEND 와 CONTACT 는 진짜 글자가 아니라 그림이다. 마스크 글자는 배경색이 강제로 바탕색이 되어 사라지고,
       <img> 글자는 색이 아예 안 바뀌어 검은 바탕에 검은 글자로 묻혔다.
   고치는 방식: 종이 그림을 끄고 시스템 색 면으로 바꾼 뒤, 그림 글자는 시스템 글자색으로 다시 칠한다. */
@media (forced-colors: active){
/* 종이를 시스템 바탕색 면으로 — 밑줄·글자·체크상자가 사용자가 고른 색을 되찾는다 */
.ctl .paper{background-color:Canvas;outline:1px solid CanvasText}
.ctl .face,.ctl .face.b{background-image:none}
.ctl .face.b::after,.ctl .face.b::before{content:none}
/* 마스크로 그린 SEND 글자: currentColor 가 바탕색으로 강제돼 검은 상자만 남았다 — 단추 글자색으로 칠한다 */
.ctl .send .sw i{background:ButtonText}
/* 그림으로 붙인 CONTACT 제목: 같은 그림을 마스크로 써서 시스템 글자색을 입힌다(손글씨 모양은 그대로) */
.ctl .copy h2 i{background:CanvasText;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ctl .copy h2 i img{visibility:hidden}
}

/* Short portrait keeps the writing area usable; extra validation stays scrollable inside the paper. */
@media (max-width:760px) and (max-height:700px) and (max-aspect-ratio:1/1){
.ctl{--sheetH:calc(var(--ctlH)*.84)}
.ctl .letter{top:calc(var(--ctlH)*.12)}
.ctl .stage.open .copy{top:calc(var(--ctlH)*.015);width:calc(var(--sheetW)*.8)}
.ctl .inner{padding-top:7%;overflow-y:auto;overscroll-behavior:contain}
.ctl .form{grid-template-rows:auto minmax(116px,1fr) auto}
.ctl .consent .en{display:none}
}

/* Orthographic illustration camera keeps the handoff crop registered while the paper tilts. */
.ctl .stage.sending .letter{perspective:none}
.ctl .panel.top .face.b::before,.ctl .panel.top .face.b::after{display:none}