/* ===== 공통 ===== */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.btn-line {
    display: inline-flex; align-items: center; gap: 10px;
    height: 48px; padding: 0 26px;
    border: 1px solid var(--ink); border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: 15px; font-weight: 500; color: var(--ink);
    transition: background .2s, color .2s;
}
.btn-line::after { content: "→"; transition: transform .2s; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-line:hover::after { transform: translateX(3px); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.breadcrumb > * + *::before { content: "›"; margin: 0 8px; color: #c4c4c4; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb strong { font-weight: 500; color: var(--text); }

/* 탭 (브랜드·유형·제품) — 넘치면 여러 줄로 나눠 모두 보이게 */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs a {
    flex: none; max-width: 100%; padding: 9px 18px;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; color: var(--text);
    transition: border-color .2s, color .2s, background .2s;
}
.tabs a:hover { border-color: var(--ink); color: var(--ink); }
.tabs a[aria-current] { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 500; }

/* 제품 카드 */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
.p-card a { display: block; }
.p-card__img {
    overflow: hidden; aspect-ratio: 325 / 355;
    border-radius: var(--radius); background: var(--soft);
}
.p-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.p-card a:hover .p-card__img img { transform: scale(1.04); }
.p-card__brand { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--brand); }
.p-card__name { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.p-card__brand + .p-card__name { margin-top: 4px; }
.p-card__spec { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* ===== 메인 ===== */
.hero { position: relative; overflow: hidden; aspect-ratio: 600 / 597; background: var(--soft); }
.hero__slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide picture, .hero__slide img { width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; }
.hero__text {
    position: absolute; left: 0; right: 0; top: 7%;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 0 var(--gutter); text-align: center;
}
.hero__tagline { font-size: 15px; font-weight: 500; color: var(--ink); }
.hero__logo img { width: auto; height: 30px; }
.hero__slide--fusidyne .hero__logo img { height: 48px; }
.hero__text .btn-line { height: 40px; margin-top: 6px; padding: 0 18px; font-size: 13px; }
.hero__slide.is-active .hero__text > * { animation: rise .8s ease both; }
.hero__slide.is-active .hero__text > :nth-child(2) { animation-delay: .1s; }
.hero__slide.is-active .hero__text > :nth-child(3) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero__ctrl {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px;
    padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__ctrl button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--ink); }
.hero__ctrl button:hover { background: rgba(0, 0, 0, .06); }
.hero__dots { display: flex; }
.hero__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #c9c9c9; transition: width .3s, background .3s; }
.hero__dots button[aria-current]::before { width: 22px; background: var(--ink); }
.hero__toggle { font-size: 11px !important; letter-spacing: -1px; }

.main-products { padding: 56px 0 72px; }
.main-group + .main-group { margin-top: 56px; }
.sec-head { margin-bottom: 20px; }
.sec-head__title { font-size: 28px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.sec-head__title::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 14px; background: var(--ink); }
.main-group .p-card__img { aspect-ratio: 1; }
/* 모바일: 3개를 세로 목록으로 (왼쪽 이미지, 오른쪽 브랜드·제품명·용량) */
@media (max-width: 767px) {
    .main-group .card-grid { grid-template-columns: 1fr; gap: 16px; }
    .main-group .p-card a { display: grid; grid-template-columns: min(40%, 200px) 1fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 18px; }
    .main-group .p-card__img { grid-row: 1 / -1; }
    .main-group .p-card a > p { grid-column: 2; margin-top: 0; }
    .main-group .p-card__brand { grid-row: 2; }
    .main-group .p-card__name { grid-row: 3; }
    .main-group .p-card__brand + .p-card__name { margin-top: 4px; }
    .main-group .p-card__spec { grid-row: 4; margin-top: 4px; }
}

/* ===== 목록 ===== */
.page-visual { overflow: hidden; background: var(--brand-soft); }
.page-visual img { width: 100%; }
.page-head { padding: 28px 0 20px; }
.page-head .breadcrumb { margin-bottom: 10px; }
.page-title { font-size: 26px; }
.page-title small { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.list-body { padding-top: 8px; padding-bottom: 80px; }
.list-body .card-grid { margin-top: 28px; }
.list-group + .list-group { margin-top: 56px; }
.list-group__title { margin-top: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 18px; }
.list-group__title + .card-grid { margin-top: 24px; }

/* 게시판·검색 */
.empty { padding: 72px 0; text-align: center; color: var(--muted); }
.board { margin-top: 16px; border-top: 2px solid var(--ink); }
.board li { border-bottom: 1px solid var(--line); }
.board a { display: block; padding: 20px 4px; transition: background .2s; }
.board a:hover { background: var(--soft); }
.board__title { display: block; font-size: 16px; font-weight: 500; color: var(--ink); }
.board__meta { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.pager a { display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: 999px; font-size: 14px; }
.pager a:hover { background: var(--soft); }
.pager a[aria-current] { background: var(--ink); color: #fff; }
.article { padding-top: 8px; }
.article__head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.article__title { font-size: 24px; line-height: 1.45; }
.article__body { padding: 32px 0; font-size: 16px; line-height: 1.85; }
.article__body img { height: auto; margin: 16px 0; }
.article__body .ql-align-center { text-align: center; }
.article__body .ql-align-right { text-align: right; }
.article__body .ql-align-center img { margin-left: auto; margin-right: auto; }
.article__body h2, .article__body h3 { margin: 28px 0 12px; }
.article__body ul, .article__body ol { padding-left: 1.4em; list-style: revert; }
.article__body blockquote { margin: 16px 0; padding-left: 16px; border-left: 3px solid var(--line); color: var(--muted); }
.article__body a { color: var(--brand); text-decoration: underline; }
.search--page { max-width: 560px; margin: 8px 0 32px; }
.search--page + .card-grid { margin-top: 0; }
/* 회사소개 본문 */
.intro { max-width: 820px; padding-top: 40px; font-size: 16px; line-height: 1.9; }
.intro p + p, .intro figure + p { margin-top: 24px; }
.intro__title { margin-bottom: 28px; font-size: 24px; line-height: 1.45; }
.intro figure { margin: 36px 0; }
.intro figure img { border-radius: 8px; }
.intro figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* ===== 제품 상세 ===== */
.pd-nav { padding-top: 16px; padding-bottom: 16px; }
.pd-nav .tabs + .tabs { margin-top: 10px; }
.pd-nav .tabs--brand a { padding: 6px 14px; font-size: 13px; border-color: transparent; color: var(--muted); }
.pd-nav .tabs--brand a[aria-current] { background: none; border-color: transparent; color: var(--ink); font-weight: 700; }
/* 제품 탭: 줄바꿈되므로 작게 */
.pd-nav .tabs:not(.tabs--brand) { gap: 6px 5px; }
.pd-nav .tabs:not(.tabs--brand) a { padding: 5px 8px; font-size: 12px; }
@media (min-width: 768px) { .pd-nav .tabs:not(.tabs--brand) a { padding: 6px 12px; font-size: 13px; } }

.pd-hero { display: grid; gap: 24px; padding: 0 0 8px; }
.pd-hero__img { margin: 0 calc(var(--gutter) * -1); background: var(--brand-soft); }
.pd-hero__img img { width: 100%; }
.pd-hero__info .breadcrumb { margin-bottom: 14px; }
.pd-hero__name { font-size: 26px; }
.pd-hero__eng { margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.pd-hero__spec { display: inline-block; margin-top: 12px; padding: 3px 12px; border-radius: 999px; background: var(--brand-soft); font-size: 13px; font-weight: 500; color: var(--brand); }
.pd-hero__icons { display: flex; gap: 10px; margin-top: 24px; }
.pd-hero__icons img { width: 76px; height: 76px; }

.pd-hero__shop { display: flex; width: fit-content; margin-top: 28px; }
.pd-images { max-width: 1000px; margin: 56px auto 96px; }
.pd-images img { width: 100%; }
.pd-images--wide { max-width: 1140px; margin-top: 8px; }

.pd-sec { padding: 72px 0 0; }
.pd-sec:last-of-type { padding-bottom: 96px; }
.pd-title {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-bottom: 36px; font-size: 26px; font-weight: 700; letter-spacing: .02em; text-align: center;
}
.pd-title::before, .pd-title::after { content: ""; width: 28px; height: 2px; background: var(--brand); }
.pd-title img { display: inline-block; width: auto; height: 22px; margin-right: 8px; vertical-align: -2px; }
.pd-lead { max-width: 760px; margin: 0 auto; font-size: 18px; font-weight: 500; line-height: 1.6; text-align: center; color: var(--ink); }
.pd-sub { margin: 48px 0 12px; font-size: 19px; text-align: center; }
.pd-sub:first-child { margin-top: 0; }
.pd-desc { max-width: 760px; margin: 0 auto; font-size: 15px; text-align: center; color: var(--muted); }

.pd-product { display: grid; gap: 32px; align-items: center; margin-top: 40px; }
.pd-points { counter-reset: pt; display: grid; gap: 20px; }
.pd-points li { position: relative; padding-left: 52px; font-size: 15px; }
.pd-points li::before {
    counter-increment: pt; content: counter(pt, decimal-leading-zero);
    position: absolute; left: 0; top: -2px;
    font-size: 22px; font-weight: 700; font-style: italic; color: var(--brand);
}
.pd-product__img { justify-self: center; max-width: 280px; }
.pd-points--center { max-width: 720px; margin: 40px auto 0; }
.howto small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

.pd-badge {
    display: flex; align-items: center; gap: 18px;
    margin-top: 48px; padding: 20px 24px; border-radius: var(--radius); background: var(--soft);
}
.pd-badge img { width: 72px; height: 72px; flex: none; }
.pd-badges { display: grid; gap: 12px; margin-top: 48px; }
.pd-badges .pd-badge { margin-top: 0; }
.pd-badge strong { display: block; font-size: 16px; color: var(--ink); }
.pd-badge span { font-size: 14px; color: var(--muted); }

.tech-flow { display: grid; gap: 28px; margin: 20px 0 0; counter-reset: none; }
.tech-flow li {
    position: relative; display: grid; place-items: center; min-height: 72px; padding: 14px 20px;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 15px; font-weight: 700; text-align: center; color: var(--ink);
}
.tech-flow li + li::before { content: "↓"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-weight: 400; color: var(--muted); }
.tech-flow li:last-child { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

.tech-figs { display: grid; gap: 20px; margin-top: 28px; }
.tech-figs figure { text-align: center; }
.tech-figs img { width: 100%; max-width: 300px; margin: 0 auto; border-radius: var(--radius); background: var(--soft); }
.tech-figs figcaption { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.tech-figs figure:nth-child(2) figcaption { color: var(--brand); }
.pd-notes { display: grid; gap: 4px; margin-top: 28px; padding: 16px 20px; border-radius: 10px; background: var(--soft); font-size: 13px; color: var(--muted); }

.ingr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; margin-top: 32px; }
.ingr-grid li { text-align: center; }
.ingr-grid span {
    display: block; padding: 8px 4px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text);
}
.ingr-grid li:first-child span { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.ingr-grid img { width: 100%; border-radius: 8px; }
.ingr-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.ingr-grid--4 { grid-template-columns: repeat(2, 1fr); }
.ingr-grid em { display: block; margin-top: 6px; font-size: 12px; font-style: normal; color: var(--muted); }
.compare { display: grid; gap: 16px; margin-top: 28px; }
.compare > div { padding: 24px; border-radius: var(--radius); background: var(--soft); font-size: 15px; }
.compare h4 { margin-bottom: 8px; font-size: 17px; }
.compare > div:first-child h4 { color: var(--brand); }
.pd-lab--2 { display: grid; gap: 12px; max-width: 1000px; }
.pd-footnote { margin-top: 16px; padding-left: 52px; font-size: 13px; color: var(--muted); }
.pd-wide { margin: 28px auto 0; border-radius: var(--radius); }
.pd-lab__text { margin-top: 16px !important; font-size: 15px !important; color: var(--text) !important; }
.ingr-slm-tile { position: relative; }
.ingr-slm-tile b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--brand); }
.ingr-slm { display: block; margin-top: 20px; text-align: center; }
.ingr-slm img { margin: 0 auto; }

.pd-more { display: flex; justify-content: center; margin-top: 32px; }

.pd-lab { max-width: 520px; margin: 0 auto; text-align: center; }
.pd-lab img { margin: 0 auto; border-radius: var(--radius); }
.pd-lab p { margin-top: 12px; font-size: 13px; color: var(--muted); }

.pd-check { position: relative; overflow: hidden; margin-top: 72px; border-radius: var(--radius); background: var(--soft); }
.pd-check__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 75% center; }
.pd-check__body { padding: 28px 24px 32px; }
.pd-check h3 { font-size: 22px; line-height: 1.4; }
.pd-check ul { display: grid; gap: 10px; margin-top: 18px; }
.pd-check li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink); }
.pd-check li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); font-size: 12px; font-weight: 700; color: #fff; }

.howto { display: grid; gap: 28px; align-items: center; }
.howto img { margin: 0 auto; }
.howto ol { display: grid; gap: 14px; counter-reset: step; }
.howto li { position: relative; padding-left: 40px; font-size: 15px; }
.howto li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 0;
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--ink); font-size: 13px; font-weight: 700; color: #fff;
}
.howto li.tip::before { content: "TIP"; width: auto; padding: 0 6px; border-radius: 6px; background: var(--brand); font-size: 11px; }

