@charset "utf-8";

/* 시술전후 · 글쓰기 사진 영역 전용 */
body.syou-theme-board-page #bo_w.syou-board-write .syou-board-write__file-label {
    display: block;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: var(--syou-text, #222);
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__subject-field {
    margin-bottom: 14px;
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__date-field {
    min-width: 0;
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__date-input {
    width: 100%;
    box-sizing: border-box;
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__photos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__photo-box {
    margin: 0;
    padding: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__photo-box .syou-board-write__file-label {
    margin-bottom: 10px;
    font-size: 15px;
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__photo-field {
    position: static;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed #d5d5d5;
    border-radius: 6px;
    background: #fff;
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__photo-field .frm_file {
    width: 100%;
    margin: 0;
    padding: 0;
    padding-left: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--syou-muted, #666);
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__photo-field .frm_file::file-selector-button {
    margin-right: 10px;
    padding: 7px 12px;
    border: 1px solid var(--syou-primary, #c49a6b);
    border-radius: 4px;
    background: var(--syou-primary-light, #faf6f1);
    font-size: 13px;
    font-weight: 500;
    color: var(--syou-primary, #c49a6b);
    cursor: pointer;
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__photo-box .file_del {
    position: static;
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--syou-muted, #666);
}

body.syou-theme-board-page #bo_w.syou-board-write .syou-before-after__photo-box .file_del label {
    color: var(--syou-muted, #666);
    font-weight: 400;
}

/* 진료항목 필터 — 시술 후 주의사항(.syou-caution__cat)과 동일 카드 버튼 */
body.syou-before-after-page .syou-before-after__cats,
body.syou-sub-page.syou-before-after-page .syou-before-after__cats,
body.syou-theme-board-page.syou-board-before_after-page .syou-before-after__cats {
    margin: 0 0 20px;
}

body.syou-before-after-page .syou-before-after__cats-list,
body.syou-sub-page.syou-before-after-page .syou-before-after__cats-list,
body.syou-theme-board-page.syou-board-before_after-page .syou-before-after__cats-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
}

body.syou-before-after-page .syou-before-after__cats-item,
body.syou-sub-page.syou-before-after-page .syou-before-after__cats-item,
body.syou-theme-board-page.syou-board-before_after-page .syou-before-after__cats-item {
    display: flex;
    margin: 0;
    min-width: 0;
    height: 100%;
}

/* common.css button { border-color: transparent } 보다 우선 */
body.syou-before-after-page button.syou-before-after__cat,
body.syou-sub-page.syou-before-after-page button.syou-before-after__cat,
body.syou-theme-board-page.syou-board-before_after-page button.syou-before-after__cat,
body.syou-before-after-page a.syou-before-after__cat,
body.syou-sub-page.syou-before-after-page a.syou-before-after__cat,
body.syou-theme-board-page.syou-board-before_after-page a.syou-before-after__cat,
body.syou-before-after-page .syou-before-after__cat,
body.syou-sub-page.syou-before-after-page .syou-before-after__cat,
body.syou-theme-board-page.syou-board-before_after-page .syou-before-after__cat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 52px;
    margin: 0;
    padding: 10px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    font-size: var(--syou-frame-meta, 1.4rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #444;
    text-align: center;
    text-decoration: none;
    word-break: keep-all;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body.syou-before-after-page button.syou-before-after__cat:hover,
body.syou-sub-page.syou-before-after-page button.syou-before-after__cat:hover,
body.syou-theme-board-page.syou-board-before_after-page button.syou-before-after__cat:hover,
body.syou-before-after-page a.syou-before-after__cat:hover,
body.syou-sub-page.syou-before-after-page a.syou-before-after__cat:hover,
body.syou-theme-board-page.syou-board-before_after-page a.syou-before-after__cat:hover,
body.syou-before-after-page .syou-before-after__cat:hover,
body.syou-sub-page.syou-before-after-page .syou-before-after__cat:hover,
body.syou-theme-board-page.syou-board-before_after-page .syou-before-after__cat:hover {
    border-color: var(--syou-primary, #c49a6b);
    color: var(--syou-primary, #c49a6b);
}

body.syou-before-after-page button.syou-before-after__cat.is-active,
body.syou-sub-page.syou-before-after-page button.syou-before-after__cat.is-active,
body.syou-theme-board-page.syou-board-before_after-page button.syou-before-after__cat.is-active,
body.syou-before-after-page a.syou-before-after__cat.is-active,
body.syou-sub-page.syou-before-after-page a.syou-before-after__cat.is-active,
body.syou-theme-board-page.syou-board-before_after-page a.syou-before-after__cat.is-active,
body.syou-before-after-page .syou-before-after__cat.is-active,
body.syou-sub-page.syou-before-after-page .syou-before-after__cat.is-active,
body.syou-theme-board-page.syou-board-before_after-page .syou-before-after__cat.is-active {
    border-color: var(--syou-primary, #c49a6b);
    background: rgba(196, 154, 107, 0.08);
    color: var(--syou-primary, #c49a6b);
    font-weight: 600;
}

@media (max-width: 740px) {
    body.syou-layout:not(.syou-proportional-scale).syou-before-after-page button.syou-before-after__cat,
    body.syou-layout:not(.syou-proportional-scale).syou-before-after-page .syou-before-after__cat {
        min-height: 56px;
    }
}

.syou-before-after__item[hidden] {
    display: none !important;
}

.syou-before-after__item.has-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.syou-before-after__item.has-checkbox .syou-board-list__chk {
    flex-shrink: 0;
    margin-top: 14px;
}

.syou-before-after__item.has-checkbox .syou-before-after__card,
.syou-before-after__item.has-checkbox > a.syou-before-after__card,
.syou-before-after__item.has-checkbox > div.syou-before-after__card {
    flex: 1;
    min-width: 0;
}

.syou-before-after__filter-empty {
    margin: 0 0 12px;
    padding: 16px;
    font-size: 14px;
    color: #888;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;
}

.syou-before-after__paging {
    margin: 24px 0 48px;
    padding-bottom: 4px;
    width: 100%;
    text-align: center;
    clear: both;
}

.syou-before-after__paging .pg_wrap,
.syou-before-after__paging .syou-before-after__pg {
    display: flex;
    justify-content: center;
    align-items: center;
    float: none !important;
    width: 100%;
    margin: 0 auto;
    clear: both;
}

.syou-before-after__paging .pg {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    float: none !important;
}

.syou-before-after__paging .pg_start,
.syou-before-after__paging .pg_prev,
.syou-before-after__paging .pg_next,
.syou-before-after__paging .pg_end {
    display: none !important;
}

.syou-before-after__paging .pg_page,
.syou-before-after__paging .pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #666;
    text-decoration: none;
    box-sizing: border-box;
    text-indent: 0;
    overflow: visible;
}

.syou-before-after__paging .pg_page:hover,
.syou-before-after__paging .pg_page:focus {
    border-color: var(--syou-primary, #c49a6b);
    color: var(--syou-primary, #c49a6b);
}

.syou-before-after__paging .pg_current {
    border-color: var(--syou-primary, #c49a6b);
    background: var(--syou-primary, #c49a6b);
    color: #fff;
    font-weight: 600;
}

.syou-before-after__badge {
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(196, 154, 107, 0.12);
    font-size: 12px;
    font-weight: 600;
    color: var(--syou-primary, #c49a6b);
}

.syou-before-after__badge--view {
    display: block;
    width: fit-content;
    margin-bottom: 10px;
}

.syou-before-after__guest-notice {
    margin: 0 0 12px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    background: #f7f7f7;
    border-radius: 8px;
}

.syou-before-after__guest-notice a {
    color: #222;
    font-weight: 600;
    text-decoration: underline;
}

/* 시술전후 — 목록/카드 */
#before-after-page.syou-board-list,
#before-after-page.syou-before-after {
    margin-bottom: 8px;
}

.syou-before-after__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.syou-before-after__item + .syou-before-after__item {
    margin-top: 18px;
}

.syou-before-after__card {
    display: block;
    padding: 14px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    overflow: hidden;
}

a.syou-before-after__card {
    -webkit-tap-highlight-color: transparent;
}

.syou-before-after__media {
    margin: 0 0 12px;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.syou-before-after__cap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #f3f3f3;
    border-bottom: 1px solid #e0e0e0;
}

.syou-before-after__cap-col {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 12px;
    box-sizing: border-box;
}

.syou-before-after__cap-col--after {
    border-left: 1px solid #ddd;
}

.syou-before-after__cap-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #333;
}

.syou-before-after__cap-date {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    color: #888;
}

.syou-before-after__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: #222;
}

.syou-before-after__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.syou-before-after__pair--flush {
    gap: 0;
}

.syou-before-after__slot {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.syou-before-after__slot--before .syou-before-after__img-wrap {
    border-right: 1px solid #ececec;
}

.syou-before-after__img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

.syou-before-after__img-wrap img.syou-before-after__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    object-position: center center;
}

.syou-before-after__img-wrap .syou-before-after__lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.syou-before-after__no-image {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(135deg, #eee 0%, #ddd 100%);
}

/* 전역 img 규칙(common.css, pc-frame-fix) 덮어쓰기 */
body.syou-layout .syou-before-after__media .syou-before-after__img-wrap,
body.syou-layout .syou-board-view--before-after .syou-before-after__media .syou-before-after__img-wrap {
    aspect-ratio: 4 / 5 !important;
}

body.syou-layout .syou-before-after__media .syou-before-after__img-wrap > img.syou-before-after__img,
body.syou-layout.is-pc-shell .mobile-frame__inner .syou-before-after__media .syou-before-after__img-wrap > img.syou-before-after__img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.syou-before-after__empty {
    padding: 24px 16px;
    font-size: 14px;
    color: #888;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;
}

.syou-before-after__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.syou-before-after__footer .syou-board-list__write {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    height: auto;
    padding: 6px 12px;
    border: 1px solid var(--syou-primary, #c49a6b);
    border-radius: 4px;
    background: var(--syou-primary, #c49a6b);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.syou-before-after__footer .syou-board-list__write:hover,
.syou-before-after__footer .syou-board-list__write:focus {
    border-color: var(--syou-primary-dark, #a87f52);
    background: var(--syou-primary-dark, #a87f52);
    color: #fff;
}

.syou-before-after__more {
    font-size: 13px;
    color: #666;
    text-decoration: none;
}

/* 비회원 모자이크 */
.syou-before-after.is-guest-locked .syou-before-after__img-wrap.is-locked img.syou-before-after__img,
.syou-board-view--before-after.is-guest-locked .syou-before-after__img-wrap.is-locked img.syou-before-after__img {
    filter: blur(14px) saturate(0.7);
}

.syou-before-after.is-guest-locked .syou-before-after__img-wrap.is-locked::after,
.syou-board-view--before-after.is-guest-locked .syou-before-after__img-wrap.is-locked::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.12) 0,
            rgba(255, 255, 255, 0.12) 2px,
            rgba(0, 0, 0, 0.08) 2px,
            rgba(0, 0, 0, 0.08) 4px
        );
    pointer-events: none;
}

.syou-before-after__lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.syou-before-after__lock-text {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: #444;
    text-align: center;
}

/* 시술전후 — 상세 */
.syou-board-view--before-after .syou-before-after__media {
    margin-top: 12px;
}

.syou-board-view--before-after .syou-before-after__guest-notice {
    margin: 0 0 12px;
}

.syou-board-view--before-after #bo_v_con.is-locked {
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
}