/* ============================================================
   회사소개 (회사개요 / 연혁 / 찾아오시는 길)
   ============================================================ */

.about {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.about__lead {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.about__lead em { font-style: normal; color: var(--brand); }

@media (max-width: 992px) {
    .about { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .about__lead { font-size: 23px; }
}

/* ---------- 취급 품목 요약 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    font-size: 14px;
    color: var(--body);
    background: #FFFFFF;
}

.chip:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- 연혁 타임라인 ---------- */
.timeline { border-top: 2px solid var(--ink); }

.timeline__row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px;
    padding: 34px 4px;
    border-bottom: 1px solid var(--line);
}

.timeline__year {
    font-family: var(--font-en);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand);
    letter-spacing: -0.02em;
}

.timeline__items { display: grid; gap: 12px; }

.timeline__item {
    display: flex;
    gap: 14px;
    align-items: baseline;
    font-size: 16px;
    color: var(--body);
}

.timeline__month {
    flex: 0 0 auto;
    width: 46px;
    font-weight: 700;
    color: var(--ink);
    font-size: 14px;
}

@media (max-width: 640px) {
    .timeline__row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 2px; }
    .timeline__year { font-size: 26px; }
}

/* ---------- 찾아오시는 길 ---------- */
.location {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 40px;
    align-items: start;
}

.map-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--bg-soft);
}

.map-frame iframe { width: 100%; height: 100%; border: 0; }

.map-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    padding: 32px;
    text-align: center;
    background:
        radial-gradient(70% 120% at 70% 10%, rgba(208, 20, 28, .1), transparent 60%),
        var(--bg-soft);
}

.map-note__title { font-size: 18px; font-weight: 700; color: var(--ink); }
.map-note__desc { font-size: 15px; color: var(--muted); }

.contact-box { border: 1px solid var(--line); padding: 30px; background: var(--bg-softer); }
.contact-box + .contact-box { margin-top: 20px; }
.contact-box__title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }

.contact-list { display: grid; gap: 14px; }

.contact-list__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; font-size: 15px; }
.contact-list__row dt { color: var(--muted); font-weight: 600; }
.contact-list__row dd { margin: 0; color: var(--body); }
.contact-list__row a:hover { color: var(--brand); }

@media (max-width: 992px) {
    .location { grid-template-columns: minmax(0, 1fr); }
}