/* modal */
.modal-bg { position: fixed; inset: 0; z-index: 80; background: var(--overlay); display: grid; place-items: center; padding: 14px; overflow-y: auto; }
.modal { background: var(--bg); border-radius: 30px; width: min(940px, 100%); position: relative; max-height: calc(100% - 4px); overflow-y: auto; box-shadow: var(--shadow); }
.modal .x { position: absolute; top: 10px; right: 10px; z-index: 5; background: var(--bg); }
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pdp .left { padding: 14px; }
.pdp .info { padding: 40px 30px 30px; display: flex; flex-direction: column; gap: 14px; align-content: start; }
.pdp h2 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; }
.pdp .say { font-size: 1.15rem; font-weight: 500; line-height: 1.3; }
.pdp .desc { color: var(--muted); }
.pdp .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pdp .tags span { border: 1.5px solid var(--line); border-radius: 999px; padding: 2px 12px; font-size: 0.86rem; }
.pdp .price { display: flex; gap: 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.pdp .price b { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; }
.pdp .price s { color: var(--muted); }
.pdp .acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .pdp { grid-template-columns: minmax(0, 1fr); } .pdp .info { padding: 8px 22px 26px; } .pdp .left { padding: 10px 10px 0; } }
.quiz { padding: 34px 26px 28px; display: grid; gap: 20px; }
.quiz .step { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.quiz h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; max-width: 16ch; }
.quiz .opts { display: grid; gap: 10px; }
.quiz .opt { text-align: left; border: 1.5px solid var(--line); border-radius: 20px; background: transparent; padding: 16px 20px; font-weight: 600; font-size: 1.1rem; transition: background 0.15s, border-color 0.15s; }
.quiz .opt:hover { border-color: var(--fg); background: var(--surface); }
.quiz .res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .quiz .res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quiz .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.notice { border: 1.5px solid var(--warn); border-radius: 14px; color: var(--warn); padding: 10px 14px; font-size: 0.9rem; font-weight: 500; }
label.lab-f { display: grid; gap: 6px; font-size: 0.88rem; font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 11px 20px; border-radius: 999px; z-index: 100; font-weight: 600; font-size: 0.92rem; box-shadow: var(--shadow); max-width: calc(100% - 28px); text-align: center; }
@media (min-width: 761px) { .toast { bottom: 28px; } }