/* 2차 디자인 정리 — 원본 구조와 기능을 유지하는 반응형 스타일 */
:root { --yellow: #f5df20; }
body { background: #101a22; }
.site-shell {
  width: calc(100% - 48px);
  max-width: 1380px;
  margin: 24px auto;
  border-color: #41505b;
  border-radius: 6px;
  box-shadow: none;
}
.brand-row { min-height: 78px; background: #0c161e; }
.brand { font-weight: 860; letter-spacing: -1.9px; text-shadow: none; }
.brand-caption { color: #c6cfd5; }
.header-kakao .btn { color: #e5e9ec; }
.header-kakao .talk { background: #dce2e6; }
#main-nav { background: #1c2a35; border-color: #4a5965; }
#main-nav a { font-weight: 650; }
.hero { min-height: 360px; }
.hero-content { padding: 27px 38px 25px; }
.hero:after {
  background: linear-gradient(90deg, #07121ae6, #07121a80 43%, #07121a08 76%),
    linear-gradient(0deg, #0b1721c9, transparent 45%);
}
.hero h1 {
  font-size: 96px;
  font-weight: 880;
  letter-spacing: -4.8px;
  line-height: 1.06;
  text-shadow: none;
}
.hero h1 strong { font-size: 36px; font-weight: 770; letter-spacing: -1.3px; }
.hero-promise { font-size: 22px; font-weight: 650; letter-spacing: -.6px; }
.hero-content > .handwriting { font-size: 21px; opacity: .92; }
.hero-side { font-size: 22px; opacity: .8; }
.trust-list { margin-top: 22px; gap: 30px; }
.trust-list .icon { width: 29px; height: 29px; stroke-width: 1.7; }
.hero-contact { background: #0d1922; padding-bottom: 12px; }
.btn { border-radius: 3px; box-shadow: none; font-weight: 720; }
.call-primary { background: var(--yellow); border-color: var(--yellow); }
.call-number { font-size: 36px; font-weight: 860; letter-spacing: -1px; }
.call-label { font-size: 18px; }
.kakao { color: #f1f4f6; border-color: #778691; background: #15232e; }
.talk { background: #e5eaed; font-weight: 850; }
.text-btn { background: #15232e; border-color: #778691; }
.content-area { background: linear-gradient(115deg, #1c2933, #101d27 65%, #1b2934); }
.quick-menu { background: #22313c; border-color: #465764; padding-block: 12px; gap: 10px; }
.quick-menu > a { min-height: 102px; background: #14222d; border-color: #526572; border-radius: 2px; box-shadow: none; padding: 15px; }
.quick-menu .icon { width: 38px; height: 38px; stroke-width: 1.6; }
.quick-menu em { color: #aebec9; }
.quick-menu strong { font-weight: 750; }
.quick-menu p { color: #c2cdd5; }
.section-pad { padding-top: 22px; }
.section-head { gap: 18px; margin-bottom: 12px; }
.section-head h2 { font-size: 26px; font-weight: 780; letter-spacing: -.8px; }
.yellow-line { width: 72px; background: #80909a; height: 1px; }
.section-head > p { color: #c0ccd4; }
.more { color: #d7e0e6; }
.items-grid { gap: 12px; }
.item-card, .work-card { border-color: #4a5d6b; border-radius: 2px; box-shadow: none; }
.item-card:hover { transform: none; border-color: #b6c5ce; }
.item-text { padding: 10px 4px 12px; }
.item-text strong { font-weight: 750; }
.item-text small { color: #b7c5cf; }
.works-grid { gap: 12px; }
.work-card > span:last-child { padding: 8px 10px; }
.advantages { border-color: #394e5d; border-radius: 2px; background: #12212c; }
.advantages .icon { color: #d8e1e7; }
.collection-section { border-color: #3d5362; padding-bottom: 24px; }
.eyebrow, .inline-contact { color: #c4d2dc; }
.collection-section li > span { color: #aabfcd; font-weight: 700; }
.bottom-panels { gap: 16px; padding-bottom: 22px; align-items: stretch; }
.info-panel { border-radius: 2px; background: #e8edf1; padding: 22px; }
.info-panel .btn { width: 100%; }
.info-panel .panel-phone { background: var(--yellow); border-color: var(--yellow); font-weight: 850; }
.info-panel .kakao { background: #dce3e8; color: #11232f; border-color: #8597a4; }
.info-panel .kakao .talk { background: #162733; color: #f4f6f8; }
.location-card { border-radius: 1px; background: #dce4ea; border-color: #b7c6d0; }
.value-panel { border-radius: 2px; border-color: #3b5261; background: #101e28; }
.site-shell footer { border-color: #3d5362; background: #0d1922; }

@media (min-width: 761px) and (max-width: 1150px) {
  .site-shell { width: calc(100% - 32px); margin: 16px auto; }
  .hero h1 { font-size: 84px; }
  .hero h1 strong { font-size: 33px; }
  .hero-promise { font-size: 21px; }
  .quick-menu { gap: 7px; }
  .quick-menu > a { padding: 12px 8px; gap: 8px; }
  .quick-menu .icon { width: 30px; height: 30px; }
  .call-number { font-size: 28px; }
  .info-panel { padding: 16px; }
  .bottom-panels { gap: 10px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .site-shell { width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; }
  .site-header { box-shadow: none; border-bottom: 1px solid #293a46; }
  .brand-row { min-height: 62px; padding: 9px 16px; gap: 12px; }
  .brand { font-size: 28px; letter-spacing: -1.3px; font-weight: 850; }
  .brand-caption { font-size: 11px; }
  .hero { min-height: 272px; }
  .hero-bg { object-position: 70% 42%; }
  .hero:after {
    background: linear-gradient(0deg, #0d1922 0%, #0d1922b8 36%, #0d192240 75%, #0d192210),
      linear-gradient(90deg, #0d192238, transparent 65%);
  }
  .hero-content { padding: 24px 18px 14px; }
  .hero .hero-content > .handwriting {
    font-size: 15px;
    line-height: 1.3;
    margin: 0 0 8px;
    max-width: none;
    text-align: center;
    letter-spacing: .2px;
  }
  .hero h1 { font-size: 62px; line-height: 1.02; letter-spacing: -2.8px; margin-top: 0; font-weight: 870; }
  .hero h1 strong { font-size: 26px; line-height: 1.2; font-weight: 760; letter-spacing: -.8px; margin: 7px 0 6px; }
  .hero-promise { font-size: 15px; font-weight: 620; line-height: 1.5; letter-spacing: -.45px; }
  .trust-list { margin-top: 16px; gap: 8px; }
  .trust-list li { gap: 5px; font-size: 11px; font-weight: 600; color: #e0e7ec; }
  .trust-list .icon { width: 24px; height: 24px; }
  .hero-caption { font-size: 10px; top: 7px; opacity: .7; }
  .hero-contact { padding: 0 14px 9px; }
  .contact-actions { gap: 7px; }
  .call-primary { min-height: 56px; padding: 6px 12px; gap: 15px; }
  .call-number { font-size: 30px; letter-spacing: -.7px; line-height: 1.05; }
  .call-number small { font-size: 12px; font-weight: 650; margin-top: 3px; }
  .call-primary > .icon:first-child { width: 29px; height: 29px; }
  .call-primary > .icon:last-child { width: 20px; height: 20px; }
  .contact-actions > .kakao { background: #182832; color: #f4f6f8; border-color: #788a97; }
  .contact-actions .kakao .talk { background: #e4eaee; color: #0e1d27; width: 29px; height: 25px; }
  .contact-actions > .kakao, .text-btn { min-height: 44px; font-size: 13px; gap: 7px; }
  .address-line { margin-top: 5px; font-size: 11px; }
  .address-line a { min-height: 28px; }
  .content-area { margin: 0; border-radius: 0; background: #fff; }
  .quick-menu { background: #fff; padding: 12px 14px 9px; gap: 9px 5px; }
  .quick-menu > a, .quick-menu > a:last-child { min-height: 68px; padding: 0; gap: 5px; background: transparent; border: 0; }
  .quick-menu > a .icon { width: 42px; height: 42px; padding: 8px; background: #edf1f4; border-radius: 4px; }
  .quick-menu strong { font-size: 13px; font-weight: 730; letter-spacing: -.5px; }
  .section-pad { padding: 15px 14px 0; }
  .section-head { margin-bottom: 10px; }
  .section-head h2 { font-size: 22px; letter-spacing: -.6px; }
  .more { color: #354b5b; min-height: 36px; }
  .items-grid { gap: 7px; }
  .item-card, .work-card { border-color: #c9d3db; border-radius: 2px; }
  .item-text { padding: 6px 2px 7px; }
  .item-text strong { font-size: 13px; }
  .works-grid { gap: 8px; }
  .work-card > span:last-child { padding: 6px; }
  .photo-notice { font-size: 11px; color: #62717c; }
  .advantages { background: #f0f3f5; }
  .advantages .icon { color: #344e60; }
  .advantages > div { padding: 13px 10px; }
  .collection-section { padding-block: 20px; }
  .eyebrow, .inline-contact { color: #415d70; }
  .collection-section li > span { color: #617c8e; }
  .bottom-panels { gap: 14px; padding-bottom: 14px; }
  .info-panel { padding: 17px; background: #f1f4f6; }
  .value-panel { padding: 20px 16px; min-height: 200px; }
  .mobile-bottom { box-shadow: none; border-top-color: #cbd5dd; }
  .mobile-bottom > a:nth-child(2) { color: #192832; background: #f5df2029; border-radius: 3px; }
}

@media (max-width: 360px) {
  .brand-row { gap: 7px; padding-inline: 12px; }
  .brand { font-size: 26px; }
  .brand-caption { font-size: 10px; }
  .hero h1 { font-size: 56px; }
  .hero h1 strong { font-size: 23px; }
  .hero-promise { font-size: 13px; }
  .call-number { font-size: 26px; }
  .call-primary { gap: 10px; }
  .contact-actions > .kakao, .text-btn { font-size: 12px; gap: 5px; }
  .quick-menu strong { font-size: 12px; }
}