/* 장바구니 「사진 인화 설정」 창 — options/options.css 에서 옮겨 온 모양 (2026-10-12) 🔴 손으로 고치지 않는다 — ops/gen-cart-photo-sheet-css.py 가 만든다(언제 다시 돌리나는 그 파일 머리에). 만든 법: python3 -I ops/gen-cart-photo-sheet-css.py frontend/public frontend/public/cart/photo-sheet.css 확인만: python3 -I ops/gen-cart-photo-sheet-css.py --check frontend/public frontend/public/cart/photo-sheet.css (cart/photo-sheet.js 가 그리는 class 만 고르고, :where() 로 이 창 안에만 걸리게 감쌌다 — 세기는 원본과 같다) 🔴 cart/index.html 에서 shop.css · upload.css **뒤에** 싣는다 — /options/ 에서 options.css 가 그 둘 뒤에 실리는 것과 같은 차례. 🔴 장바구니 사진 칸(.csec .ph …)은 이 파일이 건드리지 않는다 — 모든 규칙이 dialog.sheet--photo · dialog.fstr-sheet · dialog.paper-compare · dialog.pzoom(크게 보기) 안이다. 🔴 @keyframes 는 ps- 를 붙여 옮겼다(이름이 문서 전체에 하나라 shop.css 의 stepsweep 등과 부딪히지 않게). 원본: options/options.css git 블롭 a1e2f850827d — 아래 「options.css:줄」은 그 판의 줄 번호다. */ /* options.css:74~ */ dialog.sheet:where(.sheet--photo,.fstr-sheet){border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px; background:var(--c-surface);color:var(--c-text); border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:var(--sheet-h);overflow:hidden} @media (min-width:600px){ dialog.sheet:where(.sheet--photo,.fstr-sheet){margin:auto;border-radius:var(--r-xl)} } dialog.sheet:where(.sheet--photo,.fstr-sheet)::backdrop{background:rgba(var(--brand-ink-rgb),.45)} .sheet:where(.sheet--photo,.fstr-sheet) .in{display:flex;flex-direction:column;max-height:var(--sheet-h)} .sheet:where(.sheet--photo,.fstr-sheet) .shead{display:flex;align-items:flex-start;gap:var(--s3); padding:var(--s3) var(--s5) var(--s2)} .sheet:where(.sheet--photo,.fstr-sheet) .shead .grow{flex:1;min-width:0} .sheet:where(.sheet--photo,.fstr-sheet) h2{font-size:var(--t-prod);margin:0} .sheet:where(.sheet--photo,.fstr-sheet) .shead .sub{margin:2px 0 0} .sheet:where(.sheet--photo,.fstr-sheet) .sx{flex:0 0 auto;min-width:var(--tap);min-height:var(--tap); border:0;background:none;color:var(--c-text);font-size:20px;cursor:pointer; border-radius:var(--r-pill)} .sheet:where(.sheet--photo,.fstr-sheet) .sx:hover{background:var(--c-surface-alt)} .sheet:where(.sheet--photo,.fstr-sheet) .sbody{padding:0 var(--s5) var(--s5);overflow:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .sheet:where(.sheet--photo,.fstr-sheet) .sfoot{display:flex;gap:var(--s3);padding:var(--s3) var(--s5) var(--s4); padding-bottom:max(var(--s4), env(safe-area-inset-bottom)); border-top:1px solid var(--c-border);background:var(--c-surface)} @media (min-width:600px){ .sheet:where(.sheet--photo,.fstr-sheet) .sfoot{padding-bottom:var(--s4)} } .sheet:where(.sheet--photo,.fstr-sheet) .sfoot .btn{flex:1} .sheet:where(.sheet--photo,.fstr-sheet) .sfoot--stack{flex-direction:column;align-items:stretch;gap:var(--s2)} .sheet:where(.sheet--photo,.fstr-sheet) .sfoot--stack > .btn{flex:0 0 auto} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .sgroup{margin-top:var(--s4)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .sgroup > h3{font-size:var(--t-sm);color:var(--c-text-sub);font-weight:700; margin:0 0 var(--s2)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt{display:grid;grid-template-columns:auto 1fr auto;gap:2px var(--s3); width:100%;text-align:left;align-items:center; padding:var(--s3) var(--s4);margin-bottom:var(--s2); min-height:var(--tap); border:2px solid var(--c-border);border-radius:var(--r-lg); background:var(--c-surface);color:var(--c-text);font:inherit;cursor:pointer; transition:border-color var(--m-base) var(--m-ease), background var(--m-base) var(--m-ease)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .oname{font-weight:700} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .odesc{grid-column:2;font-size:var(--t-cap);color:var(--c-text-sub)} /* options.css:157~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .oright{grid-column:3;grid-row:1 / span 2;text-align:right; font-size:var(--t-cap);font-weight:700;white-space:nowrap} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .omini{grid-column:1;grid-row:1 / span 2; display:grid;place-items:center;width:44px;height:44px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .omini i{--mini:32px;display:block;box-sizing:border-box; width:calc(var(--mini) * var(--w,1));height:calc(var(--mini) * var(--h,1)); border:2px solid #FFFFFF;padding:2px;background:#FFFFFF;border-radius:1px; box-shadow:0 0 0 1px rgba(var(--brand-ink-rgb),.22),0 1px 3px rgba(var(--brand-ink-rgb),.28)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .omini i::after{content:"";display:block;width:100%;height:100%; background:radial-gradient(circle at 68% 30%,#FFE39A 0 15%,transparent 16%), linear-gradient(180deg,#BFD8EE 0 52%,#9CBF94 52% 74%,#D9C6A0 74%)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt:hover{border-color:var(--c-text-sub)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt[disabled]{opacity:.35;cursor:not-allowed} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt[disabled]:hover{border-color:var(--c-border)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt[aria-pressed="true"]{border-color:var(--c-btn-point-bg); background:var(--c-surface-point)} /* options.css:205~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt[aria-pressed="true"] .oname.oname--split::after{content:none} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt[aria-pressed="true"] .oname-t::after{content:" ✓";color:var(--c-text-brand); font-size:var(--t-btn);line-height:1;vertical-align:-.06em} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt[aria-pressed="true"] .oname::after{content:" ✓";color:var(--c-text-brand); font-size:var(--t-btn);line-height:1;vertical-align:-.06em} /* options.css:254~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mrow{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mopt{display:grid;justify-items:center;gap:var(--s2); padding:var(--s2);border:2px solid var(--c-border);border-radius:var(--r-lg); background:var(--c-surface);color:var(--c-text);font:inherit;cursor:pointer; min-height:var(--tap); transition:border-color var(--m-base) var(--m-ease)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mopt .mname{font-size:var(--t-cap);font-weight:700} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mopt:hover{border-color:var(--c-text-sub)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mopt[aria-pressed="true"]{border-color:var(--c-btn-point-bg)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mopt[aria-pressed="true"] .mname{color:var(--c-text)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mopt[aria-pressed="true"] .mname::after{color:var(--c-text-brand); font-size:var(--t-btn);line-height:1;vertical-align:-.06em} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mopt[aria-pressed="true"] .mname::after{content:" ✓"} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mpv{position:relative;display:block;border-radius:2px;overflow:hidden; box-shadow:0 0 0 1px rgba(var(--brand-ink-rgb),.10) inset} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mpv i{position:absolute;display:block;border-radius:1px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mrow--sw{gap:var(--s2)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .msw{position:relative;width:var(--tap);height:var(--tap);border-radius:999px; border:2px solid var(--c-border);cursor:pointer;padding:0; transition:border-color var(--m-base) var(--m-ease),transform var(--m-fast) var(--m-ease)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .msw:hover{transform:scale(1.06)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .msw[aria-pressed="true"]{border-color:var(--c-btn-point-bg);border-width:3px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .msw[aria-pressed="true"]::after{content:"✓";position:absolute;inset:0; display:grid;place-items:center;font-weight:800;font-size:18px; color:var(--sw-ink,var(--c-text));text-shadow:0 0 3px var(--sw-halo,#fff),0 0 3px var(--sw-halo,#fff)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .msw[disabled]{opacity:.35;cursor:not-allowed} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .msw[disabled]:hover{transform:none} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .msw-n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* options.css:421~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .reco{margin:0 0 var(--s2);padding:var(--s2) var(--s4); background:var(--c-surface-point);border-radius:var(--r-lg); font-size:var(--t-sm);line-height:1.5} /* options.css:436~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .best{margin-left:var(--s2);font-size:var(--t-cap);font-weight:700; color:var(--c-text);white-space:nowrap} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .best .st{color:var(--brand-pink);display:inline-block; animation:ps-반짝 1.6s var(--m-ease) infinite} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .best--plain{font-weight:600;color:var(--c-text-sub)} @keyframes ps-반짝{0%,100%{opacity:1; transform:scale(1)} 45% {opacity:.45; transform:scale(.86)}} /* options.css:468~ */ @media (prefers-reduced-motion:reduce){ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .best .st{animation:none} } :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .ogrp{position:sticky;top:0;z-index:1;margin:var(--s2) 0 var(--s1); padding:var(--s1) 0;background:var(--c-surface); font-size:var(--t-sm);font-weight:800;letter-spacing:.02em;color:var(--c-text)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .sbody > .ogrp:first-child{margin-top:0} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropbox{display:flex;flex-direction:column;align-items:center;gap:var(--s1); margin-bottom:var(--s2)} /* options.css:506~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .pvbox{display:block;width:min(var(--pv-w), 100%);margin-inline:auto} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .pvbox > *{width:100%} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv{position:relative;overflow:hidden;border-radius:var(--r-md); width:100%;height:auto; touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none; box-shadow:0 2px 8px rgba(var(--brand-ink-rgb),.10)} @supports (height:1dvh){ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .pvbox{width:min(var(--pv-w), 100%, calc(var(--pv-max) * var(--ar, 1)))} } :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv--drag{cursor:grabbing} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv i{position:absolute;display:block;background-repeat:no-repeat} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropmsg{text-align:center} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv--fit{cursor:default;touch-action:auto} /* options.css:583~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .steps{display:flex;list-style:none;margin:0;padding:0 var(--s5) var(--s1);gap:var(--s2)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .steps > li{flex:1 1 0;min-width:0} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .stepdot{display:flex;flex-direction:column;align-items:center;gap:0; width:100%;min-height:var(--tap);padding:0 2px; border:0;background:none;font:inherit;color:var(--c-text-sub);cursor:pointer; border-top:3px solid var(--c-border);border-radius:0} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .stepdot b{display:flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:999px; background:var(--c-surface-alt);color:var(--c-text-sub);font-size:var(--t-cap)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .stepdot span{font-size:var(--t-cap);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:100%} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .stepdot.on{color:var(--c-text);font-weight:700;border-top-color:var(--c-btn-point-bg)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .stepdot.on b{background:var(--c-btn-point-bg);color:var(--brand-white)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .stepdot:hover{color:var(--c-text)} /* options.css:617~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .pvhold{position:sticky;top:0;z-index:2;background:var(--c-surface); padding-bottom:var(--s1);margin-bottom:var(--s1); box-shadow:0 6px 10px -8px rgba(var(--brand-ink-rgb),.25)} /* options.css:637~ */ @media (max-height:30rem){ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .pvhold{position:static} .sheet:where(.sheet--photo,.fstr-sheet) .reco{display:none} } /* options.css:670~ */ .js-motion :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .steps > li.now{position:relative;overflow:hidden} .js-motion :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .steps > li.now::after{content:'';position:absolute;left:0;top:0;height:3px;width:45%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92), rgba(255,255,255,0)); animation:ps-stepsweep 1.5s linear infinite;pointer-events:none} @keyframes ps-stepsweep{from{transform:translateX(-120%)}to{transform:translateX(340%)}} /* options.css:701~ */ @media (prefers-reduced-motion:reduce){ .js-motion :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .steps > li.now::after{animation:none !important} .js-motion :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .steps > li.now::after{display:none} } /* options.css:727~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fmpv{display:block;line-height:0;border-radius:0;padding:var(--fmpad, 5%); box-shadow:0 2px 10px rgba(var(--brand-ink-rgb),.18), inset 1px 1px 0 rgba(255,255,255,.16), inset -1px -1px 0 rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.05)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fmpv > .cropv{box-shadow:inset 0 0 0 1px rgba(0,0,0,.13)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fmpv.fmpv--win{position:relative;padding:0;isolation:isolate} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fmpv--win > .fmwin{position:absolute;overflow:hidden;border-radius:0;z-index:0} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fmpv--win > .fmwin::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1; box-shadow:inset 0 0 0 1px rgba(0,0,0,.13);pointer-events:none} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fmpv--win .fmpaper{position:absolute} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fmpv--win .fmpaper > .cropv{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:0;box-shadow:none} /* options.css:759~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fmcut-open{position:absolute;z-index:2;pointer-events:none} /* options.css:784~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt{grid-template-columns:auto minmax(0,1fr) auto} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .oname, :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt .odesc{min-width:0;overflow-wrap:anywhere;word-break:keep-all} @media (max-width:340px){ .sheet:where(.sheet--photo,.fstr-sheet) .sbody{padding-left:var(--s3);padding-right:var(--s3)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .steps{padding-left:var(--s3);padding-right:var(--s3)} .sheet:where(.sheet--photo,.fstr-sheet) .shead, .sheet:where(.sheet--photo,.fstr-sheet) .sfoot{padding-left:var(--s4);padding-right:var(--s4)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt{padding-left:var(--s3);padding-right:var(--s3)} } /* options.css:845~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt--paper4{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 var(--s3)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt--paper4 .oname{grid-column:1;grid-row:1;line-height:var(--t-lg-lh)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt--paper4 .pspec{grid-column:1;grid-row:2;font-size:var(--t-cap); line-height:var(--t-cap-lh);color:var(--c-text-sub);font-weight:400} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .opt--paper4 .oright{grid-column:2;grid-row:1 / span 2;text-align:right;align-self:center} /* options.css:884~ */ dialog.sheet--photo{width:calc(100% - 32px);max-width:740px; height:calc(100vh - 32px);max-height:820px;margin:auto;border-radius:24px} dialog.sheet--photo .in{height:100%;max-height:100%;min-height:0} dialog.sheet--photo .shead{flex-shrink:0;padding:20px 24px 12px;gap:12px} dialog.sheet--photo .shead h2{font-size:22px;line-height:1.35;letter-spacing:-.03em} dialog.sheet--photo .shead .sub{font-size:14px;line-height:1.5;margin-top:4px} dialog.sheet--photo .sx{width:44px;min-width:44px;min-height:44px} dialog.sheet--photo .steps{flex-shrink:0;gap:12px;padding:0 24px 12px} dialog.sheet--photo .stepdot{flex-direction:row;justify-content:center;gap:8px; min-height:44px;padding:6px 2px;border-top:0;border-bottom:2px solid var(--c-border)} dialog.sheet--photo .stepdot.on{border-bottom-color:var(--c-btn-point-bg)} dialog.sheet--photo .stepdot b{width:22px;height:22px;flex-shrink:0;font-size:13px} dialog.sheet--photo .stepdot span{font-size:14px;line-height:1.3} dialog.sheet--photo .steps>li::after{display:none} dialog.sheet--photo .photo-options-body{display:flex;flex-direction:column;flex:1; min-height:0;overflow:hidden;padding:0 24px;gap:0} dialog.sheet--photo .photo-options-body>.pvhold{position:sticky;top:0;z-index:2;flex-shrink:0; min-width:0;margin:0;padding:12px 0 16px;box-shadow:none;background:var(--c-surface)} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ dialog.sheet--photo .photo-options-body>.pvhold{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)} } @media(max-height:30rem){ dialog.sheet--photo .photo-options-body>.pvhold{position:static;backdrop-filter:none;-webkit-backdrop-filter:none} } dialog.sheet--photo .cropbox{display:flex;flex-direction:column;align-items:center; gap:10px;margin:0;min-width:0} dialog.sheet--photo .pvbox{width:min(100%,calc(220px * var(--ar,1)));max-width:400px; grid-column:auto;grid-row:auto;flex-shrink:0} dialog.sheet--photo .cropmsg{margin:0;max-width:38em;text-align:center; font-size:14px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere} dialog.sheet--photo .cropmsg .linkish{min-height:44px;display:inline-flex;align-items:center} dialog.sheet--photo .photo-preview-caption{min-width:0;text-align:center} dialog.sheet--photo .photo-preview-caption>.sub{margin:3px 0;font-size:13px;line-height:1.5} dialog.sheet--photo .photo-preview-caption>.linkish{display:inline-flex;align-items:center;min-height:44px;font-size:13px} dialog.sheet--photo .photo-paper-summary{grid-column:1 / -1;grid-row:3;min-width:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin-top:7px;font-size:13px;line-height:1.5;font-weight:400;color:var(--c-text-sub); word-break:keep-all;overflow-wrap:anywhere} dialog.sheet--photo .photo-step-choices{flex:1;min-height:0;min-width:0;overflow:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-anchor:none; padding:12px 2px 24px;scrollbar-gutter:stable} dialog.sheet--photo .photo-step-choices>.ogrp{position:static;font-size:18px;line-height:1.4; margin:0 0 14px;padding:0;letter-spacing:-.02em;background:none} dialog.sheet--photo .photo-step-choices .reco{margin:0 0 12px;padding:10px 12px; font-size:13px;line-height:1.5;border-radius:12px;word-break:keep-all;overflow-wrap:anywhere} dialog.sheet--photo .photo-size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} dialog.sheet--photo .photo-size-grid .opt{display:grid;grid-template-columns:36px minmax(0,1fr); grid-template-areas:"mini name" "mini desc" "quality quality";align-content:center; gap:2px 8px;margin:0;min-height:96px;padding:12px;border-radius:14px} dialog.sheet--photo .photo-size-grid .omini{grid-area:mini;width:36px;height:auto} dialog.sheet--photo .photo-size-grid .omini i{--mini:36px} dialog.sheet--photo .photo-size-grid .oname{grid-area:name;font-size:17px;line-height:1.35} dialog.sheet--photo .photo-size-grid .odesc{grid-area:desc;font-size:12px;line-height:1.5} dialog.sheet--photo .photo-size-grid .oright{grid-area:quality;text-align:left; font-size:12px;line-height:1.5;white-space:normal;font-weight:500;margin-top:5px} dialog.sheet--photo .photo-extra{margin-top:16px;border:1px solid var(--c-border); border-radius:14px;background:var(--c-surface)} dialog.sheet--photo .photo-extra>summary{display:flex;align-items:center;justify-content:space-between; gap:8px;min-height:52px;padding:12px 14px;list-style:none;cursor:pointer;font-size:15px; line-height:1.4;font-weight:700;word-break:keep-all;overflow-wrap:anywhere} dialog.sheet--photo .photo-extra>summary>span{margin-left:auto;text-align:right; font-size:13px;font-weight:400;color:var(--c-text-sub)} dialog.sheet--photo .photo-extra>summary::-webkit-details-marker{display:none} dialog.sheet--photo .photo-extra>summary::after{content:"+";flex-shrink:0;font-size:22px; line-height:1;font-weight:400;color:var(--c-text-sub)} dialog.sheet--photo .photo-extra[open]>summary::after{content:"−"} dialog.sheet--photo .photo-extra>div{padding:0 14px 14px} dialog.sheet--photo .photo-extra .sgroup:first-child{margin-top:0} dialog.sheet--photo .photo-extra .opt:last-child{margin-bottom:0} dialog.sheet--photo .photo-extra .opt{padding:12px 10px;gap:2px 8px} dialog.sheet--photo .photo-extra .opt .oright{font-size:13px} dialog.sheet--photo .photo-review{display:flex;flex-wrap:wrap;gap:6px 8px; margin:16px 0;padding:14px;border-radius:12px;background:var(--c-surface-alt); font-size:13px;line-height:1.6;color:var(--c-text-sub);word-break:keep-all;overflow-wrap:anywhere} dialog.sheet--photo .photo-review>span{padding:2px 8px;border-radius:6px;background:var(--c-surface)} dialog.sheet--photo .photo-review>b{flex-basis:100%;font-size:14px;color:var(--c-text)} dialog.sheet--photo .photo-warning input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0; accent-color:var(--c-btn-point-bg)} dialog.sheet--photo .photo-warning{margin:12px 0 0;padding:12px 14px;border-radius:12px; background:var(--c-surface-warning);color:var(--c-text-warning);font-size:13px;line-height:1.6; word-break:keep-all;overflow-wrap:anywhere} dialog.sheet--photo .photo-warning p{margin:0 0 8px} dialog.sheet--photo .photo-warning p:last-child{margin-bottom:0} dialog.sheet--photo .photo-warning label{display:flex;align-items:flex-start;gap:10px; min-height:44px;padding:8px 0;cursor:pointer} dialog.sheet--photo .photo-editor-footer{display:flex;flex-wrap:wrap;align-items:center; flex-shrink:0;gap:10px;padding:12px 24px 18px;border-top:1px solid var(--c-border)} dialog.sheet--photo .photo-price-row{flex:1 1 100%;display:flex;align-items:baseline; justify-content:space-between;gap:8px;font-size:14px;line-height:1.4;min-width:0} dialog.sheet--photo .photo-price-row b{font-size:18px;line-height:1.4} dialog.sheet--photo .photo-price-row small{font-size:12px;font-weight:400;color:var(--c-text-sub)} dialog.sheet--photo .photo-editor-footer .btn{min-height:50px;min-width:0;padding:10px 14px; font-size:16px;line-height:1.35;white-space:normal;word-break:keep-all} dialog.sheet--photo .photo-editor-footer .photo-prev{flex:0 0 88px} dialog.sheet--photo .photo-editor-footer .photo-primary{flex:1 1 0} dialog.sheet--photo .photo-editor-footer .btn[disabled]{opacity:.5;cursor:not-allowed} /* options.css:1033~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-cut{position:absolute;background:var(--c-btn-point-bg);opacity:.86;pointer-events:none; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 3px,transparent 3px 6px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} @media(forced-colors:active){ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-cut{background:Highlight;opacity:1;forced-color-adjust:none} } :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv--both{background:transparent!important;box-shadow:none;overflow:visible} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-paper{position:absolute;border-radius:2px; box-shadow:0 3px 12px rgba(var(--brand-ink-rgb),.18), inset 0 0 0 1px rgba(var(--brand-ink-rgb),.10)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv--both i{position:absolute} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv--cutmap{cursor:grab;touch-action:none} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv--cutmap.cropv--drag{cursor:grabbing} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-tip{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2; animation:ps-cropv-tip-out 400ms ease 3s forwards} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-tip-in{display:inline-flex;align-items:center;gap:var(--s2); max-width:calc(100% - 20px); padding:var(--s2) var(--s3);border-radius:var(--r-pill); background:rgba(var(--brand-ink-rgb),.72);color:#fff; font-size:var(--t-cap);line-height:1.4;font-weight:600;text-align:left; box-shadow:0 4px 14px rgba(var(--brand-ink-rgb),.28); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); animation:ps-cropv-tip-slide 1.6s ease-in-out infinite} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-tip-in b{font-weight:600} @keyframes ps-cropv-tip-slide{0%,100%{transform:translateX(-9px)}50%{transform:translateX(9px)}} @keyframes ps-cropv-tip-out{to{opacity:0;visibility:hidden}} @media (prefers-reduced-motion:reduce){ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-tip-in{animation:none} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-tip{animation:ps-cropv-tip-out 1ms ease 3s forwards} } /* options.css:1108~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-blur{position:absolute;top:8px;left:6px;right:6px; width:-webkit-fit-content;width:fit-content;margin-inline:auto;z-index:2; max-width:calc(100% - 12px); padding:3px var(--s2);border-radius:var(--r-pill); font-size:var(--t-cap);line-height:1.35;font-weight:700;text-align:center; white-space:normal;word-break:keep-all; box-shadow:0 1px 4px rgba(var(--brand-ink-rgb),.28); -webkit-backdrop-filter:none;backdrop-filter:none; pointer-events:none} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv--hasblur .cropv-tip{top:40px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-blur--warn{background:var(--c-surface-warning);color:var(--c-text-warning)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-blur--bad{background:var(--c-surface-error);color:var(--c-text-error)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-blur--in{animation:ps-cropv-blur-in 420ms var(--m-ease) both} @keyframes ps-cropv-blur-in{from{opacity:0;transform:translateY(-10px) scale(.94)} to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-blur--in{animation:none} } /* options.css:1152~ */ dialog.sheet--photo .photo-extra>summary:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px} @supports(height:1dvh){ dialog.sheet--photo{height:calc(100dvh - 32px)} } @media(min-width:900px){ dialog.sheet--photo{max-width:1040px;width:calc(100% - 64px);height:calc(100vh - 64px)} dialog.sheet--photo .shead{padding:24px 28px 14px} dialog.sheet--photo .shead h2{font-size:25px} dialog.sheet--photo .steps{padding:0 28px 18px} dialog.sheet--photo .photo-options-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px;padding:0 28px} dialog.sheet--photo .photo-options-body>.pvhold{display:flex;align-items:center;justify-content:center; min-height:0;padding:20px;border-radius:18px;background:var(--c-surface-alt);margin-bottom:24px; overflow:auto;overscroll-behavior:contain} dialog.sheet--photo .cropbox{width:100%;gap:18px} dialog.sheet--photo .pvbox{width:min(100%,calc(330px * var(--ar,1)));max-width:460px} dialog.sheet--photo .photo-step-choices{height:100%;padding-top:0} dialog.sheet--photo .photo-editor-footer{padding:16px 28px 20px;gap:12px} dialog.sheet--photo .photo-price-row{flex:1 1 0;display:block;margin-right:16px} dialog.sheet--photo .photo-price-row b{display:block;font-size:20px} dialog.sheet--photo .photo-editor-footer .photo-primary{flex:0 1 280px} @supports(height:1dvh){ dialog.sheet--photo{height:calc(100dvh - 64px)} } } /* options.css:1178~ */ @media(min-width:600px) and (max-width:899px){ dialog.sheet--photo .photo-options-body{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;padding:0 16px} dialog.sheet--photo .photo-options-body>.pvhold{display:flex;align-items:flex-start;justify-content:center; min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 8px;margin-bottom:16px; border-radius:14px;background:var(--c-surface-alt)} dialog.sheet--photo .cropbox{width:100%;gap:10px;margin-block:auto} dialog.sheet--photo .pvbox{width:min(100%,calc(clamp(120px,calc(100vh - 420px),220px) * var(--ar,1)))} dialog.sheet--photo .photo-options-body[data-stage="1"] .pvbox{width:min(100%,calc(clamp(100px,calc(100vh - 450px),220px) * var(--ar,1)))} dialog.sheet--photo .photo-step-choices{height:100%;padding-top:0} dialog.sheet--photo .photo-size-grid .opt{padding:10px;gap:2px 6px} dialog.sheet--photo .photo-size-grid .odesc{font-size:12px} dialog.sheet--photo .photo-preview-caption>.sub{font-size:12px} } /* options.css:1193~ */ @media(max-width:599px){ dialog.sheet--photo{width:100%;max-width:none;height:100vh;max-height:100vh;margin:0; border-radius:0} dialog.sheet--photo .shead{padding:12px 16px 6px;padding-top:max(12px,env(safe-area-inset-top));gap:8px} dialog.sheet--photo .shead h2{font-size:20px} dialog.sheet--photo .shead .sub{font-size:12px} dialog.sheet--photo .steps{padding:0 16px 8px;gap:8px} dialog.sheet--photo .stepdot{flex-direction:column;gap:3px;min-height:52px;padding:4px 1px} dialog.sheet--photo .stepdot span{font-size:12px;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all} dialog.sheet--photo .stepdot b{width:20px;height:20px;font-size:12px} dialog.sheet--photo .photo-options-body{padding:0 16px} dialog.sheet--photo .photo-options-body>.pvhold{padding:8px 0 12px;border-bottom:1px solid var(--c-border)} dialog.sheet--photo .cropbox{display:grid;grid-template-columns:100px minmax(0,1fr); align-items:center;gap:8px 14px} dialog.sheet--photo .pvbox{width:min(100%,calc(104px * var(--ar,1)));max-width:100%;grid-column:1;grid-row:1} dialog.sheet--photo .photo-preview-caption{grid-column:2;grid-row:1;text-align:left} dialog.sheet--photo .photo-preview-caption>.sub{font-size:12px} dialog.sheet--photo .cropmsg{grid-column:2;grid-row:1;font-size:12px;text-align:left;line-height:1.5} dialog.sheet--photo .photo-options-body[data-stage="1"] .cropbox{display:flex;gap:8px} dialog.sheet--photo .photo-options-body[data-stage="1"] .pvbox{width:min(100%,calc(200px * var(--ar,1)));max-width:280px} dialog.sheet--photo .photo-options-body[data-stage="1"] .photo-preview-caption{text-align:center} dialog.sheet--photo .photo-options-body[data-stage="1"] .cropmsg{font-size:13px;text-align:center} dialog.sheet--photo .photo-step-choices{padding:12px 2px 18px} dialog.sheet--photo .photo-step-choices>.ogrp{font-size:17px;margin-bottom:12px} dialog.sheet--photo .photo-editor-footer{padding:10px 16px 12px; padding-bottom:max(12px,env(safe-area-inset-bottom));gap:8px} dialog.sheet--photo .photo-editor-footer .photo-prev{flex-basis:70px} dialog.sheet--photo .photo-editor-footer .btn{min-height:48px;font-size:15px} dialog.sheet--photo .photo-price-row{font-size:12px} dialog.sheet--photo .photo-price-row b{font-size:17px} @supports(height:1dvh){ dialog.sheet--photo{height:100dvh;max-height:100dvh} dialog.sheet--photo .photo-options-body[data-stage="1"] .pvbox{width:min(100%,calc(min(24dvh,200px) * var(--ar,1)))} } } /* options.css:1229~ */ @media(max-width:359px){ dialog.sheet--photo .shead, dialog.sheet--photo .steps, dialog.sheet--photo .photo-options-body, dialog.sheet--photo .photo-editor-footer{padding-left:12px;padding-right:12px} dialog.sheet--photo .shead h2{font-size:18px} dialog.sheet--photo .photo-size-grid{gap:8px} dialog.sheet--photo .photo-size-grid .opt{padding:10px;grid-template-columns:32px minmax(0,1fr);gap:2px 6px} dialog.sheet--photo .photo-size-grid .omini{width:32px} dialog.sheet--photo .photo-size-grid .omini i{--mini:30px} dialog.sheet--photo .photo-size-grid .oname{font-size:16px} dialog.sheet--photo .photo-size-grid .odesc{font-size:11px} dialog.sheet--photo .cropbox{grid-template-columns:80px minmax(0,1fr);gap:8px 12px} dialog.sheet--photo .opt--paper4{padding:12px;gap:0 8px} dialog.sheet--photo .opt--paper4 .oname{font-size:15px} dialog.sheet--photo .opt--paper4 .oright{font-size:12px} } /* options.css:1245~ */ @media(max-width:359px) and (min-height:541px) and (max-height:700px){ dialog.sheet--photo .photo-options-body[data-stage="1"] .cropbox{display:grid; grid-template-columns:80px minmax(0,1fr);align-items:center;gap:8px 12px} dialog.sheet--photo .photo-options-body[data-stage="1"] .pvbox{width:min(100%,calc(110px * var(--ar,1)))} dialog.sheet--photo .photo-options-body[data-stage="1"] .photo-preview-caption{text-align:left} dialog.sheet--photo .photo-options-body[data-stage="1"] .cropmsg{text-align:left;font-size:12px} } @media(min-width:600px) and (max-height:540px){ dialog.sheet--photo{width:100%;max-width:none;height:100vh;max-height:100vh;margin:0;border-radius:0} dialog.sheet--photo .shead{padding:8px 16px 4px} dialog.sheet--photo .shead h2{font-size:19px} dialog.sheet--photo .shead .sub{font-size:12px} dialog.sheet--photo .steps{padding:0 16px 6px} dialog.sheet--photo .stepdot{min-height:40px} dialog.sheet--photo .photo-options-body{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:20px;padding:0 16px} dialog.sheet--photo .photo-options-body>.pvhold{display:block;min-height:0;overflow:auto; overscroll-behavior:contain;padding:8px;margin-bottom:8px;border-radius:12px;background:var(--c-surface-alt)} dialog.sheet--photo .cropbox{display:flex;gap:8px} dialog.sheet--photo .pvbox{width:min(100%,calc(140px * var(--ar,1)));max-width:260px} dialog.sheet--photo .cropmsg{font-size:12px;text-align:center} dialog.sheet--photo .photo-step-choices{padding-top:4px} dialog.sheet--photo .photo-editor-footer{padding:8px 16px;gap:10px;flex-wrap:nowrap} dialog.sheet--photo .photo-price-row{display:block;flex:1 1 0;font-size:12px} dialog.sheet--photo .photo-price-row b{display:block;font-size:16px} dialog.sheet--photo .photo-editor-footer .btn{min-height:44px;font-size:14px} dialog.sheet--photo .photo-editor-footer .photo-prev{flex:0 0 72px} dialog.sheet--photo .photo-editor-footer .photo-primary{flex:0 1 240px} @supports(height:1dvh){ dialog.sheet--photo{height:100dvh;max-height:100dvh} } } /* options.css:1277~ */ @media(max-width:599px) and (max-height:540px){ dialog.sheet--photo .photo-options-body{overflow:auto;display:block} dialog.sheet--photo .photo-options-body>.pvhold{padding:8px 0} dialog.sheet--photo .photo-options-body[data-stage="1"] .cropbox{display:grid;grid-template-columns:80px minmax(0,1fr)} dialog.sheet--photo .photo-options-body[data-stage="1"] .pvbox{width:min(100%,calc(90px * var(--ar,1)))} dialog.sheet--photo .photo-options-body[data-stage="1"] .cropmsg{text-align:left;font-size:12px} dialog.sheet--photo .photo-step-choices{overflow:visible;height:auto;min-height:0} } /* options.css:1290~ */ dialog.sheet--photo .photo-frame-options{display:grid;gap:10px;margin:14px 0 18px} dialog.sheet--photo .photo-frame-options>.opt{margin:0;min-height:78px;padding:14px 12px} dialog.sheet--photo .photo-frame-options .odesc{font-size:13px;line-height:1.5} dialog.paper-compare{width:calc(100% - 40px);max-width:1100px;max-height:90vh; padding:0;margin:auto;border:1px solid var(--c-border);border-radius:24px; overflow:hidden;background:var(--c-surface);color:var(--c-text); box-shadow:0 18px 64px rgba(var(--brand-ink-rgb),.2)} dialog.paper-compare::backdrop{background:rgba(var(--brand-ink-rgb),.42)} dialog.paper-compare [hidden]{display:none!important} dialog.paper-compare .paper-compare__in{display:flex;flex-direction:column;min-height:0;max-height:calc(90vh - 2px)} dialog.paper-compare .paper-compare__head{display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:start;flex-shrink:0;gap:6px 16px;padding:24px 28px 18px;border-bottom:1px solid var(--c-border)} dialog.paper-compare .paper-compare__head>div{grid-column:1;min-width:0} dialog.paper-compare .paper-compare__head h2{margin:0;font-size:25px;line-height:1.35; letter-spacing:-.03em;word-break:keep-all;overflow-wrap:anywhere} dialog.paper-compare .paper-compare__head p{grid-column:1;margin:6px 0 0;font-size:14px; line-height:1.5;color:var(--c-text-sub);word-break:keep-all;overflow-wrap:anywhere} dialog.paper-compare .paper-compare__head>button{grid-column:2;grid-row:1 / span 2; display:flex;align-items:center;justify-content:center;flex-shrink:0; width:44px;height:44px;min-width:44px;min-height:44px;padding:0; border:1px solid var(--c-border);border-radius:50%;background:var(--c-surface); color:var(--c-text);font-size:22px;line-height:1;cursor:pointer} dialog.paper-compare .paper-compare__body{flex:1 1 auto;min-height:0;overflow:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:22px 28px 26px} dialog.paper-compare .paper-compare__status{margin:0 0 18px;font-size:14px;line-height:1.6; color:var(--c-text-sub);word-break:keep-all;overflow-wrap:anywhere} dialog.paper-compare .paper-compare__status:empty{display:none} dialog.paper-compare .paper-compare__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} dialog.paper-compare .paper-compare__card{display:flex;flex-direction:column;min-width:0; padding:14px;border:1px solid var(--c-border);border-radius:16px;background:var(--c-surface)} dialog.paper-compare .paper-compare__figure{display:flex;align-items:center;justify-content:center; width:100%;aspect-ratio:3 / 2;margin:0 0 16px;overflow:hidden;border-radius:10px; background:var(--c-surface-alt)} dialog.paper-compare .paper-compare__figure img{display:block;width:100%;height:100%; aspect-ratio:3 / 2;object-fit:contain} dialog.paper-compare .paper-compare__card h3{margin:0 0 8px;font-size:20px; line-height:1.35;letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere} dialog.paper-compare .paper-compare__summary{margin:0 0 14px;font-size:15px; line-height:1.6;word-break:keep-all;overflow-wrap:anywhere} dialog.paper-compare .paper-compare__price{margin:auto 0 14px;padding-top:8px; font-size:16px;line-height:1.5;font-weight:700} dialog.paper-compare .paper-compare__price small{font-size:13px;font-weight:400;color:var(--c-text-sub)} dialog.paper-compare [data-paper-choose]{display:flex;align-items:center;justify-content:center; gap:6px;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--c-btn-point-bg); border-radius:10px;background:var(--c-btn-point-bg);color:var(--brand-white); font:inherit;font-size:15px;font-weight:700;line-height:1.4;cursor:pointer; word-break:keep-all;overflow-wrap:anywhere} dialog.paper-compare [data-paper-choose][aria-pressed="true"]{background:var(--c-surface-point);color:var(--c-text)} dialog.paper-compare [data-paper-choose]:disabled{opacity:.5;cursor:not-allowed} dialog.paper-compare .paper-compare__footer{display:flex;align-items:center;justify-content:flex-end; flex-shrink:0;gap:12px;padding:14px 28px 18px;border-top:1px solid var(--c-border);background:var(--c-surface)} dialog.paper-compare .paper-compare__footer p{flex:1;margin:0;font-size:13px;line-height:1.5; color:var(--c-text-sub);word-break:keep-all;overflow-wrap:anywhere} dialog.paper-compare .paper-compare__footer button{min-width:120px;min-height:48px; padding:10px 20px;border:1px solid var(--c-border);border-radius:10px; background:var(--c-surface);color:var(--c-text);font:inherit;font-size:15px;line-height:1.4;cursor:pointer} dialog.paper-compare button:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px} @supports(height:1dvh){ dialog.paper-compare{max-height:90dvh} dialog.paper-compare .paper-compare__in{max-height:calc(90dvh - 2px)} } @media(min-width:600px) and (max-width:899px){ dialog.paper-compare .paper-compare__grid{grid-template-columns:repeat(2,minmax(0,1fr))} dialog.paper-compare .paper-compare__head{padding:20px 20px 16px} dialog.paper-compare .paper-compare__body{padding:18px 20px 20px} dialog.paper-compare .paper-compare__footer{padding:12px 20px 16px} } @media(max-width:599px){ dialog.paper-compare{width:calc(100% - 24px);border-radius:20px} dialog.paper-compare .paper-compare__head{padding:16px;gap:6px 10px} dialog.paper-compare .paper-compare__head h2{font-size:20px} dialog.paper-compare .paper-compare__head p{font-size:13px} dialog.paper-compare .paper-compare__body{padding:16px} dialog.paper-compare .paper-compare__status{font-size:13px;margin-bottom:14px} dialog.paper-compare .paper-compare__grid{grid-template-columns:minmax(0,1fr);gap:14px} dialog.paper-compare .paper-compare__card{padding:12px} dialog.paper-compare .paper-compare__figure{margin-bottom:14px} dialog.paper-compare .paper-compare__card h3{font-size:19px} dialog.paper-compare .paper-compare__summary{font-size:14px} dialog.paper-compare .paper-compare__footer{flex-direction:column;align-items:stretch;gap:8px;padding:12px 16px; padding-bottom:max(12px,env(safe-area-inset-bottom))} dialog.paper-compare .paper-compare__footer button{width:100%} } /* options.css:1376~ */ @media(max-height:480px){ dialog.paper-compare .paper-compare__head{padding-top:12px;padding-bottom:12px} dialog.paper-compare .paper-compare__head h2{font-size:20px} dialog.paper-compare .paper-compare__head p{font-size:12px} dialog.paper-compare .paper-compare__footer{padding-top:8px;padding-bottom:8px} } dialog.sheet--photo .photo-paper-more{display:flex;align-items:center;justify-content:space-between; gap:12px;width:100%;min-height:48px;margin:16px 0;padding:12px 14px; border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface); color:var(--c-text);font:inherit;font-size:14px;font-weight:650;line-height:1.4;cursor:pointer} dialog.sheet--photo .photo-paper-more span{font-size:18px;font-weight:400} dialog.sheet--photo .photo-paper-more:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px} dialog.sheet--photo .photo-size-grid .oname .best{display:block;margin:4px 0 0;font-size:12px;line-height:1.5;white-space:normal} @media(min-width:900px){ dialog.sheet--photo{max-width:1320px;max-height:960px} dialog.sheet--photo .photo-options-body{grid-template-columns:minmax(0,1.25fr) minmax(340px,1fr)} } @media(min-width:600px){ dialog.sheet--photo .photo-options-body[data-stage] .pvbox{width:min(100%,calc(clamp(180px,calc(100dvh - 470px),580px) * var(--ar,1)));max-width:none} dialog.sheet--photo .photo-options-body[data-stage="1"] .pvbox{width:min(100%,calc(clamp(180px,calc(100dvh - 400px),580px) * var(--ar,1)));max-width:none} } /* options.css:1471~ */ @media(min-width:600px) and (max-height:520px){ dialog.sheet--photo .photo-options-body[data-stage] .pvbox{width:min(100%,calc(clamp(96px,calc(100dvh - 300px),220px) * var(--ar,1)))} dialog.sheet--photo .photo-options-body[data-stage="1"] .pvbox{width:min(100%,calc(clamp(88px,calc(100dvh - 340px),220px) * var(--ar,1)))} dialog.sheet--photo .photo-options-body>.pvhold{padding:16px} } @media(max-width:599px){ dialog.sheet--photo .photo-options-body{display:block;overflow:auto;overscroll-behavior:contain} dialog.sheet--photo .photo-options-body>.pvhold{padding:16px 0;overflow:visible} dialog.sheet--photo .photo-options-body[data-stage] .cropbox{display:flex;flex-direction:column;align-items:center;gap:12px} dialog.sheet--photo .photo-options-body[data-stage] .pvbox{width:min(100%,calc(min(21dvh,210px) * var(--ar,1)));max-width:none;grid-column:auto;grid-row:auto} dialog.sheet--photo .photo-options-body[data-stage] .photo-preview-caption{text-align:center} dialog.sheet--photo .photo-options-body[data-stage] .cropmsg{text-align:center;font-size:13px} dialog.sheet--photo .photo-step-choices{height:auto;min-height:0;overflow:visible;padding:16px 0 24px} } /* options.css:1502~ */ dialog.sheet--photo #photo-step-heading[tabindex="-1"]:focus{outline:none} dialog.sheet--photo .photo-warning{margin:12px 0 16px;padding:12px 14px; border:1px solid var(--c-border);border-radius:10px; background:var(--c-surface-point);color:var(--c-text-sub)} /* options.css:1522~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fopt{padding:var(--s2);gap:var(--s2)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fopt .fpv{position:relative;display:block;border-radius:3px;overflow:hidden; box-shadow:0 0 0 1px rgba(var(--brand-ink-rgb),.12) inset} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fopt .fpv i{position:absolute;inset:0;display:block} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fopt:hover .fpv{box-shadow:0 0 0 1px rgba(var(--brand-ink-rgb),.28) inset} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fopt[aria-pressed="true"] .fpv{box-shadow:0 0 0 2px var(--c-btn-point-bg) inset} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fopt[aria-pressed="true"] .mname::after{content:none} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fopt[aria-pressed="true"] .fpv::after{content:"✓";position:absolute;right:3px;bottom:3px; display:grid;place-items:center;width:18px;height:18px;border-radius:50%; background:var(--c-btn-point-bg);color:#fff;font-size:12px;font-weight:700;line-height:1; box-shadow:0 1px 3px rgba(var(--brand-ink-rgb),.35)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-stamp{position:absolute;display:block;pointer-events:none} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .cropv-stamp .stampsvg{display:block;width:100%;height:100%} /* options.css:1558~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .photo-extra--stamp .film-stamp-chip{position:relative;display:block; width:min(220px,100%);height:64px;margin:10px 0 0; border-radius:10px;overflow:hidden;background:var(--brand-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .photo-extra--stamp .film-stamp-chip svg{position:absolute;right:0;bottom:0; width:640px;height:427px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .photo-extra--stamp .film-stamp-on{display:flex;align-items:center;gap:var(--s2); min-height:var(--tap);cursor:pointer} /* options.css:1579~ */ @media (max-width: 520px){ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mrow--film{display:grid;grid-template-columns:1fr 1fr} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .mrow--film .fstr-slot{grid-column:1 / -1} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fopt{width:100%} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fopt .fpv{width:100%!important;height:auto!important;aspect-ratio:var(--fpv-ar, 3 / 2)} } /* options.css:1601~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr{display:grid;gap:6px;margin-top:14px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-head{font-weight:600;display:flex;align-items:center;gap:8px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-head b{font-variant-numeric:tabular-nums;color:var(--c-text-brand,var(--c-btn-point-bg))} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-head b{min-width:3.6em;display:inline-block} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr input[type=range]{width:100%;height:44px;accent-color:var(--c-btn-point-bg); background:transparent;margin:0} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr input[type=range]:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-hint{margin:2px 0 0} /* options.css:1626~ */ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-slot{flex:0 0 100%;width:100%;display:grid;gap:6px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-tap{display:none;margin:2px 0 0} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-tap b{font-variant-numeric:tabular-nums;color:var(--c-text-brand,var(--c-btn-point-bg))} @media (max-width:768px){ :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr--inline, :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-hint--inline{display:none} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-tap{display:block} } .fstr-sheet .sbody{padding-top:12px} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-photo{display:block;width:100%;max-height:46dvh;border-radius:12px;overflow:hidden; background:var(--c-surface-alt);margin:0 auto} :where(dialog.sheet--photo,dialog.fstr-sheet,dialog.paper-compare,dialog.pzoom) .fstr-photo>i{display:block;width:100%;height:100%} dialog.sheet--photo .photo-size-grid .opt{row-gap:0} dialog.sheet--photo .photo-size-grid .odesc{margin-top:2px} dialog.sheet--photo .photo-size-grid .oright{margin-top:7px} /* options.css:1674~ */ :where(dialog.sheet--photo,dialog.fstr-sheet)[data-mouse] :focus-visible{outline:none!important} /* options.css:1674 html[data-mouse] → 이 창만 */ /* options.css:1697~ */ @media(max-width:599px){ :root body dialog.sheet--photo .photo-options-body>.pvhold.pvhold{border-bottom-left-radius:18px;border-bottom-right-radius:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 22px -8px rgba(var(--brand-ink-rgb),.34), 0 3px 7px -3px rgba(var(--brand-ink-rgb),.20)} } /* options.css:1719~ */ dialog.sheet--photo .frameblock{border:1px solid var(--glass-control-edge);border-radius:14px; background:var(--glass-control);box-shadow:inset 0 1px 0 rgba(255,255,255,.22); padding:12px;display:grid;gap:10px} dialog.sheet--photo .frameblock--on{border-color:var(--c-btn-point-bg); background:var(--glass-control-selected);box-shadow:inset 0 0 0 1px var(--c-btn-point-bg)} dialog.sheet--photo .frameblock-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} dialog.sheet--photo .frameblock-name{font-size:15px;font-weight:700;line-height:1.3} dialog.sheet--photo .frameblock-price{font-size:14px;font-weight:700;color:var(--c-text); margin-left:auto;white-space:nowrap} dialog.sheet--photo .frameblock-head .frame-detail-link{flex:1 0 100%;order:9;margin:0} dialog.sheet--photo .frameblock-colors{display:flex;flex-wrap:wrap;gap:8px} dialog.sheet--photo .fcolor{display:grid;justify-items:center;gap:6px; min-width:78px;padding:6px 6px 8px; border:1px solid var(--glass-control-edge);border-radius:12px;background:transparent; color:var(--c-text);font:inherit;cursor:pointer; transition:background-color 160ms ease,border-color 160ms ease} dialog.sheet--photo .fcolor[aria-pressed="true"]{border-color:var(--c-btn-point-bg); background:var(--glass-control-selected);box-shadow:inset 0 0 0 1px var(--c-btn-point-bg)} @media(hover:hover){ dialog.sheet--photo .fcolor:not(:disabled):not([aria-pressed="true"]):hover{background:var(--glass-control-hover);border-color:rgba(63,48,57,.32)} } dialog.sheet--photo .fcolor:disabled{opacity:.5;cursor:default} dialog.sheet--photo .fcolor-pv{display:block;width:60px;height:60px;border-radius:8px; overflow:hidden;background:var(--glass-control); box-shadow:inset 0 0 0 1px rgba(var(--brand-ink-rgb),.10)} dialog.sheet--photo .fcolor-pv img, dialog.sheet--photo .fcolor-pv i{display:block;width:100%;height:100%;object-fit:cover} dialog.sheet--photo .fcolor-name{font-size:13px;font-weight:700;line-height:1.3; word-break:keep-all} dialog.sheet--photo .fcolor[aria-pressed="true"] .fcolor-name::after{content:" ✓"; color:var(--c-text-brand)} dialog.sheet--photo .frameblock-note{display:flex;align-items:flex-start;gap:6px;margin:0; font-size:13px;line-height:1.5;font-weight:500;color:var(--c-text-sub); word-break:keep-all;overflow-wrap:anywhere} dialog.sheet--photo .frameblock-note-icon{flex:none;width:15px;height:15px;margin-top:2px}