@charset "utf-8";
/*
 * 고운빛의원 색소 시술안내 v2.0.0
 * 기존 서브페이지 CSS와 충돌하지 않도록 전용 클래스만 사용
 * PC 3열 / 태블릿 2열 / 모바일 1열
 */
.goun-pigment-v20,
.goun-pigment-v20 * { box-sizing: border-box; }
.goun-pigment-v20 {
    width: min(100% - 40px, 1240px);
    max-width: 1240px;
    margin: 42px auto 96px;
    padding: 0;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    color: #28252a;
    word-break: keep-all;
}
.goun-pigment-v20 .goun-pigment-header { text-align: center; padding: 28px 12px 18px; }
.goun-pigment-v20 .goun-pigment-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 750;
    letter-spacing: .2em; color: #b6758b; margin-bottom: 15px;
}
.goun-pigment-v20 .goun-pigment-header h2 {
    margin: 0 0 16px; font-size: clamp(30px,3vw,44px);
    font-weight: 760; letter-spacing: -.06em; line-height: 1.3;
}
.goun-pigment-v20 .goun-pigment-header p {
    max-width: 850px; margin: 0 auto; color: #756b70;
    font-size: 17px; font-weight: 400; line-height: 1.85;
}
.goun-pigment-v20 .goun-pigment-pillars {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px; margin: 30px 0 72px; padding: 20px;
    border: 1px solid #f0e2e6; background: #fcf7f8; border-radius: 18px;
}
.goun-pigment-v20 .goun-pigment-pillars > div {
    display: flex; justify-content: center; align-items: center;
    gap: 12px; min-width: 0; padding: 8px 10px;
}
.goun-pigment-v20 .goun-pigment-pillars strong { color: #b8758b; font-size: 16px; letter-spacing: .05em; }
.goun-pigment-v20 .goun-pigment-pillars span { color: #4e454a; font-size: 15px; font-weight: 600; }
.goun-pigment-v20 .goun-pigment-section-heading { text-align: center; margin-bottom: 31px; }
.goun-pigment-v20 .goun-pigment-section-heading > span {
    display: block; font-size: 11px; letter-spacing: .17em; color: #bc8092; font-weight: 700;
}
.goun-pigment-v20 .goun-pigment-section-heading h3 {
    font-size: 28px; font-weight: 750; letter-spacing: -.05em; margin: 8px 0 10px;
}
.goun-pigment-v20 .goun-pigment-section-heading p { margin: 0; font-size: 15px; color: #80767b; }
.goun-pigment-v20 .goun-pigment-grid {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px; align-items: stretch;
}
.goun-pigment-v20 .goun-pigment-card {
    display: flex; flex-direction: column; min-width: 0;
    overflow: hidden; border: 1px solid #efdee3; border-radius: 19px;
    background: #fff; box-shadow: 0 10px 28px rgba(70,35,48,.045);
    transition: box-shadow .25s ease, transform .25s ease;
}
@media (hover:hover) and (pointer:fine) {
    .goun-pigment-v20 .goun-pigment-card:hover {
        box-shadow: 0 18px 42px rgba(89,50,64,.12); transform: translateY(-4px);
    }
}
.goun-pigment-v20 .goun-pigment-photo {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    overflow: hidden; background: #f5eeed;
}
.goun-pigment-v20 .goun-pigment-photo img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    object-position: center 44%; transition: transform .5s ease;
}
@media (hover:hover) and (pointer:fine) {
    .goun-pigment-v20 .goun-pigment-card:hover .goun-pigment-photo img { transform: scale(1.035); }
}
.goun-pigment-v20 .goun-pigment-card-content {
    display: flex; flex-direction: column; flex: 1; min-width: 0;
    padding: 26px 25px 22px;
}
.goun-pigment-v20 .goun-pigment-index { font-size: 13px; font-weight: 800; letter-spacing: .05em; color: #ba718b; }
.goun-pigment-v20 .goun-pigment-index small { font-size: 12px; font-weight: 500; color: #b0a2a7; }
.goun-pigment-v20 .goun-pigment-card h4 {
    font-size: 23px; line-height: 1.35; margin: 10px 0 10px;
    font-weight: 760; letter-spacing: -.048em; overflow-wrap: break-word;
}
.goun-pigment-v20 .goun-pigment-summary {
    margin: 0 0 22px; color: #6c6367; line-height: 1.7;
    font-size: 15px; min-height: 2.7em;
}
.goun-pigment-v20 .goun-pigment-detail { margin-top: auto; border-top: 1px solid #f0e8ea; }
.goun-pigment-v20 .goun-pigment-detail summary {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding-top: 15px; cursor: pointer; list-style: none;
    color: #a35e77; font-size: 14px; font-weight: 680;
}
.goun-pigment-v20 .goun-pigment-detail summary::-webkit-details-marker { display: none; }
.goun-pigment-v20 .goun-pigment-detail summary:focus-visible { outline: 2px solid #ad6982; outline-offset: 4px; }
.goun-pigment-v20 .goun-pigment-detail summary span { font-size: 21px; line-height: 1; transition: transform .2s; }
.goun-pigment-v20 .goun-pigment-detail[open] summary span { transform: rotate(45deg); }
.goun-pigment-v20 .goun-pigment-detail-inner { padding: 16px 0 4px; }
.goun-pigment-v20 .goun-pigment-detail-inner p { font-size: 14px; line-height: 1.85; color: #675f63; margin: 0 0 14px; }
.goun-pigment-v20 .goun-pigment-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.goun-pigment-v20 .goun-pigment-tags span {
    display: inline-block; padding: 6px 10px; font-size: 12px;
    color: #966d7b; background: #fbf3f5; border-radius: 20px;
}
.goun-pigment-v20 .goun-pigment-notice {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 28px; align-items: center; margin-top: 57px;
    padding: 37px 42px; background: #fbf4f6; border-radius: 20px;
}
.goun-pigment-v20 .goun-pigment-notice-title span {
    font-size: 12px; font-weight: 750; color: #b77388; letter-spacing: .13em;
}
.goun-pigment-v20 .goun-pigment-notice-title h3 {
    margin: 12px 0 0; font-size: 24px; font-weight: 760; line-height: 1.4;
}
.goun-pigment-v20 .goun-pigment-notice-copy p {
    position: relative; padding-left: 17px; margin: 0 0 11px;
    color: #695e63; line-height: 1.85; font-size: 14px;
}
.goun-pigment-v20 .goun-pigment-notice-copy p:last-child { margin-bottom: 0; }
.goun-pigment-v20 .goun-pigment-notice-copy p::before {
    content: ''; position: absolute; left: 0; top: .8em;
    width: 6px; height: 6px; background: #c18b9c; border-radius: 50%;
}
@media (max-width: 1023px) {
    .goun-pigment-v20 .goun-pigment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
    .goun-pigment-v20 .goun-pigment-card-content { padding: 22px; }
    .goun-pigment-v20 .goun-pigment-pillars { margin-bottom: 56px; }
    .goun-pigment-v20 .goun-pigment-notice { padding: 28px; }
}
@media (max-width: 767px) {
    .goun-pigment-v20 { width: auto; max-width: none; margin: 30px 16px 64px; padding: 0; }
    .goun-pigment-v20 .goun-pigment-header { padding: 14px 2px 8px; }
    .goun-pigment-v20 .goun-pigment-header h2 { font-size: 30px; }
    .goun-pigment-v20 .goun-pigment-header p { font-size: 14px; line-height: 1.75; }
    .goun-pigment-v20 .goun-pigment-desktop-break { display: none; }
    .goun-pigment-v20 .goun-pigment-pillars { gap: 0; padding: 11px 8px; margin: 24px 0 48px; }
    .goun-pigment-v20 .goun-pigment-pillars > div { flex-direction: column; gap: 5px; text-align: center; padding: 5px 2px; }
    .goun-pigment-v20 .goun-pigment-pillars strong { font-size: 13px; }
    .goun-pigment-v20 .goun-pigment-pillars span { font-size: 12px; }
    .goun-pigment-v20 .goun-pigment-section-heading h3 { font-size: 24px; }
    .goun-pigment-v20 .goun-pigment-section-heading p { font-size: 13px; }
    .goun-pigment-v20 .goun-pigment-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .goun-pigment-v20 .goun-pigment-card { display: grid; grid-template-columns: 36% minmax(0,1fr); border-radius: 15px; }
    .goun-pigment-v20 .goun-pigment-photo { aspect-ratio: auto; height: 100%; min-height: 178px; }
    .goun-pigment-v20 .goun-pigment-card-content { padding: 19px 16px 17px; }
    .goun-pigment-v20 .goun-pigment-card h4 { font-size: 19px; margin: 7px 0; }
    .goun-pigment-v20 .goun-pigment-summary { font-size: 13px; line-height: 1.65; min-height: 0; margin-bottom: 14px; }
    .goun-pigment-v20 .goun-pigment-detail summary { padding-top: 12px; font-size: 12px; }
    .goun-pigment-v20 .goun-pigment-detail-inner p { font-size: 13px; }
    .goun-pigment-v20 .goun-pigment-notice { grid-template-columns: minmax(0,1fr); gap: 17px; margin-top: 39px; padding: 25px 21px; }
    .goun-pigment-v20 .goun-pigment-notice-title h3 { font-size: 22px; }
}
@media (max-width: 359px) {
    .goun-pigment-v20 { margin-left: 12px; margin-right: 12px; }
    .goun-pigment-v20 .goun-pigment-card { grid-template-columns: 34% minmax(0,1fr); }
    .goun-pigment-v20 .goun-pigment-card-content { padding: 16px 12px; }
    .goun-pigment-v20 .goun-pigment-card h4 { font-size: 17px; }
    .goun-pigment-v20 .goun-pigment-summary { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .goun-pigment-v20 .goun-pigment-card,
    .goun-pigment-v20 .goun-pigment-photo img { transition: none; }
}