@font-face { font-family: "Cafe24 Ssurround"; src: url("/fonts/Cafe24Ssurround-v2.0.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Griun Fromsol"; src: url("/fonts/Griun_Fromsol-Rg.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Griun Popcorn"; src: url("/fonts/Griun_Popcorn-Rg.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Griun Yeeun"; src: url("/fonts/Griun_Yeeun-Rg.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Paperlogy ExtraBold"; src: url("/fonts/Paperlogy-8ExtraBold.ttf") format("truetype"); font-display: swap; }

.font-ssurround { font-family: "Cafe24 Ssurround", sans-serif; }
.font-fromsol { font-family: "Griun Fromsol", cursive; }
.font-popcorn { font-family: "Griun Popcorn", sans-serif; }
.font-yeeun { font-family: "Griun Yeeun", cursive; }
.font-paperlogy { font-family: "Paperlogy ExtraBold", sans-serif; }
.font-options .font-card:last-child { grid-column: 1 / -1; }
.name-tag-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.name-tag-colors .field { margin: 0; }
.name-tag-colors .native-color-select { display: none !important; }
.name-tag-colors .field > label { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 800; }
.name-tag-colors .color-dropdown-copy b { font-size: 12px; }
.name-tag-colors .color-dropdown-copy small { font-size: 9px; }
.border-presets { grid-template-columns: 1fr 1fr; }
.border-presets span { flex-direction: column; gap: 3px; }
.spacing-control { padding: 13px 14px; border-radius: 13px; background: var(--paper); }
.spacing-control label { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }
.spacing-control label span:last-child { text-align: right; }
.spacing-control output { padding: 5px 9px; border-radius: 999px; background: #fff; color: var(--green2); font-size: 11px; font-weight: 900; }
.spacing-control input { width: 100%; margin: 14px 0 2px; accent-color: var(--green); cursor: pointer; }
.ring-options { grid-template-columns: repeat(3, 1fr); }
.ring-diagram.left-top i { left: 2px; top: 2px; }
.ring-diagram.left-top b { margin-top: 14px; margin-left: 17px; }
.ring-position-adjust { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--paper); }
.ring-adjust-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ring-adjust-heading b { font-size: 12px; }
.ring-adjust-heading span { padding: 4px 8px; border-radius: 999px; background: var(--mint); color: var(--green2); font-size: 9px; font-weight: 900; }
.ring-axis-control { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ring-axis-control label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 800; }
.ring-axis-control output { min-width: 72px; padding: 5px 8px; border-radius: 999px; background: #eef7f2; color: var(--green2); text-align: center; font-size: 11px; font-weight: 900; }
.ring-axis-control input { width: 100%; margin: 13px 0 5px; accent-color: var(--green); cursor: pointer; }
.ring-axis-scale { display: grid; grid-template-columns: 1fr auto 1fr; color: var(--muted); font-size: 9px; }
.ring-axis-scale span:nth-child(2) { text-align: center; }
.ring-axis-scale span:last-child { text-align: right; }
.ring-position-adjust > p { margin: -2px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.thickness-presets { grid-template-columns: 1fr 1fr; }
.thickness-presets span { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; }
.thickness-presets b { font-size: 15px; }
.thickness-presets small { font-size: 10px; }
.thickness-presets em { color: var(--green2); font-size: 10px; font-style: normal; font-weight: 900; }

.mobile-preview-dock { display: none; }
.name-bundle{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--heenini-mint-soft,#eaf7f2)}.name-bundle>b{font-size:14px}.name-bundle>.btn{margin-top:10px;min-height:44px}.bundle-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 52px;gap:8px;align-items:end;margin-top:12px}.bundle-row label{display:grid;gap:5px;font-size:12px;min-width:0}.bundle-row input{width:100%;min-width:0;min-height:44px;box-sizing:border-box;padding:10px;border:1px solid var(--line);border-radius:10px;font-size:16px}.bundle-row .btn{min-height:44px;padding:10px;font-size:12px}
.bundle-first-row #nameText{min-height:44px;padding:10px 38px 10px 10px;font-size:16px;line-height:normal}.bundle-first-row #characterCount{right:8px;font-size:10px}.bundle-preview-tag{display:grid;place-content:center;min-height:44px;text-align:center;font-size:10px;line-height:1.4;color:var(--green2);border:1px solid var(--line);border-radius:10px;background:white}.name-preview-confirm{display:flex;align-items:center;gap:12px;margin-top:12px}.name-preview-confirm p{flex:1;margin:0}.name-preview-confirm .btn{flex-shrink:0;min-height:44px}
@media(max-width:360px){.name-bundle{padding:10px}.bundle-row{grid-template-columns:minmax(0,1fr) 54px 44px;gap:6px}.name-preview-confirm{align-items:stretch;flex-direction:column}}
.symbol-picker{flex-wrap:wrap}.symbol-picker #symbolTargetLabel{padding:5px 8px;border-radius:9px;background:var(--heenini-mint-soft,#eaf7f2);color:var(--green2);font-size:12px}.bundle-row.symbol-target input[type="text"]{border-color:var(--green2);box-shadow:0 0 0 1px var(--green2)}.symbol-picker button:disabled{opacity:.45;cursor:not-allowed}
.text-confirm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.text-confirm-row .text-input-wrap { min-width: 0; }
.text-confirm-button { min-width: 96px; min-height: 58px; margin: 0; padding: 10px 14px; white-space: nowrap; }
.text-confirm-button:disabled { cursor: default; border-color: var(--heenini-border, #dce8e2); background: var(--heenini-mint-soft, #eaf7f2); color: var(--green2); opacity: 1; }
.symbol-picker { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; }
.symbol-picker > span { margin-right: 2px; color: var(--muted); font-size: 11px; font-weight: 800; }
.symbol-picker button { width: 36px; height: 36px; border: 1px solid var(--heenini-border, #dce8e2); border-radius: 10px; background: #fff; color: var(--heenini-ink, #2f3b37); font-size: 18px; line-height: 1; cursor: pointer; }
.symbol-picker button:hover,.symbol-picker button:focus-visible { border-color: var(--green); background: var(--heenini-mint-soft, #eaf7f2); outline: 0; }
.name-tag-order-actions { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px; border-radius: 14px; background: #f3f8f5; }
.name-tag-order-actions > label { display: grid; gap: 3px; }
.name-tag-order-actions > label span { font-size: 12px; font-weight: 900; }
.name-tag-order-actions > label small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.name-tag-order-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.quantity-stepper { display: grid; grid-template-columns: 44px minmax(52px, 1fr) 44px; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.quantity-stepper button { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: var(--mint); color: var(--green2); font: inherit; font-size: 20px; font-weight: 900; cursor: pointer; }
.quantity-stepper button:first-child { border-right: 1px solid var(--line); }
.quantity-stepper button:last-child { border-left: 1px solid var(--line); }
.quantity-stepper button:active { background: #d6eee4; }
.quantity-stepper button:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(13, 103, 72, .26); outline-offset: -3px; }
.quantity-stepper input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 8px 4px; border: 0; border-radius: 0; background: #fff; text-align: center; font: inherit; font-weight: 900; appearance: textfield; -moz-appearance: textfield; }
.quantity-stepper input::-webkit-inner-spin-button,
.quantity-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.quantity-stepper input:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(13, 103, 72, .2); outline-offset: -3px; }
.name-tag-order-row .btn { min-height: 44px; font-size: 12px; }
.name-tag-order-actions .field-help { margin: 0; }
.name-tag-order-actions .field-help.error { color: #a63d31; font-weight: 800; }
.name-tag-order-actions .field-help.working { color: var(--green2); font-weight: 800; }

@media (max-width: 560px) {
  .name-tag-colors { grid-template-columns: 1fr; }
  .font-options .font-card:last-child { grid-column: auto; }
  .ring-options { grid-template-columns: 1fr; }
  .name-tag-order-row { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .text-confirm-row { grid-template-columns: 1fr; }
  .text-confirm-button { width: 100%; min-height: 48px; }
}

.name-preview-confirm{flex-direction:column;align-items:stretch;gap:14px;margin-top:24px}.name-preview-confirm .text-confirm-button{width:100%;min-height:60px;padding:16px 20px;font-size:18px;font-weight:800;white-space:normal}

.live-name-preview{position:sticky;top:70px;z-index:2;padding:12px;border:1px solid var(--line);border-radius:16px;background:#f4faf7;box-shadow:0 4px 18px #234b3512}.live-name-preview>div{display:flex;justify-content:space-between;gap:8px;font-size:13px}.live-name-preview canvas{display:block;width:100%;height:190px;object-fit:contain}.live-name-preview p{margin:4px 0 0;font-size:12px;color:var(--muted)}@media(max-width:560px){.live-name-preview{position:static;top:auto}.live-name-preview canvas{height:150px}}

.design-confirm-help{margin:18px 0 14px;padding:16px 20px;border:1px solid #d9c98c;border-radius:14px;background:#fff8d8;color:#394b43;font-size:18px;font-weight:600;line-height:1.65;text-align:center}.design-confirm-help strong{font-weight:800}@media(max-width:560px){.design-confirm-help{padding:16px;font-size:17px}}

@media(max-width:560px){html{scroll-padding-top:190px}.live-name-preview{position:sticky;top:8px;z-index:4;padding:10px 12px;box-shadow:0 6px 22px #234b3526}.live-name-preview canvas{height:120px}.live-name-preview p{display:none}.live-name-preview>div{font-size:12px}.configurator .option-section,.configurator .font-card,.configurator input,.configurator button{scroll-margin-top:190px}}

.live-name-preview canvas{object-fit:fill}.live-name-preview>div>b{font-size:12px}.live-name-preview>div>span{font-size:11px}
.size-presets label:has(input:disabled){opacity:.45;cursor:not-allowed}.size-presets input:disabled+span{background:var(--paper)}
@media(max-width:560px){.live-name-preview{padding:4px 6px;border-radius:12px;margin-block:4px}.live-name-preview>div{line-height:16px}.live-name-preview>div>b{font-size:11px}.live-name-preview>div>span{font-size:10px}.size-presets label:has(input:disabled){opacity:.45;cursor:not-allowed}.size-presets input:disabled+span{background:var(--paper)}}