@font-face{font-family:CalendarPretendard;src:url("assets/fonts/Pretendard-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:block}@font-face{font-family:CalendarPretendard;src:url("assets/fonts/Pretendard-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:block}@font-face{font-family:CalendarPretendard;src:url("assets/fonts/Pretendard-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:block}*{box-sizing:border-box}body{margin:0;color:#172840;background:#fff;font-family:CalendarPretendard,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}header{height:87px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between}.logo{width:122px;height:auto}.year{font-size:11px;color:#6d7c90;font-weight:600}.hero{height:191px;background:#f1f6ff;border-radius:20px;padding:16px 20px;margin:0 22px}.eyebrow{font-size:12px;color:#2452c9;font-weight:400}.hero h1{font-size:26px;font-weight:500;line-height:1.57;letter-spacing:-.8px;margin:15px 0 15px}.hero p{font-size:13px;color:#53657d;margin:0}.wrap{padding:20px 22px 150px}.notice{height:81px;border-radius:13px;background:white;border-bottom:1px solid #e9edf3;border-radius:0;display:flex;align-items:center;gap:13px;padding:16px;color:#344a6c;font-size:13px;line-height:2}.notice strong{font-size:14px;font-weight:400;color:#263e63}.notice svg{flex:none}h2{font-size:19px;font-weight:600;letter-spacing:-.6px;line-height:1.5;margin:17px 0}.categories{display:flex;gap:7px;margin-bottom:20px}.pill{height:37px;border:1px solid #dfe5ec;border-radius:22px;background:#fff;color:#52657f;font-size:13px;white-space:nowrap;flex:1}.pill[aria-pressed=true]{background:#1645d7;border-color:#1645d7;color:#fff}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:16px}.card{position:relative;min-width:0}.picture{position:relative;border:1px solid #e5ebf1;border-radius:13px;height:174px;overflow:hidden;display:grid;place-items:center}.picture img{width:150px;height:148px;object-fit:contain}.select{position:absolute;top:0;right:0;width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;border-radius:13px}.select span{width:21px;height:21px;border:1px solid #d5dde7;background:white;border-radius:50%}.select[aria-pressed=true] span{background:#1645d7;border-color:#1645d7}.select[aria-pressed=true] span:after{content:'✓';color:white;font-size:12px;display:grid;place-items:center;height:100%}.zoom{position:absolute;right:6px;bottom:6px;width:44px;height:44px;border:0;background:transparent;border-radius:12px;padding:6px}.zoom span{height:32px;width:32px;background:#f2f5fa;border:1px solid #e7ecf3;border-radius:10px;display:grid;place-items:center;color:#5c7090}.zoom svg{width:20px;height:20px}.card h3{font-size:15px;font-weight:400;line-height:22px;letter-spacing:-.5px;margin:7px 0 0}.select:focus-visible,.zoom:focus-visible{outline:3px solid #799aff;outline-offset:-3px}.bottom{position:fixed;bottom:0;width:100%;max-width:390px;height:129px;padding:17px 22px 22px;background:#fff;border-top:1px solid #e1e5ea}.cta{width:100%;height:54px;background:#1645d7;color:#fff;font-size:15px;font-weight:600;border:0;border-radius:12px}.cta:disabled{background:#e4e9f0;color:#697b92;cursor:not-allowed}.cta span{float:right;margin-right:14px;font-weight:400}.mini{font-size:13px;text-align:center;color:#53657d;margin:10px 0}.handle{width:116px;height:4px;background:#203247;border-radius:3px;margin:15px auto 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hero{margin:2px 18px 0;height:198px;padding:16px 20px;background:#e7f3ff;border-radius:24px}.hero h1{font-size:27px;font-weight:600;color:#153a61}.eyebrow{color:#3972a7}.hero p{color:#55728b}.notice{border:0;padding:16px 6px;gap:16px}h2{font-size:19px;margin:22px 0 20px}.pill{border:0;background:#f2f6fa}.card{border:1px solid #e2eaf3;border-radius:17px;overflow:hidden;height:200px}.picture{height:167px;border:0;border-radius:0}.card h3{font-size:14px;font-weight:500;margin:3px 10px 0;color:#203d5d;letter-spacing:-.5px}.grid{row-gap:14px}.zoom span{background:#eaf3fc;border:0}@font-face{font-family:CalendarPretendard;src:url("assets/fonts/Pretendard-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:block}body::before{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:382px;background:linear-gradient(rgba(255,255,255,.20),rgba(255,255,255,.20)),url("assets/dawn.png") center 57%/cover no-repeat}body{position:relative;isolation:isolate}.hero{background:rgba(231,243,255,.86);height:276px}.hero h1{font-family:CalendarPretendard,sans-serif;font-weight:700;font-size:27px;color:#112c45;font-synthesis:none;letter-spacing:-.8px;line-height:1.52}.eyebrow{color:#355b7a}.hero p{color:#48667f}h2{font-family:CalendarPretendard,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.5px}.categories .pill{display:flex;align-items:center;justify-content:center;padding:0;text-align:center;line-height:1;font-family:CalendarPretendard,sans-serif;font-size:13px;font-weight:500;font-synthesis:none;color:#61768d}.categories .pill[aria-pressed=true]{color:white}.hero .notice{background:transparent;border:0;border-top:1px solid #c9dceb;border-radius:0;padding:12px 0 0;margin:15px 0 0;height:66px;gap:12px}.hero .notice strong{font-size:14px;font-weight:400;color:#263e63}.hero .notice{font-size:13px;color:#5b6c83;line-height:2}.wrap{padding-top:6px}h2{margin-top:20px}
/* Responsive layouts: retain the original mobile composition. */
@media (min-width: 768px) {
  body { background: #f7f9fc; }
  body::before { height: 420px; background-position: center 52%; }
  header { max-width: 1180px; height: 96px; margin: 0 auto; padding: 24px 32px; }
  .logo { width: 150px; }
  .hero { position: relative; max-width: 1116px; min-height: 284px; height: auto; margin: 0 auto; padding: 32px 40px; border-radius: 28px; }
  .eyebrow { font-size: 14px; }
  .hero h1 { font-size: 38px; line-height: 1.4; margin: 14px 0; }
  .hero p { font-size: 15px; }
  .hero .notice { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 340px; height: auto; margin: 0; padding: 24px; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; background: rgba(255,255,255,.65); line-height: 1.8; }
  .hero .notice strong { font-size: 15px; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 28px 32px 140px; }
  h2 { font-size: 24px; margin: 12px 0 22px; }
  .categories { gap: 10px; margin-bottom: 28px; }
  .categories .pill { flex: none; width: 148px; height: 44px; font-size: 14px; background: #e9eff6; }
  .categories .pill[aria-pressed=true] { background: #1645d7; }
  .grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
  .card { height: 260px; border-radius: 20px; background: #fff; }
  .picture { height: 211px; }
  .picture img { width: 85%; height: 185px; }
  .card h3 { font-size: 16px; margin: 8px 16px 0; }
  .bottom { z-index: 10; left: 0; right: 0; max-width: none; height: 96px; padding: 20px max(32px,calc((100vw - 1116px)/2)); display: flex; flex-direction: row-reverse; align-items: center; gap: 24px; background: rgba(255,255,255,.97); box-shadow: 0 -4px 24px rgba(23,40,64,.04); }
  .cta { width: 320px; flex: none; }
  .mini { margin: 0; text-align: left; font-size: 14px; flex: 1; }
  .handle { display: none; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; }
  .card { height: 246px; }
  .picture { height: 200px; }
  .picture img { height: 174px; }
  .card h3 { margin: 7px 12px 0; font-size: 15px; }
}
@media (min-width: 768px) and (max-width: 1190px) {
  .hero { margin-left: 32px; margin-right: 32px; }
}
@media (min-width: 768px) and (max-width: 959px) {
  .hero .notice { position: static; transform: none; width: 100%; margin-top: 22px; padding: 14px 18px; }
}

.dialog-open { overflow: hidden; }
.product-dialog { width: min(640px,calc(100% - 32px)); max-height: 85dvh; padding: 24px; border: 0; border-radius: 24px; color: #172840; box-shadow: 0 20px 80px #17284033; }
.product-dialog::backdrop { background: #10233e99; }
.dialog-heading { display: flex; align-items: center; gap: 16px; justify-content: space-between; margin-bottom: 16px; }
.dialog-heading h2 { margin: 0; font-size: 21px; }
.dialog-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f2f6fa; color: #203d5d; font-size: 28px; }
.detail-images { display: grid; gap: 16px; margin-bottom: 24px; }
.detail-images img { display: block; width: 100%; max-height: 440px; object-fit: contain; background: #f7f9fc; border-radius: 12px; }
.product-dialog .cta { width: 100%; }
.dialog-note { font-size: 14px; line-height: 1.7; color: #53657d; }
.selection-list { list-style: none; margin: 20px 0; padding: 0; }
.selection-list li { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #e2eaf3; padding: 12px 0; }
.selection-list img { width: 64px; height: 64px; object-fit: contain; }
.selection-list span { flex: 1; font-size: 15px; }
.selection-list button { border: 0; border-radius: 8px; padding: 12px; color: #53657d; background: #f2f6fa; }
button:focus-visible { outline: 3px solid #799aff; outline-offset: 2px; }
@media(max-width: 767px) { .dialog-heading h2 { font-size: 18px; } .product-dialog { padding: 20px; } }