/*
 * 인성한의원 다이어트환
 * v1.2.1 HORMONE TITLE POLISH FINAL
 * Base: insung-about.css
 * PHP 5.5 compatible markup / responsive CSS
 */

.insung-diet {
    overflow: hidden;
    color: #493f3a;
    background: #fff;
}
.insung-diet * { box-sizing: border-box; }
.insung-diet img { display: block; width: 100%; height: auto; }
.insung-diet .id-section-head { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }

.id-hero { padding: 108px 0 112px; background: linear-gradient(180deg, #fff 0%, #fbf8f3 100%); }
.id-hero-grid { display: flex; align-items: center; gap: 78px; }
.id-hero-copy { flex: 1 1 49%; min-width: 0; }

/* DIET HERO TITLE */
.id-hero-copy .ia-title {
    font-size: 46px;
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: -.04em;
}

.id-hero-copy .ia-title strong {
    position: relative;
    display: inline-block;
    z-index: 1;
    color: #7f5c48;
    font-size: inherit;
    font-weight: 800;
    letter-spacing: -.045em;
}

.id-hero-copy .ia-title strong:after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    bottom: .11em;
    height: .22em;
    border-radius: 2px;
    background: rgba(174, 139, 112, .18);
    z-index: -1;
}


.id-hero-photo { flex: 1 1 51%; min-width: 0; margin: 0; position: relative; }
.id-hero-photo:before { content: ""; position: absolute; left: -22px; bottom: -22px; width: 46%; height: 58%; border: 1px solid rgba(160, 128, 95, .32); z-index: 0; }
.id-hero-photo img { position: relative; z-index: 1; height: 510px; object-fit: cover; object-position: center; border-radius: 2px; }
.id-hero-lead { margin: 28px 0 14px; color: #8b674f; font-size: 21px; font-weight: 600; line-height: 1.55; }
.id-highlight { margin: 30px 0 0; padding: 22px 24px; border-left: 3px solid #aa8164; background: rgba(244, 238, 230, .72); color: #5f4d43; font-size: 18px; font-weight: 600; line-height: 1.65; }

.id-change { padding: 112px 0; }
.id-change-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 52px; }
.id-change-card { min-height: 188px; padding: 30px 28px; border: 1px solid #e7ded4; background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.id-change-card:hover { transform: translateY(-4px); border-color: #d7c2ad; box-shadow: 0 14px 34px rgba(69, 52, 42, .07); }
.id-card-no { display: block; margin-bottom: 20px; color: #b18a6d; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.id-change-card h3 { margin: 0 0 10px; color: #493f3a; font-size: 23px; line-height: 1.35; }
.id-change-card p { margin: 0; color: #766b64; font-size: 15px; line-height: 1.75; word-break: keep-all; }

.id-lineup { padding: 118px 0; background: #f8f4ef; }
.id-type-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 58px; }
.id-type-card { grid-column: span 2; min-height: 330px; padding: 34px 30px 32px; border: 1px solid rgba(179, 150, 124, .28); background: rgba(255, 255, 255, .90); }
.id-type-card:nth-child(4) { grid-column: 2 / span 2; }
.id-type-card--wide { grid-column: 4 / span 2; }
.id-type-card--accent { background: #fffaf5; border-color: #d8bda5; }
.id-type-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #eee5dc; }
.id-type-no { color: #a77d60; font-size: 13px; font-weight: 700; }
.id-type-label { color: #a6978d; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.id-type-card h3 { margin: 24px 0 7px; color: #4b3e37; font-size: 27px; line-height: 1.35; }
.id-type-sub { margin: 0 0 18px; color: #9a6d51; font-size: 15px; font-weight: 600; line-height: 1.55; }
.id-type-card ul { margin: 0; padding: 0; list-style: none; }

.id-type-card li {
    position: relative;
    margin-top: 9px;
    padding-left: 16px;
    color: #5f5148;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.id-type-card li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .82em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a97d5f;
}

.id-maintenance { padding: 118px 0; background: #6d5b51; color: #fff; }
.id-maintenance-wrap { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 76px; align-items: center; }
.id-maintenance .ia-eyebrow { color: #e8d2bd; }
.id-maintenance .ia-title, .id-maintenance .ia-title strong { color: #fff; }
.id-maintenance .ia-desc { color: rgba(255,255,255,.76); }
.id-core-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.id-core-card { min-height: 210px; padding: 28px 22px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.id-core-card span { color: #e8d2bd; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.id-core-card h3 { margin: 42px 0 10px; color: #fff; font-size: 21px; }
.id-core-card p { margin: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.65; word-break: keep-all; }

.id-prescription { padding: 118px 0; }
.id-prescription-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); gap: 74px; align-items: center; }
.id-prescription-photo { margin: 0; overflow: hidden; background: #f4eee7; }
.id-prescription-photo img { height: 470px; object-fit: cover; object-position: center 42%; }
.id-check-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.id-check-chips span { display: inline-flex; align-items: center; min-height: 37px; padding: 7px 14px; border: 1px solid #ded1c4; border-radius: 999px; color: #66584f; background: #fffaf5; font-size: 13px; font-weight: 500; }

.id-caution { padding: 30px 0 118px; }
.id-caution-box { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; padding: 58px 62px; border: 1px solid #e3d8cd; background: #faf7f3; }
.id-caution-list { display: grid; grid-template-columns: 1fr; align-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }

.id-caution-list li {
    position: relative;
    padding: 12px 14px 12px 40px;
    border-bottom: 1px solid #e8ddd4;
    color: #584d47;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.id-caution-list li:before {
    content: "✓";
    position: absolute;
    left: 10px;
    top: 12px;
    color: #9b7055;
    font-size: 15px;
    font-weight: 700;
}

.id-program { padding: 118px 0; background: #fff; }
.id-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.id-step-card { min-height: 360px; padding: 32px 28px; border-top: 2px solid #a87f62; border-right: 1px solid #e9e0d7; border-bottom: 1px solid #e9e0d7; border-left: 1px solid #e9e0d7; background: #fff; }
.id-step-no { color: #a77b5e; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.id-step-card h3 { margin: 34px 0 15px; color: #4c403a; font-size: 24px; }
.id-step-card > p { margin: 0; color: #746a63; font-size: 14px; line-height: 1.78; word-break: keep-all; }
.id-price, .id-benefit { margin-top: 24px; padding-top: 18px; border-top: 1px solid #eee5dc; color: #725c4f; font-size: 13px; line-height: 1.6; }
.id-price strong, .id-benefit strong { display: block; color: #9c6c4d; font-size: 16px; }
.id-price small { display: block; margin-top: 4px; color: #91857c; font-size: 11px; }
.id-treatment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 54px; }
.id-treatment-photo { margin: 0; position: relative; overflow: hidden; background: #eee; }
.id-treatment-photo img { height: 360px; object-fit: cover; }
.id-treatment-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 28px 24px; color: #fff; background: linear-gradient(180deg, rgba(36,29,25,0) 0%, rgba(36,29,25,.78) 100%); }
.id-treatment-photo figcaption strong { display: block; margin-bottom: 7px; font-size: 20px; }
.id-treatment-photo figcaption span { display: block; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.55; }

.id-process { padding: 104px 0; text-align: center; background: #f7f1ea; }
.id-process-flow { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 40px auto 0; }
.id-process-flow span { min-width: 150px; padding: 17px 20px; border: 1px solid #d9c6b4; background: rgba(255,255,255,.78); color: #594940; font-size: 15px; font-weight: 600; }
.id-process-flow i { color: #ae8668; font-style: normal; font-size: 20px; }
.id-process-copy { margin: 30px 0 0; color: #71645c; font-size: 17px; font-weight: 500; line-height: 1.7; }

.id-consult { padding: 104px 0; background: #fff; }
.id-consult-box { padding: 60px 40px; border: 1px solid #e3d7cc; text-align: center; }
.id-consult-box .ia-desc { max-width: 670px; margin-left: auto; margin-right: auto; }
.id-consult-actions { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.id-consult-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 52px; padding: 12px 20px; border: 1px solid #b99a82; color: #6f5545; background: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.id-consult-btn:hover { background: #f7f1eb; color: #5a4335; }
.id-consult-btn--primary { border-color: #7d6251; color: #fff; background: #7d6251; }
.id-consult-btn--primary:hover { border-color: #665044; color: #fff; background: #665044; }

@media (max-width: 1199px) {
    .id-hero { padding: 88px 0 94px; }
    .id-hero-copy .ia-title { font-size: 40px; }
    .id-hero-grid { gap: 48px; }
    .id-hero-photo img { height: 440px; }
    .id-change, .id-lineup, .id-prescription, .id-program { padding-top: 94px; padding-bottom: 94px; }
    .id-maintenance { padding: 94px 0; }
    .id-maintenance-wrap { gap: 46px; }
    .id-type-card { padding: 30px 25px; }
    .id-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .id-step-card { min-height: 310px; }
    .id-caution-box { padding: 48px; gap: 44px; }
}

@media (max-width: 991px) {
    .id-hero-grid, .id-prescription-grid { grid-template-columns: 1fr; display: grid; gap: 42px; }
    .id-hero-copy { max-width: 760px; }
    .id-hero-photo img { height: 420px; }
    .id-change-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .id-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .id-type-card, .id-type-card:nth-child(4), .id-type-card--wide { grid-column: auto; }
    .id-type-card--wide { grid-column: 1 / -1; min-height: 250px; }
    .id-maintenance-wrap { grid-template-columns: 1fr; }
    .id-core-grid { max-width: 760px; }
    .id-caution-box { grid-template-columns: 1fr; }
    .id-treatment-photo img { height: 320px; }
    .id-process-flow { flex-wrap: wrap; }
}

@media (max-width: 767px) {
    .id-hero { padding: 68px 0 74px; }
    .id-hero-grid { gap: 30px; }
    .id-hero-lead { margin-top: 20px; font-size: 17px; }
    .id-highlight { margin-top: 22px; padding: 17px 18px; font-size: 15px; }
    .id-hero-photo:before { left: -10px; bottom: -10px; }
    .id-hero-photo img { height: 330px; }
    .id-change, .id-lineup, .id-prescription, .id-program { padding-top: 74px; padding-bottom: 74px; }
    .id-maintenance { padding: 74px 0; }
    .id-change-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 36px; }
    .id-change-card { min-height: 154px; padding: 23px 18px; }
    .id-change-card h3 { font-size: 20px; }
    .id-change-card p { font-size: 13px; }
    .id-card-no { margin-bottom: 13px; font-size: 10px; }
    .id-type-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 38px; }
    .id-type-card, .id-type-card--wide { grid-column: auto; min-height: auto; padding: 26px 22px; }
    .id-type-card h3 { margin-top: 19px; font-size: 24px; }
    .id-core-grid { grid-template-columns: 1fr; gap: 10px; }
    .id-core-card { min-height: 0; padding: 24px 22px; }
    .id-core-card h3 { margin-top: 20px; }
    .id-prescription-photo img { height: 330px; }
    .id-check-chips { gap: 7px; }
    .id-check-chips span { min-height: 34px; padding: 6px 11px; font-size: 12px; }
    .id-caution { padding: 8px 0 74px; }
    .id-caution-box { padding: 34px 22px; gap: 28px; }
    
	.id-caution-list li {
    padding-left: 34px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
}

    .id-step-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 38px; }
    .id-step-card { min-height: 0; padding: 27px 23px; }
    .id-step-card h3 { margin-top: 22px; font-size: 22px; }
    .id-treatment-grid { grid-template-columns: 1fr; margin-top: 36px; }
    .id-treatment-photo img { height: 280px; }
    .id-process { padding: 74px 0; }
    .id-process-flow { display: grid; grid-template-columns: 1fr; gap: 7px; max-width: 360px; margin-top: 30px; }
    .id-process-flow span { min-width: 0; width: 100%; }
    .id-process-flow i { transform: rotate(90deg); font-size: 16px; line-height: 1; }
    .id-process-copy { margin-top: 24px; font-size: 15px; }
    .id-consult { padding: 74px 0; }
    .id-consult-box { padding: 42px 20px; }
    .id-consult-actions { display: grid; grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
    .id-consult-btn { width: 100%; min-width: 0; }
}

@media (max-width: 420px) {
    .id-change-grid { grid-template-columns: 1fr; }
    .id-change-card { min-height: 0; }
    .id-hero-photo img { height: 285px; }
    .id-prescription-photo img { height: 280px; }
    .id-treatment-photo img { height: 245px; }
}

/* =========================================================
   v1.0.1 FACE-FREE / SUB VISUAL / SERVICE ICON FINAL
   - This stylesheet is loaded only on sub02_1.php.
   - Force the diet sub visual even when menu DB pageNum lookup fails.
========================================================= */
#sub_visual {
    background-image: url('../img/sub/sub02_top.jpg') !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.id-hero-photo img {
    object-position: center center;
}

.id-treatment-photo:last-child img {
    object-position: center center;
}

.id-consult-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 900px;
    margin: 34px auto 0;
}

.id-consult-btn {
    min-width: 0;
    min-height: 82px;
    padding: 13px 18px;
    border: 1px solid #ddd1c6;
    background: #fff;
    color: #5f5047;
    text-align: left;
    justify-content: flex-start;
    gap: 14px;
    border-radius: 2px;
}

.id-consult-btn:hover {
    border-color: #c9b6a6;
    background: #fbf8f5;
    color: #4e4038;
}

.id-consult-icon {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 23px;
    line-height: 1;
}

.id-consult-icon i {
    display: block;
    line-height: 1;
}

.id-consult-icon--kakao {
    background: #fee500;
    color: #3c1e1e;
}

.id-consult-icon--phone {
    background: #7d6251;
    color: #fff;
}

.id-consult-icon--naver {
    background: #03c75a;
    color: #fff;
}

.id-consult-text {
    display: block;
    min-width: 0;
}

.id-consult-text strong,
.id-consult-text small {
    display: block;
}

.id-consult-text strong {
    color: #51443d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.id-consult-text small {
    margin-top: 5px;
    color: #91857d;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
}

.id-consult-btn--phone {
    border-color: #cdbcae;
    background: #faf7f4;
}

@media (max-width: 767px) {
    .id-consult-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        max-width: none;
        margin-top: 28px;
    }

    .id-consult-btn {
        min-height: 94px;
        padding: 12px 6px 10px;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }

    .id-consult-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    .id-consult-text strong {
        font-size: 12px;
    }

    .id-consult-text small {
        display: none;
    }
}

@media (max-width: 420px) {
    .id-consult-actions {
        gap: 6px;
    }

    .id-consult-btn {
        min-height: 88px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .id-consult-text strong {
        font-size: 11px;
        letter-spacing: -0.03em;
    }
}

/* =========================================================
   v1.0.2 CARD VISUAL POLISH FINAL
   - HORMONAL CHANGE 6 cards: badge / micro label / depth
   - DIET & MAINTENANCE 4 steps: connected process flow
========================================================= */
.id-change-grid {
    gap: 20px;
}
.id-change-card {
    position: relative;
    overflow: hidden;
    min-height: 228px;
    padding: 28px 26px 27px;
    border: 1px solid #e5d8cc;
    background: linear-gradient(180deg, #fffdfb 0%, #faf6f1 100%);
    box-shadow: 0 8px 24px rgba(81, 62, 50, .045);
}
.id-change-card:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, #d6b99f 0%, #b98f70 50%, #e4d1bf 100%);
}
.id-change-card:after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -44px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: rgba(211, 186, 164, .10);
    pointer-events: none;
}
.id-change-card:hover {
    transform: translateY(-5px);
    border-color: #d5bda8;
    box-shadow: 0 16px 34px rgba(72, 52, 40, .09);
}
.id-change-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border: 1px solid #dfc7b1;
    border-radius: 50%;
    background: #f2e7dd;
    color: #8f664d;
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.42);
}
.id-change-badge span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
}
.id-change-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}
.id-change-meta .id-card-no {
    margin: 0;
    color: #a97d5e;
    font-size: 10px;
    line-height: 1;
}
.id-change-en {
    position: relative;
    padding-left: 11px;
    color: #a29186;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
}
.id-change-en:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 1px;
    background: #c6a78e;
}
.id-change-card h3 {
    margin: 0 0 9px;
    font-size: 23px;
}
.id-change-card p {
    position: relative;
    z-index: 1;
    color: #5f5148;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.id-process {
    position: relative;
    overflow: hidden;
    padding: 108px 0;
    background: linear-gradient(180deg, #f9f5f0 0%, #f3ebe3 100%);
}
.id-process:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 760px;
    height: 260px;
    transform: translateX(-50%);
    border-radius: 0 0 50% 50%;
    background: rgba(255,255,255,.32);
    pointer-events: none;
}
.id-process .ia-wrap {
    position: relative;
    z-index: 1;
}
.id-process-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
    max-width: 1040px;
    margin: 48px auto 0;
}
.id-process-flow:before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 38px;
    height: 1px;
    background: #ceb39c;
    z-index: 0;
}
.id-process-step {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 178px;
    padding: 0 14px 24px;
    border: 1px solid #dfcec0;
    border-top: 0;
    background: rgba(255,255,255,.84);
    box-shadow: 0 10px 26px rgba(78, 57, 43, .05);
}
.id-process-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    transform: translateY(-1px);
    border: 1px solid #c8a78c;
    border-radius: 50%;
    background: #fffaf5;
    color: #8a6047;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .05em;
    box-shadow: 0 0 0 8px #f4ebe3;
}
.id-process-step small {
    display: block;
    margin-bottom: 9px;
    color: #aa8d79;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
}
.id-process-step strong {
    display: block;
    color: #574840;
    font-size: 18px;
    line-height: 1.4;
}
.id-process-step--final {
    border-color: #cdb39d;
    background: linear-gradient(180deg, #f1e5db 0%, #ead9ca 100%);
}
.id-process-step--final .id-process-node {
    border-color: #a87d5e;
    background: #b48968;
    color: #fff;
    box-shadow: 0 0 0 8px #ead9ca;
}
.id-process-step--final strong {
    color: #4e3c32;
}
.id-process-copy {
    max-width: 760px;
    margin: 34px auto 0;
    padding-top: 24px;
    border-top: 1px solid #d9c5b4;
    color: #74665d;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
}
.id-process-copy span {
    display: block;
    margin-bottom: 4px;
    color: #8f654b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

@media (max-width: 991px) {
    .id-change-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .id-process-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
        gap: 28px 16px;
    }
    .id-process-flow:before {
        display: none;
    }
    .id-process-step {
        min-height: 168px;
    }
}

@media (max-width: 767px) {
    .id-change-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .id-change-card {
        min-height: 208px;
        padding: 22px 17px 20px;
    }
    .id-change-badge {
        width: 46px;
        height: 46px;
        margin-bottom: 14px;
    }
    .id-change-badge span {
        font-size: 11px;
    }
    .id-change-meta {
        gap: 7px;
        margin-bottom: 7px;
    }
    .id-change-en {
        font-size: 8px;
        letter-spacing: .08em;
    }
    .id-change-card h3 {
        font-size: 19px;
    }
    .id-change-card p {
        font-size: 12px;
        line-height: 1.65;
    }
    .id-process {
        padding: 78px 0;
    }
    .id-process-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 10px;
        margin-top: 38px;
    }
    .id-process-step {
        min-height: 160px;
        padding: 0 8px 20px;
    }
    .id-process-node {
        width: 62px;
        height: 62px;
        margin-bottom: 18px;
        box-shadow: 0 0 0 6px #f4ebe3;
    }
    .id-process-step--final .id-process-node {
        box-shadow: 0 0 0 6px #ead9ca;
    }
    .id-process-step small {
        font-size: 8px;
        letter-spacing: .08em;
    }
    .id-process-step strong {
        font-size: 15px;
    }
    .id-process-copy {
        margin-top: 28px;
        padding-top: 20px;
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .id-change-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .id-change-card {
        min-height: 198px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .id-change-card p {
        word-break: keep-all;
    }
    .id-process-flow {
        grid-template-columns: 1fr;
        max-width: 320px;
        gap: 16px;
    }
    .id-process-step {
        min-height: 0;
        padding: 18px 16px 20px;
    }
    .id-process-node {
        width: 58px;
        height: 58px;
        margin-bottom: 16px;
    }
}

/* Legacy v1.0.0 process-span reset for v1.0.2 node markup */
.id-process-flow .id-process-node {
    min-width: 0;
    width: 76px;
    padding: 0;
}
@media (max-width: 767px) {
    .id-process-flow .id-process-node {
        width: 62px;
    }
}
@media (max-width: 420px) {
    .id-process-flow .id-process-node {
        width: 58px;
    }
}

/* HORMONE TITLE SIZE SYNC: sub02_2.php intro title */
@media (max-width: 640px) {
    .id-hero-copy .ia-title {
        font-size: 31px;
        line-height: 1.38;
    }
    .id-hero-copy .ia-title strong:after {
        bottom: .10em;
        height: .20em;
    }
}