/* 다옴겨 공통 컴포넌트 (tokens.css 필요) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text);background:var(--color-bg);letter-spacing:var(--ls-normal);word-break:keep-all;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
.num{font-variant-numeric:tabular-nums}
.container{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- Type ---- */
.t-display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-heavy);letter-spacing:var(--ls-tight)}
.t-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-heavy);letter-spacing:var(--ls-tight)}
.t-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);color:var(--color-text-strong)}
.t-h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-bold);color:var(--color-text-strong)}
.t-h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-semibold)}
.t-lg{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg)}
.t-sm{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.t-xs{font-size:var(--fs-xs);line-height:var(--lh-xs)}
.t-sub{color:var(--color-text-sub)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);color:var(--color-primary);text-transform:uppercase}
.eyebrow::before{content:"";width:16px;height:2px;background:currentColor}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-sm);border:1px solid transparent;font:inherit;font-size:16px;font-weight:var(--fw-bold);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);white-space:nowrap}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-primary:active{background:var(--color-primary-pressed)}
.btn-dark{background:var(--gray-900);color:#fff}
.btn-dark:hover{background:var(--gray-700)}
.btn-outline{background:#fff;color:var(--gray-900);border-color:var(--gray-300)}
.btn-outline:hover{border-color:var(--gray-900)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-text{height:auto;padding:0;background:none;color:var(--color-primary);font-weight:var(--fw-semibold)}
.btn-text:hover{color:var(--color-primary-hover);text-decoration:underline}
.btn-lg{height:56px;padding:0 28px;font-size:17px}
.btn-sm{height:36px;padding:0 14px;font-size:14px}
.btn-block{width:100%}
.btn[disabled]{background:var(--gray-200);color:var(--gray-500);cursor:not-allowed}

/* ---- Badge / Tag ---- */
.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:var(--r-xs);font-size:12px;font-weight:var(--fw-bold);line-height:1;white-space:nowrap}
.badge-red{background:var(--red-50);color:var(--red-700)}
.badge-solid{background:var(--color-primary);color:#fff}
.badge-gray{background:var(--gray-100);color:var(--gray-700)}
.badge-dark{background:var(--gray-900);color:#fff}
.badge-success{background:var(--color-success-bg);color:var(--color-success)}
.badge-info{background:var(--color-info-bg);color:var(--color-info)}
.badge-warning{background:var(--color-warning-bg);color:var(--color-warning)}
.tbd{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px dashed var(--color-placeholder);border-radius:var(--r-xs);background:var(--color-placeholder-bg);color:#6B4E00;font-size:12px;font-weight:var(--fw-bold);line-height:1.5;letter-spacing:0}
.tbd::before{content:"[확인 필요]"}
.tbd:empty::before{content:"[확인 필요]"}

/* ---- Card ---- */
.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
a.card:hover,.card.is-link:hover{box-shadow:var(--sh-2);border-color:var(--gray-300)}
.card-body{padding:var(--sp-6)}
.card-media{aspect-ratio:16/10;background:var(--gray-100);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}

/* ---- Inputs ---- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field .label{font-size:13px;font-weight:var(--fw-semibold);color:var(--gray-700)}
.field .req{color:var(--color-primary)}
.input,.select,.textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--gray-300);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:16px;color:var(--gray-900);transition:border-color var(--dur-fast)}
.textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical}
.select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2355595F' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:40px}
.input::placeholder,.textarea::placeholder{color:var(--gray-500)}
.input:hover,.select:hover{border-color:var(--gray-500)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--focus-ring)}
.field.is-error .input{border-color:var(--color-error)}
.field .help{font-size:13px;color:var(--gray-600)}
.field.is-error .help{color:var(--color-error)}
.input-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:#fff}
.input-dark::placeholder{color:#B5BAC1}
.check{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--color-primary)}

/* ---- Segmented / chips ---- */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:40px;padding:0 14px;border:1px solid var(--gray-300);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:14px;font-weight:var(--fw-semibold);color:var(--gray-700);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--gray-600)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--gray-900);border-color:var(--gray-900);color:#fff}

/* ---- Icons ---- */
.ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-tile{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-sm);background:var(--red-50);color:var(--color-primary)}
.ico-tile .ico{width:26px;height:26px}

/* ---- Photo placeholder ---- */
.ph{display:grid;place-items:center;text-align:center;padding:16px;background:repeating-linear-gradient(135deg,#E9EBEE 0 12px,#E2E4E8 12px 24px);color:var(--gray-600);font-size:13px;font-weight:600;line-height:1.5}