.care-grid { display: grid; gap: 16px; }
.care-col { display: flex; flex-direction: column; }
.care-col__label { margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--brand); }
.care-col__cards { flex: 1; display: grid; gap: 12px; grid-template-columns: repeat(var(--n, 1), 1fr); }
.care-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .25s, transform .25s; }
.care-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.care-card__img { display: grid; place-items: end center; height: 170px; padding-top: 16px; background: var(--soft); }
.care-card__img img { width: auto; max-height: 150px; }
.care-card__body { flex: 1; padding: 14px 14px 18px; text-align: center; font-size: 13px; color: var(--muted); }
.care-card__body strong { display: block; margin-bottom: 4px; font-size: 15px; line-height: 1.4; color: var(--ink); }

.step-cards { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.step-cards__no { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .04em; color: var(--brand); }
.pd-video { width: 100%; max-width: 960px; height: auto; margin: 28px auto 0; border-radius: var(--radius); background: #000; }
.pd-lab figure { text-align: center; }
.pd-lab figcaption { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
@media (min-width: 768px) { .step-cards { grid-template-columns: 1fr 1fr; } }

/* 전성분 팝업 (<dialog>) */
.dialog { width: min(640px, calc(100% - 32px)); max-height: 80vh; padding: 0; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialog__head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.dialog__head h2 { font-size: 18px; }
.dialog__close { width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; }
.dialog__close:hover { background: var(--soft); }
.dialog__body { padding: 20px; font-size: 14px; line-height: 1.8; }
.dialog__body strong { display: block; color: var(--ink); }
.dialog__body .eng { display: block; margin-bottom: 14px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }

/* ===== 태블릿 이상 ===== */
@media (min-width: 768px) {
    :root { --gutter: 32px; }
    .hero { aspect-ratio: 1600 / 815; }
    .hero__text { top: 13%; gap: 14px; }
    .hero__tagline { font-size: 20px; }
    .hero__logo img { height: 42px; }
    .hero__slide--fusidyne .hero__logo img { height: 76px; }
    .hero__text .btn-line { height: 48px; padding: 0 26px; font-size: 15px; }
    .hero__ctrl { bottom: 24px; }

    .card-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
    .main-group .card-grid { gap: 20px; }

    .tech-flow { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .tech-flow li + li::before { content: "→"; top: 50%; left: -28px; transform: translateY(-50%); }
    .tech-figs { grid-template-columns: repeat(3, 1fr); }
    .pd-badges { grid-template-columns: repeat(2, 1fr); }
    .tech-figs img { max-width: 100%; }
    .ingr-grid { grid-template-columns: repeat(6, 1fr); }
    .ingr-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .ingr-grid--5 { grid-template-columns: repeat(5, 1fr); }
    .compare { grid-template-columns: 1fr 1fr; }
    .pd-lab--2 { grid-template-columns: 1fr 1fr; }
    .pd-badges--3 { grid-template-columns: repeat(3, 1fr); }
    .care-grid { grid-template-columns: var(--care-cols, 1fr 2fr 1fr 1fr); }
    .pd-check__img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
    .pd-check__body { position: relative; max-width: 520px; padding: 56px 48px; }
}

/* ===== PC ===== */
@media (min-width: 1024px) {
    :root { --gutter: 48px; }
    .main-products { padding: 88px 0 120px; }
   .main-group + .main-group { margin-top: 88px; }
    .sec-head__title { font-size: 34px; }

    .page-head { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; padding: 40px 0 28px; }
    .page-head .breadcrumb { margin: 0; }
    .page-title { font-size: 32px; }

    .pd-hero { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding: 0; }
    .pd-hero__img { margin: 0 0 0 calc(var(--gutter) * -1); }
    .pd-hero__name { font-size: 34px; }
    .pd-hero__icons img { width: 92px; height: 92px; }

    .pd-sec { padding-top: 120px; }
    .pd-title { font-size: 32px; margin-bottom: 44px; }
    .pd-title img { height: 26px; }
    .pd-lead { font-size: 21px; }
    .pd-product { grid-template-columns: 1.2fr 1fr; gap: 56px; margin-top: 56px; }
    .pd-points li { font-size: 16px; }
    .howto { grid-template-columns: 1fr 1fr; gap: 56px; }
    .howto li { font-size: 16px; }
    .pd-check__body { padding: 72px 64px; }
    .pd-check h3 { font-size: 28px; }
}

@media (min-width: 1280px) {
    /* 메인 제품: 넓은 화면에서만 제목을 왼쪽에 (1024~1279는 제목 아래 카드) */
    .main-group { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
    .list-body .card-grid { grid-template-columns: repeat(4, 1fr); }
}