/* 평면 안내 페이지 */
.page-plan{background:var(--paper)}
.page-plan .hd{transform:none}
.pl{padding:clamp(110px,14vh,150px) var(--gut) clamp(70px,9vw,120px)}
.pl-wrap{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:clamp(30px,5vw,90px);align-items:start;max-width:1400px;margin:0 auto}

/* 왼쪽: 평형 정보 */
.pl-info{position:sticky;top:110px}
.pl-info>*{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pl-in .pl-info>*{opacity:1;transform:none}
.pl-in .pl-info>*:nth-child(2){transition-delay:.06s}.pl-in .pl-info>*:nth-child(3){transition-delay:.12s}
.pl-in .pl-info>*:nth-child(4){transition-delay:.18s}.pl-in .pl-info>*:nth-child(5){transition-delay:.24s}.pl-in .pl-info>*:nth-child(6){transition-delay:.3s}
.pl-type{display:flex;align-items:baseline;font-family:var(--serif);font-weight:400;line-height:.9;margin:4px 0 14px;font-variant-numeric:lining-nums}
.pl-num{font-size:clamp(96px,10vw,150px);letter-spacing:-.02em}
.pl-unit{font-size:clamp(32px,3.2vw,48px);margin-left:6px}
.pl-unit b{font-weight:500;color:var(--gold);margin-left:4px}
.pl-units{font-size:15px;color:var(--muted);margin-bottom:28px}
.pl-units b{font-variant-numeric:lining-nums;font-family:var(--serif);font-size:30px;font-weight:500;color:var(--ink);margin-right:3px}
.pl-area{border-top:1px solid var(--ink)}
.pl-area div{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.pl-area dt{font-size:14px;color:var(--muted)}
.pl-area dd{font-family:var(--serif);font-size:21px;font-variant-numeric:lining-nums tabular-nums}
.pl-area dd small{font-family:var(--sans);font-size:12px;margin-left:2px;color:var(--muted)}
.pl-area div:first-child dd{font-size:24px;font-weight:500}
.pl-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:26px 0 22px}
.pl-tabs a{text-align:center;padding:12px 0;white-space:nowrap;border:1px solid var(--line);font-size:14px;font-weight:600;transition:background .35s,color .35s,border-color .35s}
.pl-tabs a:hover{border-color:var(--ink)}
.pl-tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pl-cta{display:flex;flex-direction:column;gap:8px}
.pl-btn{display:block;text-align:center;padding:17px;background:var(--gold);color:var(--ink);font-weight:700;letter-spacing:.03em}
.pl-tel{text-align:center;font-size:14px;color:var(--muted);padding:8px 0}

/* 오른쪽: 평면 무대 */
.pl-stage{position:relative;background:#f9f7f3;box-shadow:0 30px 80px rgba(14,20,28,.10);padding:22px clamp(18px,2.4vw,34px) 18px;opacity:0;transform:scale(.97);transition:opacity .8s,transform 1.1s var(--ease)}
.pl-in .pl-stage{opacity:1;transform:none}
.pl-views{display:flex;gap:4px;margin-bottom:10px}
.pl-views button{background:none;border:0;font:inherit;font-size:13.5px;color:var(--muted);padding:7px 12px;cursor:pointer;position:relative}
.pl-views button::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1.5px;background:var(--ink);transform:scaleX(0);transition:transform .4s var(--ease)}
.pl-views button.on{color:var(--ink);font-weight:600}
.pl-views button.on::after{transform:scaleX(1)}
.pl-view{display:none;position:relative;aspect-ratio:4/3}
.pl-view.on{display:block;animation:plFade .6s ease}
@keyframes plFade{from{opacity:0}to{opacity:1}}
.pl-line{width:100%;height:100%;color:#2a323c}
.pl-line svg{width:100%;height:100%}
.pl-line .hp-out{stroke-width:4.5}
.pl-line .hp-in{stroke-width:2.2}
.pl-line .hp-labels{font-size:14px}
.pl-3d{position:absolute;inset:0;cursor:pointer}
.pl-3d canvas{display:block;width:100%!important;height:100%!important}
.pl-hint{position:absolute;right:0;top:-34px;font-size:11.5px;color:var(--muted)}
.pl-view[data-v=sheet]{aspect-ratio:auto}
.pl-sheet{display:block;width:100%;height:auto}
.pl-views[hidden]{display:none}
.pl-note{margin-top:10px;font-size:12px;color:var(--muted)}

/* 첫 화면에서 카드를 눌러 넘어올 때: 덮개가 걷히며 시작 */
.pl-cover{position:fixed;inset:0;z-index:90;background:#f6f3ee;pointer-events:none;transition:opacity .7s ease}
.pl-in .pl-cover{opacity:0}

@media (max-width:1100px){
  .pl-wrap{grid-template-columns:1fr}
  .pl-info{position:static}
  .pl-stage{order:-1}
}
@media (max-width:760px){
  .pl{padding-top:86px}
  .pl-stage{padding:14px 12px 12px}
  .pl-view{aspect-ratio:1/1}
  .pl-view[data-v=sheet]{aspect-ratio:auto}
  .pl-tabs a{font-size:12.5px}
  .pl-num{font-size:84px}
}