/* 제품 설명 페이지 공통 요소: 로컬 내비, 버튼 크기, 포커스, 선택 버튼, 지면 확대 보기, 등장 효과.
   색은 각 페이지가 .pd 요소의 --pd-* 토큰으로 정한다. 제품별 레이아웃은 trend.css, hanwansu-math1.css에 둔다. */
.pd{--pd-ink:#1d1d1f;--pd-muted:#606066;--pd-line:#d9d9de;--pd-stage:#f5f5f7;--pd-focus:var(--color-focus);--pd-link:var(--color-link)}
.pd [hidden]{display:none!important}
.pd .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pd .button,.pd .text-link{min-height:44px;display:inline-flex;align-items:center}
.pd a:focus-visible,.pd button:focus-visible,.pd summary:focus-visible{outline:var(--ui-focus-width) solid var(--color-focus);outline-offset:var(--ui-focus-offset)}
.pd-localnav .localnav-links{font-size:var(--type-note);line-height:var(--leading-body)}
.pd-localnav .localnav-links a:not(.button){padding:12px 0}
.pd-scroll{overflow-x:auto;position:relative}
.pd-keep{white-space:nowrap}

/* 탭·전환 버튼 */
.pd-pills{display:flex;flex-wrap:wrap;gap:8px}
.pd-pills button{min-height:var(--ui-control-height);padding:0 18px;border-radius:var(--ui-radius-selection);border:1px solid var(--pd-line);background:var(--color-surface-raised);color:var(--color-text-primary);font:inherit;font-size:var(--type-button);cursor:pointer;line-height:1.4;font-weight:600}
.pd-pills [aria-selected=true],.pd-pills [aria-pressed=true]{background:var(--color-selected);border-color:var(--color-selected);color:var(--color-on-selected);font-weight:600}

/* 지면 확대 링크 */
.pd-zoom{position:relative;display:block;color:inherit;border-radius:2px}
.pd-zoom-hint{position:absolute;right:10px;bottom:10px;font-size:var(--type-note);font-weight:600;background:#1d1d1fd9;color:#fff;border-radius:var(--ui-radius-small);padding:6px 12px;opacity:0;transition:opacity .2s;line-height:var(--leading-body)}
.pd-zoom:hover .pd-zoom-hint,.pd-zoom:focus-visible .pd-zoom-hint{opacity:1}
.pd-zoom.pd-inline{display:inline;color:var(--pd-link);text-decoration:underline}
@media(hover:none){.pd-zoom-hint{opacity:1;border-radius:var(--ui-radius-small)}}

/* 등장 효과: product.js가 pd-motion을 붙였을 때만 숨긴다. */
.pd-motion .pd-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.pd-motion .pd-reveal.is-in{opacity:1;transform:none}

/* 지면 확대 보기 */
.pd-viewer{border:0;padding:0;border-radius:var(--ui-radius-container);width:min(1040px,100vw - 32px);max-height:calc(100vh - 32px);background:#fff;overflow:hidden;color:#1d1d1f}
.pd-viewer::backdrop{background:#000000b3}
.pd-viewer-bar{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 22px;border-bottom:1px solid #d9d9de}
.pd-viewer-bar p{font-size:var(--type-body);font-weight:600;margin-right:auto;line-height:var(--leading-body)}
.pd-viewer-size{min-height:var(--ui-control-height);padding:0 16px;border-radius:var(--ui-radius-button);border:1px solid #d2d2d7;background:#fff;font:inherit;font-size:var(--type-note);cursor:pointer;line-height:var(--leading-body)}
.pd-viewer-size[aria-pressed=true]{background:var(--color-selected);border-color:var(--color-selected);color:var(--color-on-selected)}
.pd-viewer-close{width:var(--ui-control-height);height:var(--ui-control-height);border-radius:var(--ui-radius-round);border:0;background:#e8e8ed;font-size:26px;cursor:pointer;flex:none}
.pd-viewer-body{overflow:auto;max-height:calc(100vh - 32px - 65px);background:#f5f5f7;padding:16px}
.pd-viewer-body img{display:block;width:100%;height:auto;margin:0 auto;background:#fff}
.pd-viewer.is-actual .pd-viewer-body img{width:auto;max-width:none}
html.pd-lock{overflow:hidden}

@media(max-width:800px){
 .pd-viewer{width:100vw;max-height:100vh;border-radius:0}
 .pd-viewer-body{max-height:calc(100vh - 65px);padding:0}
 .pd-viewer.is-actual .pd-viewer-body img{width:200%}
}
@media(prefers-reduced-motion:reduce){
 .pd-motion .pd-reveal{opacity:1;transform:none;transition:none}
 .pd-zoom-hint{transition:none;border-radius:var(--ui-radius-small)}
}