/* 웹 첫 화면 전시관 — 3D 무대 위에 얹는 HTML(메뉴·제목·버튼). 글자 크기는 무대 크기(cqw·cqh)를 따른다 */
.wh{overflow:hidden;container-type:size;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;word-break:keep-all}
.wh>canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .9s ease}
/* 준비 중: 캔버스는 숨기고 장면 색 배경 위로 옅은 빛이 천천히 지나간다(CSS 애니메이션이라 준비 작업과 상관없이 부드럽다) → 준비되면 캔버스가 서서히 */
.wh.wh-ready>canvas{opacity:1}
.wh::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);transform:translateX(-100%);opacity:0;transition:opacity .6s}
.wh.wh-wait::before{opacity:1;animation:whsweep 1.8s ease-in-out infinite}
@keyframes whsweep{to{transform:translateX(100%)}}
/* 글자판은 덩어리마다 한 프레임씩 살짝 떠오르며 나타난다(web-kit.js) */
.wh-in{animation:whin .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes whin{from{opacity:0;translate:0 10px}}
.wh-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.wh-ui button{pointer-events:auto;cursor:pointer;font-family:inherit;border:0}
.wh-nav{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 32px}
.wh-brand{display:flex;align-items:center;gap:10px;min-width:0}
.wh-tag{font:700 10.5px Pretendard,sans-serif;font-style:normal;letter-spacing:.02em;padding:3px 7px;border-radius:5px;border:1px solid currentColor;opacity:.6;white-space:nowrap}
.wh-menu{display:flex;gap:28px;font-size:14px;font-weight:600;pointer-events:auto}
.wh-menu span{cursor:pointer;opacity:.8;transition:opacity .2s}.wh-menu span:hover{opacity:1}
@media (max-width:900px){.wh-menu{display:none}}
@media (max-width:700px){.wh-nav{padding:14px 16px;gap:10px}}
/* 쓸어 넘기는 빛줄기는 글자판 밑으로 지나간다(글자가 빛에 씻기지 않게, 유리 판 안에선 번져 보인다) */
.wh>.mode-sweep{z-index:1}
/* 기본 틀 ↔ 사진 전환: 가게 메뉴줄 아래 왼쪽(오른쪽 위는 가게 버튼·글 판 자리) */
.wh>.mode-sw{top:80px;left:32px;right:auto;align-items:flex-start}
.wh>.mode-sw .mode-note{text-align:left}
@media (max-width:700px){.wh>.mode-sw{top:62px;left:16px}}

/* 1. 구름 위 패러글라이딩 — 왼쪽 글 카드, 오른쪽 글라이더 */
.wg{background:linear-gradient(180deg,#8fb6e0 0%,#cddbe9 45%,#f6e7d6 62%,#eef1f5 100%);color:#132440}
.wg .wh-ui{transition:color .9s}
.wg-logo{display:flex;align-items:baseline;gap:7px;font:800 20px Pretendard,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.wg-logo svg{width:26px;height:15px;align-self:center;color:#ff6a36}
.wg-logo small{font-size:12px;font-weight:600;opacity:.65;letter-spacing:0}
.wg-call{font:700 13px Pretendard,sans-serif;padding:10px 16px;border-radius:99px;background:rgba(255,255,255,.55);color:inherit;backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(19,36,64,.12);transition:background .9s}
.wg-ui::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 75% at 12% 55%,rgba(246,242,236,.72),rgba(246,242,236,0) 72%);transition:opacity .9s}
.wg.dusk .wg-ui::before{background:radial-gradient(60% 75% at 12% 55%,rgba(52,26,66,.5),rgba(52,26,66,0) 70%)}
.wg-card{position:absolute;left:clamp(20px,5cqw,80px);top:50%;transform:translateY(-46%);width:min(480px,40cqw);pointer-events:auto}
.wg-eye{display:inline-flex;align-items:center;gap:8px;font:700 12.5px Pretendard,sans-serif;letter-spacing:.04em;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.5);backdrop-filter:blur(8px);transition:background .9s}
.wg-eye i{width:7px;height:7px;border-radius:50%;background:#ff6a36;box-shadow:0 0 0 3px rgba(255,106,54,.22)}
.wg-swap{transition:opacity .35s,transform .35s}.wg-swap.out{opacity:0;transform:translateY(8px)}
.wg-swap h1{font:700 clamp(34px,min(4.3cqw,8.2cqh),62px)/1.16 'Gowun Batang',Pretendard,serif;letter-spacing:-.035em;margin-top:18px}
.wg-swap h1 span{display:block}.wg-swap h1 span+span{color:#ff5a24;transition:color .9s}
.wg-swap p{margin-top:14px;font-size:clamp(14.5px,1.15cqw,17px);line-height:1.65;font-weight:500;opacity:.82;max-width:400px}
.wg-facts{list-style:none;display:flex;margin-top:22px;border-radius:14px;background:rgba(255,255,255,.42);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);max-width:420px;transition:background .9s,box-shadow .9s}
.wg-facts li{flex:1;padding:12px 14px;font-size:12px;font-weight:600;opacity:.9}
.wg-facts li+li{border-left:1px solid rgba(19,36,64,.1)}
.wg-facts b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
.wg-row{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.wg-cta{display:inline-flex;align-items:center;gap:10px;font:800 15px Pretendard,sans-serif;padding:14px 22px;border-radius:14px;background:#ff6a36;color:#fff;box-shadow:0 10px 26px rgba(255,106,54,.35)}
.wg-cta span{transition:transform .25s}.wg-cta:hover span{transform:translateX(3px)}
.wg-seg{display:flex;padding:4px;border-radius:12px;background:rgba(19,36,64,.1);backdrop-filter:blur(8px);transition:background .9s}
.wg-seg button{font:700 13px Pretendard,sans-serif;padding:9px 13px;border-radius:9px;background:transparent;color:inherit;opacity:.7;transition:background .3s,opacity .3s,color .3s}
.wg-seg button.on{background:#fff;opacity:1;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.wg.dusk{color:#fff5ec}
.wg.dusk .wg-swap h1 span+span{color:#ffb27a}
.wg.dusk .wg-call,.wg.dusk .wg-eye{background:rgba(40,24,60,.4)}
.wg.dusk .wg-facts{background:rgba(40,24,60,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.wg.dusk .wg-facts li+li{border-color:rgba(255,255,255,.14)}
.wg.dusk .wg-seg{background:rgba(255,255,255,.12)}
.wg.dusk .wg-seg button.on{background:#ff6a36;color:#fff}
.wg.dusk .wg-card{text-shadow:0 2px 20px rgba(40,10,40,.35)}
@media (max-width:700px){
  .wg-ui::before{display:none}
  .wg-logo{font-size:17px}.wg-logo small{display:none}
  .wg-call{padding:8px 12px;font-size:12px}
  .wg-card{left:12px;right:12px;top:auto;bottom:12px;transform:none;width:auto;padding:16px 16px 14px;border-radius:18px;background:rgba(255,250,244,.62);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(19,36,64,.12);transition:background .9s}
  .wg.dusk .wg-card{background:rgba(36,22,56,.55)}
  .wg-eye{font-size:11px;padding:5px 10px}
  .wg-swap h1{font-size:28px;margin-top:10px}
  .wg-swap p{font-size:13.5px;margin-top:8px;line-height:1.55}
  .wg-facts{display:none}
  .wg-row{margin-top:12px;gap:8px;flex-wrap:nowrap}
  .wg-cta{padding:12px 16px;font-size:14px;flex:0 0 auto}
  .wg-seg button{padding:8px 9px;font-size:12px}
}

/* 2. 밤바다 갈치낚시 배 — 오른쪽 위 유리 판, 왼쪽 아래 배 */
.wb{background:linear-gradient(180deg,#02060f 0%,#0b1b33 48%,#02070f 56%,#021018 100%);color:#eef3f8}
.wb-logo{display:flex;align-items:baseline;gap:8px;font:800 19px Pretendard,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.wb-logo svg{width:28px;height:14px;align-self:center;color:#cfe6ff}
.wb-logo small{font-size:12px;font-weight:600;opacity:.6;letter-spacing:0}
.wb-call{font:700 13px Pretendard,sans-serif;padding:10px 16px;border-radius:99px;background:rgba(255,255,255,.08);color:#eef3f8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.wb-panel{position:absolute;right:clamp(18px,3.4cqw,56px);top:clamp(76px,12cqh,110px);width:min(400px,34cqw);padding:24px 24px 22px;border-radius:22px;background:linear-gradient(160deg,rgba(22,36,58,.62),rgba(6,12,24,.5));backdrop-filter:blur(16px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:auto}
.wb-live{display:inline-flex;align-items:center;gap:8px;font:700 12px Pretendard,sans-serif;color:#b9f5dc}
.wb-live i{position:relative;width:7px;height:7px;border-radius:50%;background:#4ef0b0}
.wb-live i::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(78,240,176,.6);animation:wblive 2s infinite}
@keyframes wblive{70%,100%{transform:scale(3.3);opacity:0}}
.wb-panel h1{font:800 clamp(30px,min(3.1cqw,6.4cqh),46px)/1.18 Pretendard,sans-serif;letter-spacing:-.04em;margin-top:12px}
.wb-panel h1 em{font-style:normal;background:linear-gradient(100deg,#f6fbff 0%,#9fb4c8 38%,#ffffff 52%,#8ea3b8 70%,#e9f2fa 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wbsilver 5s ease-in-out infinite}
@keyframes wbsilver{50%{background-position:100% 0}}
.wb-panel p{margin-top:12px;font-size:14.5px;line-height:1.65;color:#c3cfdc}
.wb-chips{list-style:none;display:flex;gap:8px;margin-top:16px}
.wb-chips li{flex:1;padding:10px 10px 9px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:11.5px;color:#aebccb;font-weight:600}
.wb-chips b{display:block;font-size:16px;color:#fff;font-weight:800;letter-spacing:-.02em;margin-bottom:1px}
.wb-row{display:flex;align-items:center;gap:14px;margin-top:18px}
.wb-cta{font:800 15px Pretendard,sans-serif;padding:14px 24px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#d9e3ec);color:#0b1624;box-shadow:0 8px 24px rgba(160,220,255,.18)}
.wb-row span{font-size:14px;font-weight:700;line-height:1.35}
.wb-row small{font-size:12px;font-weight:500;color:#93a3b5}
@media (max-width:700px){
  .wb-logo{font-size:17px}.wb-logo small{display:none}
  .wb-call{padding:8px 12px;font-size:12px}
  .wb-panel{left:12px;right:12px;top:auto;bottom:12px;width:auto;padding:16px 16px 14px;border-radius:18px}
  .wb-panel h1{font-size:27px;margin-top:8px}
  .wb-panel p{font-size:13.5px;margin-top:8px;line-height:1.55}
  .wb-chips{margin-top:10px;gap:6px}.wb-chips li{padding:8px 8px 7px;font-size:11px}.wb-chips b{font-size:14.5px}
  .wb-row{margin-top:12px}.wb-cta{padding:12px 18px;font-size:14px}
  .wb-row span{font-size:13px}
}

/* 3. 편백숲 길 → 계곡 펜션 — 왼쪽 세로쓰기 제목, 끝에서 오른쪽 아래 예약 카드 */
.wf{background:linear-gradient(180deg,#8e9670 0%,#b9bf98 55%,#6b5a40 100%);color:#fff;touch-action:none;cursor:grab}
.wf:active{cursor:grabbing}
.wf-logo{display:flex;align-items:center;gap:8px;font:700 19px 'Gowun Batang',Pretendard,serif;letter-spacing:-.02em;white-space:nowrap;text-shadow:0 1px 12px rgba(30,24,10,.35)}
.wf-logo svg{width:18px;height:20px}
.wf-right{display:flex;align-items:center;gap:10px}
.wf-dist{font:600 13px Pretendard,sans-serif;padding:9px 14px;border-radius:99px;background:rgba(26,30,20,.38);backdrop-filter:blur(10px);white-space:nowrap;font-variant-numeric:tabular-nums}
.wf-dist b{font-weight:700}
.wf-book{background:#f3e7cf;color:#2b2112;font:800 13px Pretendard,sans-serif;padding:10px 16px;border-radius:99px}
.wf-title{position:absolute;left:clamp(22px,6cqw,96px);top:50%;transform:translateY(-50%);display:flex;align-items:flex-end;gap:clamp(18px,2.4cqw,34px);text-shadow:0 2px 12px rgba(40,34,14,.45);will-change:opacity,transform}
.wf-title::before{content:'';position:absolute;inset:-70px -90px -70px -80px;z-index:-1;background:radial-gradient(closest-side,rgba(30,34,16,.5),rgba(30,34,16,.28) 55%,transparent);pointer-events:none}
.wf-title h1{writing-mode:vertical-rl;font:700 clamp(34px,min(3.6cqw,6.8cqh),54px)/1.45 'Gowun Batang',Pretendard,serif;letter-spacing:.08em}
.wf-title h1 span{display:block}
.wf-title h1 span+span{color:#fff1c8}
.wf-title p{max-width:230px;font-size:14.5px;line-height:1.75;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(20,18,8,.6),0 0 10px rgba(20,18,8,.45);padding-bottom:6px;border-left:1px solid rgba(255,255,255,.5);padding-left:14px}
.wf-mid{position:absolute;left:clamp(22px,6cqw,96px);bottom:64px;display:flex;align-items:center;gap:10px;font:500 17px 'Gowun Batang',Pretendard,serif;padding:10px 16px;border-radius:12px;background:rgba(30,36,22,.32);backdrop-filter:blur(8px);opacity:0;white-space:nowrap}
.wf-mid i{width:22px;height:1px;background:currentColor}
.wf-end{position:absolute;right:clamp(18px,4cqw,64px);bottom:clamp(28px,7cqh,72px);width:min(380px,34cqw);padding:22px 22px 20px;border-radius:20px;background:linear-gradient(160deg,rgba(40,32,48,.66),rgba(22,18,30,.6));backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,220,170,.14);opacity:0;pointer-events:auto}
.wf-end small{font:700 12px Pretendard,sans-serif;color:#ffcf94;letter-spacing:.02em}
.wf-end h2{font:700 clamp(28px,min(2.8cqw,5.6cqh),40px)/1.22 'Gowun Batang',Pretendard,serif;letter-spacing:-.03em;margin-top:10px}
.wf-end h2 em{font-style:normal;color:#ffd9a6}
.wf-end ul{list-style:none;display:flex;gap:6px;margin-top:14px}
.wf-end li{flex:1;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.07);font-size:11.5px;color:#d9d2dc;font-weight:600}
.wf-end li b{display:block;font-size:15px;color:#fff;font-weight:800}
.wf-end button{margin-top:16px;width:100%;background:linear-gradient(180deg,#ffc27a,#f0a052);color:#2a1606;font:800 15px Pretendard,sans-serif;padding:14px 20px;border-radius:12px;box-shadow:0 8px 22px rgba(240,160,82,.3)}
/* 사진 모습: 끝 카드는 왼쪽(오른쪽은 사진 속 펜션), 한 장 사진을 셋으로 잘라 객실·데크·계곡 줄 */
/* 사진 줄은 기본 틀에서도 배치는 해 두고(흐름 밖·안 보임) 사진 모습일 때 흐름에 넣는다 — 사진이 붙는 순간 한 번에 올려 두어, 쓸어 넘기는 도중 그림을 새로 올리느라 멈추지 않게 */
.wf-rooms{display:flex;gap:8px;margin-top:12px;position:absolute;left:0;right:0;visibility:hidden}
.wf.is-photo .wf-rooms{position:static;visibility:visible}
.wf.is-photo .wf-end{left:clamp(18px,4cqw,64px);right:auto}
.wf-rooms figure{flex:1;min-width:0}
.wf-rooms i{display:block;aspect-ratio:5/4;border-radius:10px;overflow:hidden;background:#3a3040;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.wf-pic{display:block;width:100%;height:100%;object-fit:cover}
/* 사진 모습: 걷는 동안 오른쪽 아래 '길 끝' 미리보기(사진이 천천히 다가온다) */
.wf-peek{display:none;position:absolute;right:clamp(18px,4cqw,64px);bottom:clamp(28px,7cqh,72px);width:230px;padding:8px 8px 10px;border-radius:16px;background:rgba(30,26,20,.42);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);opacity:0}
.wf.has-photo .wf-peek{display:block}
.wf-peek i{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#3a3040}
.wf-peek .wf-pic{animation:wfpeek 14s ease-in-out infinite alternate}
@keyframes wfpeek{from{transform:scale(1.12) translate(2%,1%)}to{transform:scale(1)}}
.wf-peek span{display:block;padding:8px 4px 0}
.wf-peek small{display:block;font:600 11px Pretendard,sans-serif;color:#e9dcc0;letter-spacing:.02em}
.wf-peek b{display:block;margin-top:2px;font:700 16px 'Gowun Batang',Pretendard,serif;color:#fff}
.wf-rooms figcaption{margin-top:5px;font:700 11.5px Pretendard,sans-serif;color:#e6dde8;text-align:center}
.wf-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;font:600 12.5px Pretendard,sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.92);transition:opacity .6s;white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.wf-hint i{width:14px;height:14px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg);animation:wfdown 1.6s ease-in-out infinite}
@keyframes wfdown{0%,100%{translate:0 -3px;opacity:.5}50%{translate:0 4px;opacity:1}}
.wf-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
.wf-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#d9e6a8,#ffc27a);box-shadow:0 0 12px rgba(255,194,122,.7)}
@media (max-width:700px){
  .wf-logo{font-size:17px}
  .wf-dist{padding:7px 11px;font-size:12px}.wf-book{display:none}
  .wf-title{left:18px;right:18px;top:46%;flex-direction:row;align-items:flex-end;gap:16px}
  .wf-title h1{font-size:34px}
  .wf-title p{font-size:13.5px;max-width:none;flex:1;line-height:1.65}
  .wf-mid{left:16px;bottom:58px;font-size:15px}
  .wf-end{left:12px;right:12px;bottom:14px;width:auto;padding:16px 16px 14px;border-radius:18px}
  .wf-end h2{font-size:27px}
  .wf-end ul{margin-top:10px}.wf-end button{margin-top:12px;padding:12px}
  .wf.is-photo .wf-end{left:12px;right:12px}
  .wf-rooms{margin-top:10px;gap:6px}.wf-rooms i{aspect-ratio:2/1;border-radius:8px}
  .wf-peek{right:12px;bottom:70px;width:124px;padding:6px 6px 7px;border-radius:12px}.wf-peek span{padding:5px 2px 0}.wf-peek small{font-size:9.5px}.wf-peek b{font-size:13px}.wf-rooms figcaption{margin-top:3px;font-size:11px}
}

/* 4. 대화하는 마스코트 — 민트 배경, 왼쪽 강아지, 오른쪽 대화창 */
.wm{background:radial-gradient(80% 90% at 32% 45%,#e9fbf5 0%,#bfeee0 45%,#86d4c2 100%);color:#113c36}
.wm-logo{display:flex;align-items:center;gap:8px;font:800 19px Pretendard,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.wm-logo svg{width:20px;height:20px;color:#ff6f61}
.wm-cta{font:800 13px Pretendard,sans-serif;padding:10px 18px;border-radius:99px;background:#134b43;color:#fff}
.wm-chat{position:absolute;right:clamp(18px,4cqw,64px);top:52%;transform:translateY(-50%);width:min(420px,38cqw);padding:18px 18px 16px;border-radius:24px;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 12px 28px rgba(20,90,78,.14),inset 0 0 0 1px rgba(255,255,255,.8);pointer-events:auto}
.wm-chat header{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid rgba(17,60,54,.08)}
.wm-av{position:relative;overflow:hidden;width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#ffd6a8,#f0a868);display:grid;place-items:center;color:#fff;flex:0 0 auto;box-shadow:0 0 0 3px #fff}
.wm-av svg{width:20px;height:20px}
.wm-chat header b{display:block;font-size:15.5px;font-weight:800}
.wm-chat header small{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#4c7a72}
.wm-chat header em{width:7px;height:7px;border-radius:50%;background:#27c28f}
.wm-log{display:flex;flex-direction:column;gap:8px;padding:14px 0 4px;min-height:180px}
.wm-b{max-width:88%;font-size:15px;line-height:1.5;font-weight:500;padding:10px 14px;border-radius:16px;animation:wmin .3s ease-out}
.wm-b.bot{align-self:flex-start;background:#eaf8f3;border-top-left-radius:5px}
.wm-b.me{align-self:flex-end;background:#18695e;color:#fff;font-weight:700;border-top-right-radius:5px}
@keyframes wmin{from{opacity:0;transform:translateY(6px)}}
.wm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.wm-chips button{font:700 14px Pretendard,sans-serif;padding:10px 15px;border-radius:99px;background:#fff;color:#18695e;box-shadow:inset 0 0 0 1.5px #9ad8c8;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s,background .2s,color .2s;pointer-events:none}
.wm-chips.show button{opacity:1;transform:none;pointer-events:auto}
.wm-chips.show button:nth-child(2){transition-delay:.08s}.wm-chips.show button:nth-child(3){transition-delay:.16s}.wm-chips.show button:nth-child(4){transition-delay:.24s}
.wm-chips button:hover{background:#effbf7}
.wm-chips button.on{background:#ff6f61;color:#fff;box-shadow:none;transition-delay:0s}
/* 사진 모습: 대화창 얼굴=사진 동그라미, 답 끝 사진 말풍선, 마스코트 옆 폴라로이드(마우스 쪽으로 기울기) */
.wm-av .wm-ph{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s}
.wm.is-photo .wm-av .wm-ph{opacity:1}
.wm-pic{align-self:flex-start;width:min(200px,58%);padding:6px 6px 8px;border-radius:16px;border-top-left-radius:5px;background:#eaf8f3;animation:wmin .4s ease-out}
.wm-pic .wm-ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:11px}
.wm-pic figcaption{margin-top:6px;padding:0 4px;font-size:12px;font-weight:700;color:#4c7a72}
.wm-polar{position:absolute;left:46cqw;top:44%;width:170px;padding:8px 8px 10px;background:#fffdf8;border-radius:4px;box-shadow:0 14px 30px rgba(20,90,78,.24),0 2px 6px rgba(20,90,78,.12);transform:perspective(700px) translateZ(calc(var(--lift,0) * 40px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(4deg);pointer-events:none}
.wm-polwrap{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.wm.is-photo .wm-polwrap{opacity:1}
.wm-polar i{display:block;aspect-ratio:1;border-radius:2px;overflow:hidden;background:#f1e6d8}
.wm-polar .wm-ph{display:block;width:100%;height:100%}
.wm-polar figcaption{margin-top:8px;font:700 13px 'Gowun Batang',Pretendard,serif;color:#3d5a55;text-align:center}
.wm-polar small{margin-left:6px;font:700 10px Pretendard,sans-serif;padding:1px 5px;border-radius:4px;background:#e3f4ee;color:#4c7a72;vertical-align:1px}
.wm .typing::after{content:'';display:inline-block;width:2px;height:1em;background:currentColor;margin-left:3px;vertical-align:-2px;animation:wmcaret .8s steps(1) infinite}
@keyframes wmcaret{50%{opacity:0}}
@media (max-width:700px){
  .wm{background:radial-gradient(120% 70% at 50% 28%,#e9fbf5 0%,#bfeee0 50%,#86d4c2 100%)}
  .wm-logo{font-size:17px}
  .wm-cta{padding:8px 13px;font-size:12px}
  .wm-chat{left:10px;right:10px;top:auto;bottom:10px;transform:none;width:auto;padding:12px 12px 12px;border-radius:20px}
  .wm-chat header{padding-bottom:9px;gap:9px}.wm-av{width:32px;height:32px}.wm-av svg{width:16px;height:16px}
  .wm-chat header b{font-size:14px}.wm-chat header small{font-size:11px}
  .wm-log{gap:6px;padding:9px 0 2px;min-height:0}
  .wm-b{font-size:13.5px;padding:8px 11px;line-height:1.45}
  .wm-chips{margin-top:8px;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.wm-chips::-webkit-scrollbar{display:none}
  .wm-chips button{font-size:13px;padding:8px 12px;flex:0 0 auto}
  .wm-log:has(.wm-b.me)>.wm-b:nth-child(-n+2){display:none}
  .wm-pic{display:flex;align-items:center;gap:10px;width:auto;flex:0 0 auto;padding:5px 12px 5px 5px}
  .wm-pic .wm-ph{width:64px;aspect-ratio:1;border-radius:10px}
  .wm-pic figcaption{margin:0;padding:0;font-size:12px}
  .wm-polar{left:auto;right:10px;top:150px;width:96px;padding:5px 5px 6px}
  .wm-polar figcaption{margin-top:4px;font-size:10.5px}.wm-polar small{display:table;margin:2px auto 0;font-size:9px}
}