/* 폰 첫 화면(책갈피 패널) — phone.js 가 html 에 phone-on 을 붙였을 때만 적용. PC 는 영향 없음. */
.pnav,.papp,.ppill,.pscrim,.pdrawer{display:none}
html.phone-on,html.phone-on body{height:100%;overflow:hidden;overscroll-behavior:none;background:#fff}
html.phone-on .skip,html.phone-on .nav,html.phone-on .stage,html.phone-on .scenes,html.phone-on .homefab,html.phone-on .rooms-list,html.phone-on .section,html.phone-on .foot,html.phone-on .zoom{display:none!important}
html.phone-on .pnav{display:flex}
html.phone-on .papp,html.phone-on .ppill,html.phone-on .pscrim,html.phone-on .pdrawer{display:block}

/* 상단 고정 */
.pnav{position:fixed;left:0;right:0;top:0;height:60px;padding:0 14px 0 16px;align-items:center;gap:10px;background:var(--cobalt);color:#fff;z-index:200}
.pbrand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:16px;letter-spacing:-.01em;text-decoration:none;margin-right:auto}
.pname2{display:flex;flex-direction:column;line-height:1.15}.pname2 b{font-size:16px;letter-spacing:-.01em}.pname2 small{margin-top:2px;font-size:11px;font-weight:700;color:var(--lime);letter-spacing:-.01em}
.pmark{width:30px;height:30px;border-radius:8px;background:#fff;display:grid;place-items:center}
.pmark img{width:22px;height:22px;display:block}
.pblog{color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border:1px solid rgba(255,255,255,.7);border-radius:999px;text-decoration:none}
.pmenu{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:#fff;border-radius:10px;cursor:pointer}

/* 패널 무대 */
.papp{position:fixed;left:0;right:0;top:60px;bottom:calc(84px + env(safe-area-inset-bottom));overflow:hidden;background:#fff;z-index:1}
.ppanel{position:absolute;left:0;right:0;top:0;border-radius:24px 24px 0 0;overflow:hidden;transform-origin:50% 0;will-change:transform;
  transition:transform .45s cubic-bezier(.3,1.1,.4,1);box-shadow:0 -6px 18px rgba(14,42,122,.12);color:#fff}
.papp.intro .ppanel{transform:translate3d(0,115%,0)!important;transition:none}
.phead{display:flex;align-items:center;gap:8px;width:100%;height:46px;padding:0 18px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pno{font-size:12px;font-weight:700;letter-spacing:.04em;opacity:.7}
.pname{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pchev{margin-left:auto;opacity:.7;transition:transform .3s}
.ppanel.on .pchev{transform:rotate(180deg);opacity:.0}
.pbody{height:calc(100% - 46px);overflow-y:auto;overscroll-behavior:contain;padding:6px 20px 112px;-webkit-overflow-scrolling:touch}
.pbody>*{opacity:0;transform:translateY(10px)}
.ppanel.on .pbody>*{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease;transition-delay:calc(.1s + var(--i,0)*.05s)}
.ppanel:not(.on) .pbody{visibility:hidden}
.pbody h2{margin:6px 0 14px;font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.pbody .lead{margin:0 0 16px;font-size:15px;line-height:1.6;opacity:.85}

/* 색 */
.p-navy{background:var(--navy)}
.p-white{background:#fff;color:var(--ink);border:2px solid var(--cobalt);border-bottom:0}
.p-cobalt{background:var(--cobalt)}
.p-deep{background:var(--cobalt-deep)}
.p-gray{background:#EEF0F5;color:var(--ink)}
.p-ink{background:var(--lime);color:var(--ink)}
.p-white .pno,.p-white .pname{color:var(--cobalt);opacity:1}

/* 공통 버튼 */
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;font-size:15px;font-weight:700;text-decoration:none;letter-spacing:-.01em}
.pbtn.solid{background:var(--cobalt);color:#fff}
.pbtn.solid-w{background:#fff;color:var(--cobalt);margin-top:6px}
.pbtn.line{border:1.5px solid currentColor;color:inherit}
.p-white .pbtn.line{color:var(--cobalt)}
.acts{display:flex;gap:10px;margin:14px 0 0}.acts .pbtn{flex:1}

/* 1 시뮬레이션 */
.big{display:block;position:relative;margin:0 0 10px;padding:14px 44px 14px 16px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none}
.big .t{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.big .d{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:#fff}
.big .w{display:block;margin-top:6px;font-size:12px;color:rgba(255,255,255,.65)}
.big i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;font-size:20px;color:var(--lime)}
.big.off{opacity:.55;border-style:dashed}.big.off .d{font-size:13px}

/* 2 상담 */
.when{list-style:none;margin:0;padding:0}
.when li::before{display:none!important}.when li{padding:0!important;border-top:1px solid var(--line)}.when li:last-child{border-bottom:1px solid var(--line)}
.when a{display:block;position:relative;padding:11px 74px 11px 0;color:var(--ink);text-decoration:none}
.when b{display:block;font-size:16px;color:var(--cobalt)}
.when span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.when em{position:absolute;right:0;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--cobalt);font-weight:700}
.fact{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--ink-2)}

/* 3·4 브리핑 */
.upd{display:flex;align-items:center;gap:7px;margin:-6px 0 12px;font-size:12px;color:rgba(255,255,255,.75)}
.upd i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.news{list-style:none;margin:0 0 10px;padding:0}
.news li{margin:0 0 6px}
.news a{display:block;padding:9px 14px 10px;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.chip{display:inline-block;flex:none;padding:2px 8px;border-radius:999px;background:#fff;color:var(--cobalt);font-size:11px;font-weight:700}
.news .hl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.4;font-weight:600}
.news .top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.news .w{font-size:12px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 6 맛집 */
.lunch{margin:0 0 16px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.55);border:1px solid rgba(17,19,24,.18)}
.lunch span{display:block;font-size:12px;color:var(--ink);font-weight:700;opacity:.7}
.lunch b{display:block;margin-top:4px;font-size:18px}
.lunch em{display:block;margin-top:4px;font-style:normal;font-size:13px;color:var(--ink-2)}

/* 하단 알약 */
.ppill{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(300px,calc(100% - 40px));height:56px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex!important;z-index:210;box-shadow:0 8px 24px rgba(14,42,122,.18);padding:3px}
.ppill a{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--ink-2);font-size:11px;font-weight:600;text-decoration:none;transition:color .25s}
.ppill a.cur{color:#fff}
.ppill .pdot{position:absolute;left:3px;top:3px;width:calc((100% - 6px)/3);height:48px;border-radius:999px;background:var(--cobalt);transition:transform .35s cubic-bezier(.3,1.1,.4,1),opacity .2s}

/* ☰ 목록 */
.pscrim{position:fixed;inset:0;background:rgba(10,14,30,.62);opacity:0;pointer-events:none;transition:opacity .3s;z-index:220}
.pdrawer{position:fixed;left:0;right:0;top:60px;max-height:calc(100% - 60px);overflow-y:auto;background:#fff;color:var(--ink);border-radius:0 0 22px 22px;transform:translateY(-110%);transition:transform .35s cubic-bezier(.3,1,.4,1);z-index:230;padding:8px 20px 20px}
body.pdrawer-open .pscrim{opacity:1;pointer-events:auto}
body.pdrawer-open .pdrawer{transform:none}
.pdrawer ol{list-style:none;margin:0;padding:0}
.pdrawer li a{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:16px;font-weight:600;text-decoration:none}
.pdrawer li b{font-size:12px;color:var(--cobalt);min-width:20px}
.pabout{margin-top:16px}
.pabout p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.pabout .addr{margin-top:14px;font-size:11px;color:#A5ABB8}

@media (prefers-reduced-motion:reduce){
  .ppanel,.ppill .pdot,.pdrawer,.pscrim,.pchev{transition:none!important}
  .ppanel.on .pbody>*,.pbody>*{transition:none!important;opacity:1;transform:none}
  .papp.intro .ppanel{transform:none!important}
}

.psum{position:absolute;left:18px;right:18px;top:44px;font-size:13px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s}
.ppanel.prev .psum{opacity:.8;visibility:visible;pointer-events:auto}
.ppanel.prev .pchev{opacity:.7;transform:none}
.pbody .sub{margin:-8px 0 12px;font-size:14px;opacity:.85}

/* 낮은 폰(세로 740px 이하): 더 촘촘하게 */
@media (max-height:740px){
  .pbody h2{font-size:21px;margin:2px 0 10px}
  .pbody .sub{margin:-4px 0 8px;font-size:13px}
  .upd{margin:-2px 0 8px}
  .big{padding:10px 40px 10px 14px;margin-bottom:8px}.big .t{font-size:16px}.big .d{font-size:13px;margin-top:2px}.big .w{display:none}
  .when a{padding:8px 74px 8px 0}.when b{font-size:15px}.when span{font-size:12px}
  .fact{display:none}.acts{margin-top:10px}
  .pbtn{min-height:44px}
  .news .hl{font-size:14px}
}