@charset "utf-8";

/* =========================
   포트폴리오 게시판 스킨
========================= */

/* =========================
   스킨 독립화 — custom.css 없이도 작동
   외부 의존 변수 자체 정의
========================= */
:root {
    --background-color: #ffffff;
    --background-color-gray: #dadada;
    --base-color-black: #000000;
    --base-color-white: #fff;
    --base-color-darkblack: #1a1a1a;
    --base-color-sub-black: #555;
    --base-color-lightGrey: #f5f5f5;
    --base-color-lightGrey2: #e0e0e0;
    --color-accent-blue: #3a8afd;
    --color-accent-blue-bright: #1471f6;
    --color-accent-red: #c43a31;
    --color-black-rgb: 0, 0, 0;
    --color-white-rgb: 255, 255, 255;
    --color-gray-50: #f7f7f8;
    --color-gray-100: #f4f4f4;
    --color-gray-150: #ececec;
    --color-gray-200: #eeeeee;
    --color-gray-230: #d0d4df;
    --color-gray-270: #b8bfc4;
    --color-gray-280: #b5b8bb;
    --color-gray-300: #C0C0C0;
    --color-gray-380: #777;
    --color-gray-400: #919191;
    --color-gray-420: #6b757c;
    --color-gray-430: #676e70;
    --color-gray-440: #656565;
    --color-gray-500: #666666;
    --color-gray-600: #555555;
    --color-gray-700: #464646;
    --color-gray-950: #21272e;
    --color-hex-d0d0d0: #d0d0d0;
    --color-hex-e0ddd9: #e0ddd9;
    --color-hex-e5e5e5: #e5e5e5;
    --color-hex-f5f5f3: #f5f5f3;
    --color-ui-dde7e9: #dde7e9;
    --color-ui-f1f1f1: #f1f1f1;
    --color-ui-input-bg: #d0d3db;
    --color-ui-line: #e8e8e8;
    --font-KR-base: "europa", sans-serif;
    --header-height-min: 5.5rem;
    --header-height-pref: 6.7708vw;
    --header-height-max: 8.125rem;
    --header-height: clamp(var(--header-height-min), var(--header-height-pref), var(--header-height-max));
    --padding-pc-min: 2.5rem;
    --padding-pc-pref: 3.26vw;
    --padding-pc-max: 3.125rem;
    --padding-pc: clamp(var(--padding-pc-min), var(--padding-pc-pref), var(--padding-pc-max));
    --signature-color: #181d60;
    --sidebar-width-min: 14rem;
    --sidebar-width-pref: 18vw;
    --sidebar-width-max: 20rem;
    --sidebar-width: clamp(var(--sidebar-width-min), var(--sidebar-width-pref), var(--sidebar-width-max));
    --svh-100: 100svh;
    --text-color: #000;
    --text-font-size-min: 0.9375rem;
    --text-font-size-pref: 0.8333vw;
    --text-font-size-max: 1.0625rem;
    --text-font-size: clamp(var(--text-font-size-min), var(--text-font-size-pref), var(--text-font-size-max));
    --text-font-size-line-min: 1.4375rem;
    --text-font-size-line-pref: 1.2500vw;
    --text-font-size-line-max: 1.5625rem;
    --text-font-size-line: clamp(var(--text-font-size-line-min), var(--text-font-size-line-pref), var(--text-font-size-line-max));

    /* hardcode 변환 신규 토큰 (자동 추가) */
    --space-2-min: 0.0625rem;
    --space-2-pref: 0.13vw;
    --space-2-max: 0.125rem;
    --space-2: clamp(var(--space-2-min), var(--space-2-pref), var(--space-2-max));
    --space-3-min: 0.125rem;
    --space-3-pref: 0.2vw;
    --space-3-max: 0.1875rem;
    --space-3: clamp(var(--space-3-min), var(--space-3-pref), var(--space-3-max));
    --space-4-min: 0.1875rem;
    --space-4-pref: 0.26vw;
    --space-4-max: 0.25rem;
    --space-4: clamp(var(--space-4-min), var(--space-4-pref), var(--space-4-max));
    --space-5-min: 0.25rem;
    --space-5-pref: 0.33vw;
    --space-5-max: 0.3125rem;
    --space-5: clamp(var(--space-5-min), var(--space-5-pref), var(--space-5-max));
    --space-6-min: 0.3125rem;
    --space-6-pref: 0.39vw;
    --space-6-max: 0.375rem;
    --space-6: clamp(var(--space-6-min), var(--space-6-pref), var(--space-6-max));
    --space-7-min: 0.3125rem;
    --space-7-pref: 0.46vw;
    --space-7-max: 0.4375rem;
    --space-7: clamp(var(--space-7-min), var(--space-7-pref), var(--space-7-max));
    --space-8-min: 0.375rem;
    --space-8-pref: 0.52vw;
    --space-8-max: 0.5rem;
    --space-8: clamp(var(--space-8-min), var(--space-8-pref), var(--space-8-max));
    --space-10-min: 0.5rem;
    --space-10-pref: 0.65vw;
    --space-10-max: 0.625rem;
    --space-10: clamp(var(--space-10-min), var(--space-10-pref), var(--space-10-max));
    --space-11-min: 0.875rem;
    --space-11-pref: 0.72vw;
    --space-11-max: 0.875rem;
    --space-11: clamp(var(--space-11-min), var(--space-11-pref), var(--space-11-max));
    --space-12-min: 0.875rem;
    --space-12-pref: 0.78vw;
    --space-12-max: 0.875rem;
    --space-12: clamp(var(--space-12-min), var(--space-12-pref), var(--space-12-max));
    --space-13-min: 0.875rem;
    --space-13-pref: 0.85vw;
    --space-13-max: 0.875rem;
    --space-13: clamp(var(--space-13-min), var(--space-13-pref), var(--space-13-max));
    --space-14-min: 0.875rem;
    --space-14-pref: 0.91vw;
    --space-14-max: 0.875rem;
    --space-14: clamp(var(--space-14-min), var(--space-14-pref), var(--space-14-max));
    --space-15-min: 0.75rem;
    --space-15-pref: 0.98vw;
    --space-15-max: 0.9375rem;
    --space-15: clamp(var(--space-15-min), var(--space-15-pref), var(--space-15-max));
    --space-16-min: 0.8125rem;
    --space-16-pref: 1.04vw;
    --space-16-max: 1rem;
    --space-16: clamp(var(--space-16-min), var(--space-16-pref), var(--space-16-max));
    --space-18-min: 0.875rem;
    --space-18-pref: 1.17vw;
    --space-18-max: 1.125rem;
    --space-18: clamp(var(--space-18-min), var(--space-18-pref), var(--space-18-max));
    --space-20-min: 1rem;
    --space-20-pref: 1.3vw;
    --space-20-max: 1.25rem;
    --space-20: clamp(var(--space-20-min), var(--space-20-pref), var(--space-20-max));
    --space-22-min: 1.125rem;
    --space-22-pref: 1.43vw;
    --space-22-max: 1.375rem;
    --space-22: clamp(var(--space-22-min), var(--space-22-pref), var(--space-22-max));
    --space-24-min: 1.125rem;
    --space-24-pref: 1.56vw;
    --space-24-max: 1.5rem;
    --space-24: clamp(var(--space-24-min), var(--space-24-pref), var(--space-24-max));
    --space-25-min: 1.25rem;
    --space-25-pref: 1.63vw;
    --space-25-max: 1.5625rem;
    --space-25: clamp(var(--space-25-min), var(--space-25-pref), var(--space-25-max));
    --space-26-min: 1.3125rem;
    --space-26-pref: 1.69vw;
    --space-26-max: 1.625rem;
    --space-26: clamp(var(--space-26-min), var(--space-26-pref), var(--space-26-max));
    --space-30-min: 1.5rem;
    --space-30-pref: 1.95vw;
    --space-30-max: 1.875rem;
    --space-30: clamp(var(--space-30-min), var(--space-30-pref), var(--space-30-max));
    --space-32-min: 1.625rem;
    --space-32-pref: 2.08vw;
    --space-32-max: 2rem;
    --space-32: clamp(var(--space-32-min), var(--space-32-pref), var(--space-32-max));
    --space-36-min: 1.8125rem;
    --space-36-pref: 2.34vw;
    --space-36-max: 2.25rem;
    --space-36: clamp(var(--space-36-min), var(--space-36-pref), var(--space-36-max));
    --space-38-min: 1.875rem;
    --space-38-pref: 2.47vw;
    --space-38-max: 2.375rem;
    --space-38: clamp(var(--space-38-min), var(--space-38-pref), var(--space-38-max));
    --space-40-min: 2rem;
    --space-40-pref: 2.6vw;
    --space-40-max: 2.5rem;
    --space-40: clamp(var(--space-40-min), var(--space-40-pref), var(--space-40-max));
    --space-45-min: 2.25rem;
    --space-45-pref: 2.93vw;
    --space-45-max: 2.8125rem;
    --space-45: clamp(var(--space-45-min), var(--space-45-pref), var(--space-45-max));
    --space-48-min: 2.5rem;
    --space-48-pref: 3.13vw;
    --space-48-max: 3rem;
    --space-48: clamp(var(--space-48-min), var(--space-48-pref), var(--space-48-max));
    --space-50-min: 2.5rem;
    --space-50-pref: 3.26vw;
    --space-50-max: 3.125rem;
    --space-50: clamp(var(--space-50-min), var(--space-50-pref), var(--space-50-max));
    --space-60-min: 3rem;
    --space-60-pref: 3.91vw;
    --space-60-max: 3.75rem;
    --space-60: clamp(var(--space-60-min), var(--space-60-pref), var(--space-60-max));
    --space-65-min: 3.25rem;
    --space-65-pref: 4.23vw;
    --space-65-max: 4.0625rem;
    --space-65: clamp(var(--space-65-min), var(--space-65-pref), var(--space-65-max));
    --space-70-min: 3.5rem;
    --space-70-pref: 4.56vw;
    --space-70-max: 4.375rem;
    --space-70: clamp(var(--space-70-min), var(--space-70-pref), var(--space-70-max));
    --space-75-min: 3.75rem;
    --space-75-pref: 4.88vw;
    --space-75-max: 4.6875rem;
    --space-75: clamp(var(--space-75-min), var(--space-75-pref), var(--space-75-max));
    --space-80-min: 4rem;
    --space-80-pref: 5.21vw;
    --space-80-max: 5rem;
    --space-80: clamp(var(--space-80-min), var(--space-80-pref), var(--space-80-max));
    --space-88-min: 4.375rem;
    --space-88-pref: 5.73vw;
    --space-88-max: 5.5rem;
    --space-88: clamp(var(--space-88-min), var(--space-88-pref), var(--space-88-max));
    --space-90-min: 4.5rem;
    --space-90-pref: 5.86vw;
    --space-90-max: 5.625rem;
    --space-90: clamp(var(--space-90-min), var(--space-90-pref), var(--space-90-max));
    --space-100-min: 5rem;
    --space-100-pref: 6.51vw;
    --space-100-max: 6.25rem;
    --space-100: clamp(var(--space-100-min), var(--space-100-pref), var(--space-100-max));
    --space-120-min: 6rem;
    --space-120-pref: 7.81vw;
    --space-120-max: 7.5rem;
    --space-120: clamp(var(--space-120-min), var(--space-120-pref), var(--space-120-max));
    --space-280-min: 14rem;
    --space-280-pref: 18.23vw;
    --space-280-max: 17.5rem;
    --space-280: clamp(var(--space-280-min), var(--space-280-pref), var(--space-280-max));
    --space-300-min: 15rem;
    --space-300-pref: 19.53vw;
    --space-300-max: 18.75rem;
    --space-300: clamp(var(--space-300-min), var(--space-300-pref), var(--space-300-max));
    --space-400-min: 20rem;
    --space-400-pref: 26.04vw;
    --space-400-max: 25rem;
    --space-400: clamp(var(--space-400-min), var(--space-400-pref), var(--space-400-max));
    --transition-fast: 0.3s ease;
    --transition-base: 0.4s ease;
    --transition-medium: 0.5s ease;
    --color-hex-000: #000;

    /* hardcode 변환 신규 토큰 (자동 추가) */
    --space-half: 0.0313rem;
    --space-5-alt-min: 0.25rem;
    --space-5-alt-pref: 0.3vw;
    --space-5-alt-max: 0.3rem;
    --space-5-alt: clamp(var(--space-5-alt-min), var(--space-5-alt-pref), var(--space-5-alt-max));
    --space-7-alt-min: 0.3125rem;
    --space-7-alt-pref: 0.4vw;
    --space-7-alt-max: 0.4rem;
    --space-7-alt: clamp(var(--space-7-alt-min), var(--space-7-alt-pref), var(--space-7-alt-max));
    --space-180-min: 9rem;
    --space-180-pref: 11.72vw;
    --space-180-max: 11.25rem;
    --space-180: clamp(var(--space-180-min), var(--space-180-pref), var(--space-180-max));
    --space-250-min: 12.5rem;
    --space-250-pref: 16.28vw;
    --space-250-max: 15.625rem;
    --space-250: clamp(var(--space-250-min), var(--space-250-pref), var(--space-250-max));
    --space-260-min: 13rem;
    --space-260-pref: 16.93vw;
    --space-260-max: 16.25rem;
    --space-260: clamp(var(--space-260-min), var(--space-260-pref), var(--space-260-max));
    --space-330-min: 16.5rem;
    --space-330-pref: 21.48vw;
    --space-330-max: 20.625rem;
    --space-330: clamp(var(--space-330-min), var(--space-330-pref), var(--space-330-max));
    --space-340-min: 17rem;
    --space-340-pref: 22.14vw;
    --space-340-max: 21.25rem;
    --space-340: clamp(var(--space-340-min), var(--space-340-pref), var(--space-340-max));
    --transition-quick: 0.15s ease;
    --transition-snappy: 0.2s ease;
    --transition-swift: 0.25s ease;
    --anim-spin-slow: 4s linear infinite;
    --anim-spin-fast: 0.7s linear infinite;

    /* hardcode 변환 신규 토큰 (자동 추가) */
    --px-2: 2px;
    --px-3: 3px;
    --px-4: 4px;
    --px-6: 6px;
    --px-8: 8px;
    --px-10: 10px;
    --px-20: 20px;
    --px-25: 25px;
    --px-30: 30px;

    /* hardcode 변환 신규 토큰 (자동 추가) */
    --px-12: 12px;
    --px-18: 18px;

    /* 누락 토큰 추가 */
    --card-padding-min: 1.875rem;
    --card-padding-pref: 2.5vw;
    --card-padding-max: 3.125rem;
    --card-padding: clamp(var(--card-padding-min), var(--card-padding-pref), var(--card-padding-max));
    --card-padding-lg-min: 2.5rem;
    --card-padding-lg-pref: 4vw;
    --card-padding-lg-max: 4.375rem;
    --card-padding-lg: clamp(var(--card-padding-lg-min), var(--card-padding-lg-pref), var(--card-padding-lg-max));
    --spacing-section-xl-min: 5rem;
    --spacing-section-xl-pref: 8vw;
    --spacing-section-xl-max: 8.75rem;
    --spacing-section-xl: clamp(var(--spacing-section-xl-min), var(--spacing-section-xl-pref), var(--spacing-section-xl-max));

    /* 사용처 clamp 토큰화 (자동 추가) */
    --cv-portfolio-1-min: 1.75rem;
    --cv-portfolio-1-pref: 2.5vw;
    --cv-portfolio-1-max: 2.5rem;
    --cv-portfolio-1: clamp(var(--cv-portfolio-1-min), var(--cv-portfolio-1-pref), var(--cv-portfolio-1-max));
    --cv-portfolio-2-min: 2rem;
    --cv-portfolio-2-pref: 3vw;
    --cv-portfolio-2-max: 3rem;
    --cv-portfolio-2: clamp(var(--cv-portfolio-2-min), var(--cv-portfolio-2-pref), var(--cv-portfolio-2-max));
    --cv-portfolio-3-min: 0.875rem;
    --cv-portfolio-3-pref: 0.9vw;
    --cv-portfolio-3-max: 0.875rem;
    --cv-portfolio-3: clamp(var(--cv-portfolio-3-min), var(--cv-portfolio-3-pref), var(--cv-portfolio-3-max));
    --cv-portfolio-4-min: 1.25rem;
    --cv-portfolio-4-pref: 1.75vw;
    --cv-portfolio-4-max: 1.75rem;
    --cv-portfolio-4: clamp(var(--cv-portfolio-4-min), var(--cv-portfolio-4-pref), var(--cv-portfolio-4-max));
    --cv-portfolio-5-min: 1rem;
    --cv-portfolio-5-pref: 1.5vw;
    --cv-portfolio-5-max: 1.5rem;
    --cv-portfolio-5: clamp(var(--cv-portfolio-5-min), var(--cv-portfolio-5-pref), var(--cv-portfolio-5-max));
    --cv-portfolio-6-min: 1.25rem;
    --cv-portfolio-6-pref: 2vw;
    --cv-portfolio-6-max: 2.1875rem;
    --cv-portfolio-6: clamp(var(--cv-portfolio-6-min), var(--cv-portfolio-6-pref), var(--cv-portfolio-6-max));
    --cv-portfolio-7-min: 0.875rem;
    --cv-portfolio-7-pref: 0.85vw;
    --cv-portfolio-7-max: 0.9375rem;
    --cv-portfolio-7: clamp(var(--cv-portfolio-7-min), var(--cv-portfolio-7-pref), var(--cv-portfolio-7-max));
    --cv-portfolio-8-min: 0.75rem;
    --cv-portfolio-8-pref: 1vw;
    --cv-portfolio-8-max: 1rem;
    --cv-portfolio-8: clamp(var(--cv-portfolio-8-min), var(--cv-portfolio-8-pref), var(--cv-portfolio-8-max));
    --cv-portfolio-9-min: 1.875rem;
    --cv-portfolio-9-pref: 3vw;
    --cv-portfolio-9-max: 3.125rem;
    --cv-portfolio-9: clamp(var(--cv-portfolio-9-min), var(--cv-portfolio-9-pref), var(--cv-portfolio-9-max));
    --cv-portfolio-10-min: 0.875rem;
    --cv-portfolio-10-pref: 0.75vw;
    --cv-portfolio-10-max: 0.875rem;
    --cv-portfolio-10: clamp(var(--cv-portfolio-10-min), var(--cv-portfolio-10-pref), var(--cv-portfolio-10-max));
    --cv-portfolio-11-min: 0.9375rem;
    --cv-portfolio-11-pref: 1.5vw;
    --cv-portfolio-11-max: 1.375rem;
    --cv-portfolio-11: clamp(var(--cv-portfolio-11-min), var(--cv-portfolio-11-pref), var(--cv-portfolio-11-max));
    --cv-portfolio-12-min: 0.75rem;
    --cv-portfolio-12-pref: 1vw;
    --cv-portfolio-12-max: 1.25rem;
    --cv-portfolio-12: clamp(var(--cv-portfolio-12-min), var(--cv-portfolio-12-pref), var(--cv-portfolio-12-max));
    --cv-portfolio-13-min: 0.875rem;
    --cv-portfolio-13-pref: 0.7vw;
    --cv-portfolio-13-max: 0.875rem;
    --cv-portfolio-13: clamp(var(--cv-portfolio-13-min), var(--cv-portfolio-13-pref), var(--cv-portfolio-13-max));
    --cv-portfolio-14-min: 0.875rem;
    --cv-portfolio-14-pref: 0.78vw;
    --cv-portfolio-14-max: 0.9375rem;
    --cv-portfolio-14: clamp(var(--cv-portfolio-14-min), var(--cv-portfolio-14-pref), var(--cv-portfolio-14-max));
    --cv-portfolio-15-min: 0.75rem;
    --cv-portfolio-15-pref: 1.2vw;
    --cv-portfolio-15-max: 1.25rem;
    --cv-portfolio-15: clamp(var(--cv-portfolio-15-min), var(--cv-portfolio-15-pref), var(--cv-portfolio-15-max));
    --cv-portfolio-16-min: 0.5rem;
    --cv-portfolio-16-pref: 0.8vw;
    --cv-portfolio-16-max: 0.75rem;
    --cv-portfolio-16: clamp(var(--cv-portfolio-16-min), var(--cv-portfolio-16-pref), var(--cv-portfolio-16-max));
    --cv-portfolio-17-min: 12rem;
    --cv-portfolio-17-pref: 22vw;
    --cv-portfolio-17-max: 22rem;
    --cv-portfolio-17: clamp(var(--cv-portfolio-17-min), var(--cv-portfolio-17-pref), var(--cv-portfolio-17-max));
    --cv-portfolio-18-min: 0.625rem;
    --cv-portfolio-18-pref: 1vw;
    --cv-portfolio-18-max: 0.875rem;
    --cv-portfolio-18: clamp(var(--cv-portfolio-18-min), var(--cv-portfolio-18-pref), var(--cv-portfolio-18-max));
    --cv-portfolio-19-min: 1.5rem;
    --cv-portfolio-19-pref: 2vw;
    --cv-portfolio-19-max: 2rem;
    --cv-portfolio-19: clamp(var(--cv-portfolio-19-min), var(--cv-portfolio-19-pref), var(--cv-portfolio-19-max));
    --cv-portfolio-20-min: 0.25rem;
    --cv-portfolio-20-pref: 0.5vw;
    --cv-portfolio-20-max: 0.5rem;
    --cv-portfolio-20: clamp(var(--cv-portfolio-20-min), var(--cv-portfolio-20-pref), var(--cv-portfolio-20-max));
    --cv-portfolio-21-min: 1.25rem;
    --cv-portfolio-21-pref: 2vw;
    --cv-portfolio-21-max: 2rem;
    --cv-portfolio-21: clamp(var(--cv-portfolio-21-min), var(--cv-portfolio-21-pref), var(--cv-portfolio-21-max));
    --cv-portfolio-22-min: 1.25rem;
    --cv-portfolio-22-pref: 2vw;
    --cv-portfolio-22-max: 2.5rem;
    --cv-portfolio-22: clamp(var(--cv-portfolio-22-min), var(--cv-portfolio-22-pref), var(--cv-portfolio-22-max));
    --cv-portfolio-23-min: 2.5rem;
    --cv-portfolio-23-pref: 4vw;
    --cv-portfolio-23-max: 5rem;
    --cv-portfolio-23: clamp(var(--cv-portfolio-23-min), var(--cv-portfolio-23-pref), var(--cv-portfolio-23-max));
    --cv-portfolio-24-min: 7rem;
    --cv-portfolio-24-pref: 10vw;
    --cv-portfolio-24-max: 12rem;
    --cv-portfolio-24: clamp(var(--cv-portfolio-24-min), var(--cv-portfolio-24-pref), var(--cv-portfolio-24-max));
    --cv-portfolio-25-min: 3rem;
    --cv-portfolio-25-pref: 5vw;
    --cv-portfolio-25-max: 5rem;
    --cv-portfolio-25: clamp(var(--cv-portfolio-25-min), var(--cv-portfolio-25-pref), var(--cv-portfolio-25-max));
    --cv-portfolio-26-min: 1.125rem;
    --cv-portfolio-26-pref: 1.5vw;
    --cv-portfolio-26-max: 1.5rem;
    --cv-portfolio-26: clamp(var(--cv-portfolio-26-min), var(--cv-portfolio-26-pref), var(--cv-portfolio-26-max));
    --cv-portfolio-27-min: 0.875rem;
    --cv-portfolio-27-pref: 1vw;
    --cv-portfolio-27-max: 1rem;
    --cv-portfolio-27: clamp(var(--cv-portfolio-27-min), var(--cv-portfolio-27-pref), var(--cv-portfolio-27-max));
    --cv-portfolio-28-min: 0.875rem;
    --cv-portfolio-28-pref: 0.8vw;
    --cv-portfolio-28-max: 0.8125rem;
    --cv-portfolio-28: clamp(var(--cv-portfolio-28-min), var(--cv-portfolio-28-pref), var(--cv-portfolio-28-max));
    --cv-portfolio-29-min: 1.75rem;
    --cv-portfolio-29-pref: 3vw;
    --cv-portfolio-29-max: 3rem;
    --cv-portfolio-29: clamp(var(--cv-portfolio-29-min), var(--cv-portfolio-29-pref), var(--cv-portfolio-29-max));
    --cv-portfolio-30-min: 6rem;
    --cv-portfolio-30-pref: 10vw;
    --cv-portfolio-30-max: 10rem;
    --cv-portfolio-30: clamp(var(--cv-portfolio-30-min), var(--cv-portfolio-30-pref), var(--cv-portfolio-30-max));
    --cv-portfolio-31-min: 0.75rem;
    --cv-portfolio-31-pref: 2vw;
    --cv-portfolio-31-max: 1rem;
    --cv-portfolio-31: clamp(var(--cv-portfolio-31-min), var(--cv-portfolio-31-pref), var(--cv-portfolio-31-max));
    --cv-portfolio-32-min: 2.5rem;
    --cv-portfolio-32-pref: 5vw;
    --cv-portfolio-32-max: 3.75rem;
    --cv-portfolio-32: clamp(var(--cv-portfolio-32-min), var(--cv-portfolio-32-pref), var(--cv-portfolio-32-max));
    --cv-portfolio-33-min: 0.9375rem;
    --cv-portfolio-33-pref: 2vw;
    --cv-portfolio-33-max: 1.875rem;
    --cv-portfolio-33: clamp(var(--cv-portfolio-33-min), var(--cv-portfolio-33-pref), var(--cv-portfolio-33-max));
    --cv-portfolio-34-min: 3.125rem;
    --cv-portfolio-34-pref: 8vw;
    --cv-portfolio-34-max: 5rem;
    --cv-portfolio-34: clamp(var(--cv-portfolio-34-min), var(--cv-portfolio-34-pref), var(--cv-portfolio-34-max));
    --cv-portfolio-35-min: 1.875rem;
    --cv-portfolio-35-pref: 5vw;
    --cv-portfolio-35-max: 3.125rem;
    --cv-portfolio-35: clamp(var(--cv-portfolio-35-min), var(--cv-portfolio-35-pref), var(--cv-portfolio-35-max));
    --cv-portfolio-36-min: 1.25rem;
    --cv-portfolio-36-pref: 4vw;
    --cv-portfolio-36-max: 2.5rem;
    --cv-portfolio-36: clamp(var(--cv-portfolio-36-min), var(--cv-portfolio-36-pref), var(--cv-portfolio-36-max));
    --cv-portfolio-37-min: 0.875rem;
    --cv-portfolio-37-pref: 2.5vw;
    --cv-portfolio-37-max: 1.25rem;
    --cv-portfolio-37: clamp(var(--cv-portfolio-37-min), var(--cv-portfolio-37-pref), var(--cv-portfolio-37-max));
    --cv-portfolio-38-min: 0.9375rem;
    --cv-portfolio-38-pref: 3vw;
    --cv-portfolio-38-max: 1.5625rem;
    --cv-portfolio-38: clamp(var(--cv-portfolio-38-min), var(--cv-portfolio-38-pref), var(--cv-portfolio-38-max));
    --cv-portfolio-39-min: 1.5625rem;
    --cv-portfolio-39-pref: 4vw;
    --cv-portfolio-39-max: 2.1875rem;
    --cv-portfolio-39: clamp(var(--cv-portfolio-39-min), var(--cv-portfolio-39-pref), var(--cv-portfolio-39-max));
    --cv-portfolio-40-min: 0.75rem;
    --cv-portfolio-40-pref: 2vw;
    --cv-portfolio-40-max: 1.25rem;
    --cv-portfolio-40: clamp(var(--cv-portfolio-40-min), var(--cv-portfolio-40-pref), var(--cv-portfolio-40-max));
    --cv-portfolio-41-min: 5rem;
    --cv-portfolio-41-pref: 12vw;
    --cv-portfolio-41-max: 8rem;
    --cv-portfolio-41: clamp(var(--cv-portfolio-41-min), var(--cv-portfolio-41-pref), var(--cv-portfolio-41-max));
    --cv-portfolio-42-min: 2.5rem;
    --cv-portfolio-42-pref: 8vw;
    --cv-portfolio-42-max: 3.75rem;
    --cv-portfolio-42: clamp(var(--cv-portfolio-42-min), var(--cv-portfolio-42-pref), var(--cv-portfolio-42-max));
    --cv-portfolio-43-min: 1.5625rem;
    --cv-portfolio-43-pref: 5vw;
    --cv-portfolio-43-max: 2.5rem;
    --cv-portfolio-43: clamp(var(--cv-portfolio-43-min), var(--cv-portfolio-43-pref), var(--cv-portfolio-43-max));
    --cv-portfolio-44-min: 1.5625rem;
    --cv-portfolio-44-pref: 6vw;
    --cv-portfolio-44-max: 2.5rem;
    --cv-portfolio-44: clamp(var(--cv-portfolio-44-min), var(--cv-portfolio-44-pref), var(--cv-portfolio-44-max));
    --cv-portfolio-45-min: 2rem;
    --cv-portfolio-45-pref: 3.5vw;
    --cv-portfolio-45-max: 4rem;
    --cv-portfolio-45: clamp(var(--cv-portfolio-45-min), var(--cv-portfolio-45-pref), var(--cv-portfolio-45-max));
    --cv-portfolio-46-min: 2.75rem;
    --cv-portfolio-46-pref: 3.5vw;
    --cv-portfolio-46-max: 3.5rem;
    --cv-portfolio-46: clamp(var(--cv-portfolio-46-min), var(--cv-portfolio-46-pref), var(--cv-portfolio-46-max));
    --cv-portfolio-47-min: 1.875rem;
    --cv-portfolio-47-pref: 3vw;
    --cv-portfolio-47-max: 3.75rem;
    --cv-portfolio-47: clamp(var(--cv-portfolio-47-min), var(--cv-portfolio-47-pref), var(--cv-portfolio-47-max));
    --cv-portfolio-48-min: 3rem;
    --cv-portfolio-48-pref: 30vw;
    --cv-portfolio-48-max: 30rem;
    --cv-portfolio-48: clamp(var(--cv-portfolio-48-min), var(--cv-portfolio-48-pref), var(--cv-portfolio-48-max));
    --cv-portfolio-49-min: 0.875rem;
    --cv-portfolio-49-pref: 0.9vw;
    --cv-portfolio-49-max: 1rem;
    --cv-portfolio-49: clamp(var(--cv-portfolio-49-min), var(--cv-portfolio-49-pref), var(--cv-portfolio-49-max));
    --cv-portfolio-50-min: 0.625rem;
    --cv-portfolio-50-pref: 0.9vw;
    --cv-portfolio-50-max: 0.875rem;
    --cv-portfolio-50: clamp(var(--cv-portfolio-50-min), var(--cv-portfolio-50-pref), var(--cv-portfolio-50-max));
    --cv-portfolio-51-min: 0.875rem;
    --cv-portfolio-51-pref: 1.2vw;
    --cv-portfolio-51-max: 1.25rem;
    --cv-portfolio-51: clamp(var(--cv-portfolio-51-min), var(--cv-portfolio-51-pref), var(--cv-portfolio-51-max));
    --cv-portfolio-52-min: 0.625rem;
    --cv-portfolio-52-pref: 1vw;
    --cv-portfolio-52-max: 1rem;
    --cv-portfolio-52: clamp(var(--cv-portfolio-52-min), var(--cv-portfolio-52-pref), var(--cv-portfolio-52-max));
    --cv-portfolio-53-min: 0.875rem;
    --cv-portfolio-53-pref: 0.8vw;
    --cv-portfolio-53-max: 0.875rem;
    --cv-portfolio-53: clamp(var(--cv-portfolio-53-min), var(--cv-portfolio-53-pref), var(--cv-portfolio-53-max));
    --cv-portfolio-54-min: 0.5rem;
    --cv-portfolio-54-pref: 1vw;
    --cv-portfolio-54-max: 0.75rem;
    --cv-portfolio-54: clamp(var(--cv-portfolio-54-min), var(--cv-portfolio-54-pref), var(--cv-portfolio-54-max));
    --cv-portfolio-55-min: 25rem;
    --cv-portfolio-55-pref: 48vw;
    --cv-portfolio-55-max: 50rem;
    --cv-portfolio-55: clamp(var(--cv-portfolio-55-min), var(--cv-portfolio-55-pref), var(--cv-portfolio-55-max));
    --cv-portfolio-56-min: 0.625rem;
    --cv-portfolio-56-pref: 1vw;
    --cv-portfolio-56-max: 0.9375rem;
    --cv-portfolio-56: clamp(var(--cv-portfolio-56-min), var(--cv-portfolio-56-pref), var(--cv-portfolio-56-max));
    --cv-portfolio-57-min: 0.9375rem;
    --cv-portfolio-57-pref: 1.5vw;
    --cv-portfolio-57-max: 1.5625rem;
    --cv-portfolio-57: clamp(var(--cv-portfolio-57-min), var(--cv-portfolio-57-pref), var(--cv-portfolio-57-max));
    --cv-portfolio-58-min: 28rem;
    --cv-portfolio-58-pref: 55vw;
    --cv-portfolio-58-max: 56rem;
    --cv-portfolio-58: clamp(var(--cv-portfolio-58-min), var(--cv-portfolio-58-pref), var(--cv-portfolio-58-max));
    --cv-portfolio-59-min: 10rem;
    --cv-portfolio-59-pref: 13vw;
    --cv-portfolio-59-max: 14rem;
    --cv-portfolio-59: clamp(var(--cv-portfolio-59-min), var(--cv-portfolio-59-pref), var(--cv-portfolio-59-max));
    --cv-portfolio-fade-min: 2rem;
    --cv-portfolio-fade-pref: 4vw;
    --cv-portfolio-fade-max: 5rem;
    --cv-portfolio-fade: clamp(var(--cv-portfolio-fade-min), var(--cv-portfolio-fade-pref), var(--cv-portfolio-fade-max));
    --cv-portfolio-60-min: 0.5rem;
    --cv-portfolio-60-pref: 0.75vw;
    --cv-portfolio-60-max: 1rem;
    --cv-portfolio-60: clamp(var(--cv-portfolio-60-min), var(--cv-portfolio-60-pref), var(--cv-portfolio-60-max));
    --cv-portfolio-61-min: 0.625rem;
    --cv-portfolio-61-pref: 1vw;
    --cv-portfolio-61-max: 1.125rem;
    --cv-portfolio-61: clamp(var(--cv-portfolio-61-min), var(--cv-portfolio-61-pref), var(--cv-portfolio-61-max));
    --cv-portfolio-62-min: 7.5rem;
    --cv-portfolio-62-pref: 11vw;
    --cv-portfolio-62-max: 12.5rem;
    --cv-portfolio-62: clamp(var(--cv-portfolio-62-min), var(--cv-portfolio-62-pref), var(--cv-portfolio-62-max));
    --cv-portfolio-63-min: 1rem;
    --cv-portfolio-63-pref: 1.2vw;
    --cv-portfolio-63-max: 1.25rem;
    --cv-portfolio-63: clamp(var(--cv-portfolio-63-min), var(--cv-portfolio-63-pref), var(--cv-portfolio-63-max));
    --cv-portfolio-64-min: 12rem;
    --cv-portfolio-64-pref: 17vw;
    --cv-portfolio-64-max: 17rem;
    --cv-portfolio-64: clamp(var(--cv-portfolio-64-min), var(--cv-portfolio-64-pref), var(--cv-portfolio-64-max));
    --cv-portfolio-65-min: 0.75rem;
    --cv-portfolio-65-pref: 1.2vw;
    --cv-portfolio-65-max: 1.5rem;
    --cv-portfolio-65: clamp(var(--cv-portfolio-65-min), var(--cv-portfolio-65-pref), var(--cv-portfolio-65-max));
    --cv-portfolio-66-min: 0.875rem;
    --cv-portfolio-66-pref: 0.78vw;
    --cv-portfolio-66-max: 0.8125rem;
    --cv-portfolio-66: clamp(var(--cv-portfolio-66-min), var(--cv-portfolio-66-pref), var(--cv-portfolio-66-max));
    --cv-portfolio-67-min: 0.5rem;
    --cv-portfolio-67-pref: 0.8vw;
    --cv-portfolio-67-max: 0.9375rem;
    --cv-portfolio-67: clamp(var(--cv-portfolio-67-min), var(--cv-portfolio-67-pref), var(--cv-portfolio-67-max));
    --cv-portfolio-68-min: 0.5rem;
    --cv-portfolio-68-pref: 1vw;
    --cv-portfolio-68-max: 1rem;
    --cv-portfolio-68: clamp(var(--cv-portfolio-68-min), var(--cv-portfolio-68-pref), var(--cv-portfolio-68-max));
    --cv-portfolio-69-min: 1.25rem;
    --cv-portfolio-69-pref: 3vw;
    --cv-portfolio-69-max: 3.125rem;
    --cv-portfolio-69: clamp(var(--cv-portfolio-69-min), var(--cv-portfolio-69-pref), var(--cv-portfolio-69-max));
    --cv-portfolio-70-min: 0.5rem;
    --cv-portfolio-70-pref: 1vw;
    --cv-portfolio-70-max: 0.9375rem;
    --cv-portfolio-70: clamp(var(--cv-portfolio-70-min), var(--cv-portfolio-70-pref), var(--cv-portfolio-70-max));
    --cv-portfolio-71-min: 0.875rem;
    --cv-portfolio-71-pref: 0.78vw;
    --cv-portfolio-71-max: 0.875rem;
    --cv-portfolio-71: clamp(var(--cv-portfolio-71-min), var(--cv-portfolio-71-pref), var(--cv-portfolio-71-max));
    --cv-portfolio-72-min: 0.375rem;
    --cv-portfolio-72-pref: 0.5vw;
    --cv-portfolio-72-max: 0.625rem;
    --cv-portfolio-72: clamp(var(--cv-portfolio-72-min), var(--cv-portfolio-72-pref), var(--cv-portfolio-72-max));
    --cv-portfolio-73-min: 0.25rem;
    --cv-portfolio-73-pref: 0.4vw;
    --cv-portfolio-73-max: 0.5rem;
    --cv-portfolio-73: clamp(var(--cv-portfolio-73-min), var(--cv-portfolio-73-pref), var(--cv-portfolio-73-max));
    --cv-portfolio-74-min: 24rem;
    --cv-portfolio-74-pref: 38vw;
    --cv-portfolio-74-max: 36rem;
    --cv-portfolio-74: clamp(var(--cv-portfolio-74-min), var(--cv-portfolio-74-pref), var(--cv-portfolio-74-max));
    --cv-portfolio-75-min: 28rem;
    --cv-portfolio-75-pref: 45vw;
    --cv-portfolio-75-max: 42rem;
    --cv-portfolio-75: clamp(var(--cv-portfolio-75-min), var(--cv-portfolio-75-pref), var(--cv-portfolio-75-max));
    --cv-portfolio-76-min: 0.875rem;
    --cv-portfolio-76-pref: 0.85vw;
    --cv-portfolio-76-max: 0.9375rem;
    --cv-portfolio-76: clamp(var(--cv-portfolio-76-min), var(--cv-portfolio-76-pref), var(--cv-portfolio-76-max));
    --cv-portfolio-77-min: 0.875rem;
    --cv-portfolio-77-pref: 0.9vw;
    --cv-portfolio-77-max: 1rem;
    --cv-portfolio-77: clamp(var(--cv-portfolio-77-min), var(--cv-portfolio-77-pref), var(--cv-portfolio-77-max));
    --cv-portfolio-78-min: 0.5rem;
    --cv-portfolio-78-pref: 0.7vw;
    --cv-portfolio-78-max: 0.625rem;
    --cv-portfolio-78: clamp(var(--cv-portfolio-78-min), var(--cv-portfolio-78-pref), var(--cv-portfolio-78-max));
    --cv-portfolio-79-min: 1rem;
    --cv-portfolio-79-pref: 1.5vw;
    --cv-portfolio-79-max: 1.25rem;
    --cv-portfolio-79: clamp(var(--cv-portfolio-79-min), var(--cv-portfolio-79-pref), var(--cv-portfolio-79-max));
    --cv-portfolio-80-min: 1.25rem;
    --cv-portfolio-80-pref: 2vw;
    --cv-portfolio-80-max: 1.75rem;
    --cv-portfolio-80: clamp(var(--cv-portfolio-80-min), var(--cv-portfolio-80-pref), var(--cv-portfolio-80-max));
    --cv-portfolio-81-min: 1rem;
    --cv-portfolio-81-pref: 1.1vw;
    --cv-portfolio-81-max: 1.125rem;
    --cv-portfolio-81: clamp(var(--cv-portfolio-81-min), var(--cv-portfolio-81-pref), var(--cv-portfolio-81-max));
    --cv-portfolio-82-min: 0.75rem;
    --cv-portfolio-82-pref: 1.2vw;
    --cv-portfolio-82-max: 1rem;
    --cv-portfolio-82: clamp(var(--cv-portfolio-82-min), var(--cv-portfolio-82-pref), var(--cv-portfolio-82-max));
    --cv-portfolio-83-min: 0.4rem;
    --cv-portfolio-83-pref: 0.6vw;
    --cv-portfolio-83-max: 0.5rem;
    --cv-portfolio-83: clamp(var(--cv-portfolio-83-min), var(--cv-portfolio-83-pref), var(--cv-portfolio-83-max));
    --cv-portfolio-84-min: 7rem;
    --cv-portfolio-84-pref: 10vw;
    --cv-portfolio-84-max: 10rem;
    --cv-portfolio-84: clamp(var(--cv-portfolio-84-min), var(--cv-portfolio-84-pref), var(--cv-portfolio-84-max));
    --cv-portfolio-85-min: 0.75rem;
    --cv-portfolio-85-pref: 0.7vw;
    --cv-portfolio-85-max: 0.75rem;
    --cv-portfolio-85: clamp(var(--cv-portfolio-85-min), var(--cv-portfolio-85-pref), var(--cv-portfolio-85-max));
    --cv-portfolio-86-min: 0.875rem;
    --cv-portfolio-86-pref: 0.85vw;
    --cv-portfolio-86-max: 0.875rem;
    --cv-portfolio-86: clamp(var(--cv-portfolio-86-min), var(--cv-portfolio-86-pref), var(--cv-portfolio-86-max));
    --cv-portfolio-87-min: 0.875rem;
    --cv-portfolio-87-pref: 1.2vw;
    --cv-portfolio-87-max: 1.125rem;
    --cv-portfolio-87: clamp(var(--cv-portfolio-87-min), var(--cv-portfolio-87-pref), var(--cv-portfolio-87-max));
    --cv-portfolio-88-min: 0.9375rem;
    --cv-portfolio-88-pref: 2vw;
    --cv-portfolio-88-max: 1.5625rem;
    --cv-portfolio-88: clamp(var(--cv-portfolio-88-min), var(--cv-portfolio-88-pref), var(--cv-portfolio-88-max));
    --cv-portfolio-89-min: 1.5rem;
    --cv-portfolio-89-pref: 2.5vw;
    --cv-portfolio-89-max: 2.5rem;
    --cv-portfolio-89: clamp(var(--cv-portfolio-89-min), var(--cv-portfolio-89-pref), var(--cv-portfolio-89-max));
    --cv-portfolio-90-min: 10rem;
    --cv-portfolio-90-pref: 12vw;
    --cv-portfolio-90-max: 14rem;
    --cv-portfolio-90: clamp(var(--cv-portfolio-90-min), var(--cv-portfolio-90-pref), var(--cv-portfolio-90-max));
    --cv-portfolio-91-min: 0.375rem;
    --cv-portfolio-91-pref: 0.5vw;
    --cv-portfolio-91-max: 0.5rem;
    --cv-portfolio-91: clamp(var(--cv-portfolio-91-min), var(--cv-portfolio-91-pref), var(--cv-portfolio-91-max));
    --cv-portfolio-92-min: 0.875rem;
    --cv-portfolio-92-pref: 0.8vw;
    --cv-portfolio-92-max: 0.9375rem;
    --cv-portfolio-92: clamp(var(--cv-portfolio-92-min), var(--cv-portfolio-92-pref), var(--cv-portfolio-92-max));
    --cv-portfolio-93-min: 0.25rem;
    --cv-portfolio-93-pref: 0.3vw;
    --cv-portfolio-93-max: 0.375rem;
    --cv-portfolio-93: clamp(var(--cv-portfolio-93-min), var(--cv-portfolio-93-pref), var(--cv-portfolio-93-max));
    --cv-portfolio-94-min: 1.125rem;
    --cv-portfolio-94-pref: 1.2vw;
    --cv-portfolio-94-max: 1.375rem;
    --cv-portfolio-94: clamp(var(--cv-portfolio-94-min), var(--cv-portfolio-94-pref), var(--cv-portfolio-94-max));
    --cv-portfolio-95-min: 2.75rem;
    --cv-portfolio-95-pref: 3vw;
    --cv-portfolio-95-max: 3.5rem;
    --cv-portfolio-95: clamp(var(--cv-portfolio-95-min), var(--cv-portfolio-95-pref), var(--cv-portfolio-95-max));
    --cv-portfolio-96-min: 1rem;
    --cv-portfolio-96-pref: 2vw;
    --cv-portfolio-96-max: 1.5rem;
    --cv-portfolio-96: clamp(var(--cv-portfolio-96-min), var(--cv-portfolio-96-pref), var(--cv-portfolio-96-max));
    --cv-portfolio-97-min: 1.25rem;
    --cv-portfolio-97-pref: 4vw;
    --cv-portfolio-97-max: 1.5rem;
    --cv-portfolio-97: clamp(var(--cv-portfolio-97-min), var(--cv-portfolio-97-pref), var(--cv-portfolio-97-max));
    --cv-portfolio-98-min: 1.25rem;
    --cv-portfolio-98-pref: 1.8vw;
    --cv-portfolio-98-max: 1.75rem;
    --cv-portfolio-98: clamp(var(--cv-portfolio-98-min), var(--cv-portfolio-98-pref), var(--cv-portfolio-98-max));
    --cv-portfolio-99-min: 0.375rem;
    --cv-portfolio-99-pref: 0.6vw;
    --cv-portfolio-99-max: 0.5rem;
    --cv-portfolio-99: clamp(var(--cv-portfolio-99-min), var(--cv-portfolio-99-pref), var(--cv-portfolio-99-max));
    --cv-portfolio-100-min: 0.375rem;
    --cv-portfolio-100-pref: 0.5vw;
    --cv-portfolio-100-max: 0.4375rem;
    --cv-portfolio-100: clamp(var(--cv-portfolio-100-min), var(--cv-portfolio-100-pref), var(--cv-portfolio-100-max));
    --cv-portfolio-101-min: 0.95rem;
    --cv-portfolio-101-pref: 1vw;
    --cv-portfolio-101-max: 1.05rem;
    --cv-portfolio-101: clamp(var(--cv-portfolio-101-min), var(--cv-portfolio-101-pref), var(--cv-portfolio-101-max));
    --cv-portfolio-102-min: 1.5rem;
    --cv-portfolio-102-pref: 2.5vw;
    --cv-portfolio-102-max: 2rem;
    --cv-portfolio-102: clamp(var(--cv-portfolio-102-min), var(--cv-portfolio-102-pref), var(--cv-portfolio-102-max));
    --cv-portfolio-103-min: 7.5rem;
    --cv-portfolio-103-pref: 11vw;
    --cv-portfolio-103-max: 11rem;
    --cv-portfolio-103: clamp(var(--cv-portfolio-103-min), var(--cv-portfolio-103-pref), var(--cv-portfolio-103-max));
    --pf-wrapper-pt-offset-min: 3rem;
    --pf-wrapper-pt-offset-pref: 5vw;
    --pf-wrapper-pt-offset-max: 6rem;
    --pf-wrapper-pt-offset: clamp(var(--pf-wrapper-pt-offset-min), var(--pf-wrapper-pt-offset-pref), var(--pf-wrapper-pt-offset-max));
    --pf-dots-inline-min: 1.25rem;
    --pf-dots-inline-pref: 2vw;
    --pf-dots-inline-max: 2.1875rem;
    --pf-dots-inline: clamp(var(--pf-dots-inline-min), var(--pf-dots-inline-pref), var(--pf-dots-inline-max));
    /* line-height 토큰 */
    --lh-0: 0;
    --lh-1: 1;
    --lh-13: 1.3;
    --lh-14: 1.4;
    --lh-15: 1.5;
    --lh-16: 1.6;
    --lh-19: 1.9;

    /* 자동 변수화 토큰 (fw/op/z) */
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --op-0: 0;
    --op-025: 0.25;
    --op-03: 0.3;
    --op-035: 0.35;
    --op-04: 0.4;
    --op-05: 0.5;
    --op-055: 0.55;
    --op-06: 0.6;
    --op-085: 0.85;
    --op-095: 0.95;
    --op-1: 1;
    --z-1: 1;
    --z-10: 10;
    --z-100: 100;
    --z-2: 2;
    --z-3: 3;
    --z-5: 5;
    --z-999: 999;
    --z-9999: 9999;
    --z-99999: 99999;

    /* 자동 변수화 토큰 (ls/br) */
    --ls-002: 0.02em;
    --ls-005: 0.05em;
    --ls-008: 0.08em;
    --ls-01: 0.1em;

    /* 자동 변수화 토큰 (w/h) */
    --width-1p: 1px;
    --height-1p: 1px;

    /* 모달 / 라이트박스 토큰 (변수화 + clamp 자연 전환) */
    --pf-modal-w-min: 18.75rem;
    --pf-modal-w-pref: 80vw;
    --pf-modal-w-max: 60rem;
    --pf-modal-w: clamp(var(--pf-modal-w-min), var(--pf-modal-w-pref), var(--pf-modal-w-max));
    --pf-modal-h-min: 30rem;
    --pf-modal-h-pref: 85svh;
    --pf-modal-h-max: 56.25rem;
    --pf-modal-h: clamp(var(--pf-modal-h-min), var(--pf-modal-h-pref), var(--pf-modal-h-max));
    --pf-modal-search-basis-min: 15rem;
    --pf-modal-search-basis-pref: 40vw;
    --pf-modal-search-basis-max: 30rem;
    --pf-modal-search-basis: clamp(var(--pf-modal-search-basis-min), var(--pf-modal-search-basis-pref), var(--pf-modal-search-basis-max));
    --pf-modal-backdrop: rgba(var(--color-black-rgb), 0.55);
    --pf-modal-shadow: rgba(var(--color-black-rgb), 0.25);
    --pf-lightbox-max-w: 90vw;
    --pf-lightbox-max-h: 90svh;

}


/* =========================
   상단 슬라이드 (Design Works)
========================= */
.raum-pf-top_slide_section {
    --pf-wrapper-pt: calc(var(--header-height) + var(--pf-wrapper-pt-offset));
    --pf-section-height: calc(100svh - var(--pf-wrapper-pt));
    --pf-dots-height: calc(0.5rem + var(--pf-dots-inline) * 2);
    --pf-slider-height: calc(var(--pf-section-height) - var(--pf-dots-height));
    background-color: var(--background-color);
    height: var(--pf-section-height);
}

.raum-pf-top_slider {
    position: relative;
    height: var(--pf-slider-height);
}

.raum-pf-top_slider_viewport {
    overflow: hidden;
    width: 100%;
    height: 100%;
    flex: 1;
    touch-action: pan-y;
}

.raum-pf-top_slider_track {
    display: flex;
    height: 100%;
    transition: transform var(--transition-snappy);
}

.raum-pf-top_slider_slide {
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.raum-pf-top_slider_slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.raum-pf-slide_imgbox {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: var(--lh-0);
}

/* 사진과 자막을 함께 묶는다.
   자막 그라디언트가 사진 폭에만 깔리도록 이 래퍼가 사진 크기를 그대로 갖는다. */
.raum-pf-slide_media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    height: 100%;
    overflow: hidden;
}

.raum-pf-slide_media > img {
    display: block;
    width: auto;
    height: 100%;
}

.raum-pf-top_slider_slide img {
    transition: filter var(--transition-fast);
}

/* =========================
   이미지 맞춤 (공용) — 높이 기준 한 가지로 통일
   세로 사진 : 높이를 채우고 좌우에 여백이 생긴다
   가로 사진 : 높이를 채우고 좌우가 프레임 밖으로 잘린다
   부모(.raum-pf-fitbox)가 크기를 잡고 자식은 그 안에서 중앙 정렬한다.
========================= */
.raum-pf-fitbox {
    position: relative;
    overflow: hidden;
}

.raum-pf-fitbox > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: none; /* 공통 img max-width:100% 가 폭을 칸에 묶으면 가로 사진이 좌우로 찌그러진다 — 비율 유지 후 좌우를 자른다 */
    height: 100%;
    display: block;
}

.raum-pf-slide_overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(var(--color-black-rgb), 0.5) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--cv-portfolio-1) var(--cv-portfolio-2);
    opacity: var(--op-1);
}

.raum-pf-slide_more {
    color: rgba(var(--color-white-rgb), 0.7);
    font-size: var(--cv-portfolio-3);
    font-weight: var(--fw-400);
    letter-spacing: var(--space-half);
    margin-top: var(--cv-portfolio-4);
    min-height: 1.2em;
    display: block;
    line-height: var(--lh-14);
}

.raum-pf-slide_name {
    color: var(--base-color-white);
    font-size: var(--cv-portfolio-5);
    font-weight: var(--fw-400);
    letter-spacing: var(--space-half);
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--lh-14);
}

.raum-pf-top_slider_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: var(--op-03);
    transition: opacity var(--transition-snappy);
}

.raum-pf-top_slider_prev {
    left: calc(var(--padding-pc) * -1 - var(--cv-portfolio-5));
}

.raum-pf-top_slider_next {
    right: calc(var(--padding-pc) * -1 - var(--cv-portfolio-5));
}

.raum-pf-top_slider_arrow:hover {
    opacity: var(--op-1);
}

.raum-pf-top_slider_arrow img {
    width: var(--cv-portfolio-5);
    height: auto;
    display: block;
}


.raum-pf-top_slider_dots {
    text-align: center;
    padding: var(--cv-portfolio-6) 0;
}

.raum-pf-top_slider_dot {
    display: inline-block;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    background: rgba(var(--color-black-rgb), 0.2);
    margin: 0 var(--space-5);
    cursor: pointer;
    transition: background var(--transition-snappy);
    flex-shrink: 0;
    box-sizing: border-box;
}

.raum-pf-top_slider_dot:hover {
    background: rgba(var(--color-black-rgb), 0.4);
}

.raum-pf-top_slider_dot.active {
    background: rgba(var(--color-black-rgb), 0.6);
}

/* =========================
   상단에 올리기 체크박스 (글쓰기)
========================= */

.raum-pf-w_top_chk_label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: var(--space-8);
}

.raum-pf-w_top_chk_label input[type="checkbox"] {
    position: absolute;
    opacity: var(--op-0);
    width: 0;
    height: 0;
}

.raum-pf-w_top_chk_box {
    display: inline-block;
    width: var(--space-18);
    height: var(--space-18);
    border: none;
    border-radius: 50%;
    background: var(--color-gray-150);
    position: relative;
    transition: background var(--transition-snappy);
    flex-shrink: 0;
}

.raum-pf-w_top_chk_box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-7);
    height: var(--space-7);
    border-radius: 50%;
    background: var(--signature-color);
    transform: translate(-50%, -50%) scale(0);
    opacity: var(--op-0);
    transition: transform var(--transition-snappy), opacity var(--transition-quick);
}

.raum-pf-w_top_chk_label input[type="checkbox"]:checked + .raum-pf-w_top_chk_box {
    background: var(--color-gray-200);
}

.raum-pf-w_top_chk_label input[type="checkbox"]:checked + .raum-pf-w_top_chk_box::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--op-1);
}

@media (hover: hover) {
    .raum-pf-w_top_chk_label:hover .raum-pf-w_top_chk_box {
        background: var(--color-gray-200);
    }
}

.raum-pf-w_top_chk_text {
    font-size: var(--cv-portfolio-7);
    color: var(--color-gray-600);
}

/* =========================
   카테고리 + 뷰 전환 래퍼
========================= */
.raum-pf-cate_view_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-20);
    border-bottom: var(--px-2) solid var(--base-color-black);
    padding-bottom: var(--cv-portfolio-8);
}

.raum-pf-cate_view_wrap #bo_cate {
    flex: 1;
}

.raum-pf-cate_select {
    height: var(--space-36);
    padding: 0 var(--space-30) 0 var(--space-12);
    border: 1px solid var(--base-color-black);
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--space-10) center;
    background-size: var(--space-12) auto;
    font-size: var(--cv-portfolio-14);
    font-family: inherit;
    color: var(--base-color-black);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.raum-pf-cate_select:focus {
    outline: none;
    border-color: var(--signature-color);
}


.raum-pf-cate_ul_hidden {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

.raum-pf-cate_select_hidden {
    display: none;
}

/* =========================
   뷰 전환 버튼
========================= */
.raum-pf-view_toggle {
    display: flex;
    gap: var(--space-8);
    flex-shrink: 0;
    padding-top: var(--cv-portfolio-9);
}

.raum-pf-view_btn {
    width: var(--space-36);
    height: var(--space-36);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(var(--color-black-rgb), 0.2);
    cursor: pointer;
    color: var(--color-gray-400);
    transition: all var(--transition-snappy);
}

.raum-pf-view_btn svg {
    width: 60%;
    height: 60%;
}

.raum-pf-view_btn:hover {
    border-color: var(--base-color-black);
    color: var(--base-color-black);
}

.raum-pf-view_btn.active {
    background: var(--base-color-black);
    border-color: var(--base-color-black);
    color: var(--signature-color);
}

.raum-pf-view_btn.active svg {
    stroke: var(--base-color-white);
    fill: var(--base-color-white);
}

.raum-pf-filter_btn.active svg path,
.raum-pf-filter_btn.active svg circle {
    stroke: var(--base-color-white);
}

.raum-pf-filter_btn.active svg circle {
    fill: var(--base-color-black);
}

/* =========================
   필터
========================= */
.raum-pf-filter_wrap {
    position: relative;
}

.raum-pf-filter_panel {
    position: absolute;
    top: calc(100% + 0.625rem);
    right: 0;
    background: var(--base-color-white);
    border: 1px solid rgba(var(--color-black-rgb), 0.1);
    padding: var(--space-25) var(--space-30);
    z-index: var(--z-100);
    min-width: var(--space-340);
    box-shadow: 0 var(--px-4) var(--px-12) rgba(var(--color-black-rgb), 0.08);
}

.raum-pf-filter_section {
    margin-bottom: var(--space-24);
}

.raum-pf-filter_section:last-child {
    margin-bottom: 0;
}

.raum-pf-filter_label {
    font-size: var(--cv-portfolio-7);
    font-weight: var(--fw-500);
    color: var(--base-color-black);
    margin-bottom: var(--space-12);
}

.raum-pf-filter_years,

.raum-pf-filter_chk_label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    cursor: pointer;
    font-size: var(--cv-portfolio-7);
    color: var(--base-color-black);
}

.raum-pf-filter_chk_label input[type="checkbox"] {
    width: var(--space-16);
    height: var(--space-16);
    margin: 0;
    cursor: pointer;
    accent-color: var(--base-color-black);
}

.raum-pf-filter_chk_text {
    user-select: none;
}

.raum-pf-filter_area_btns {
    display: flex;
    gap: var(--space-10);
}

.raum-pf-filter_area_btn {
    padding: var(--space-8) var(--space-24);
    font-size: var(--cv-portfolio-7);
    cursor: pointer;
    transition: all var(--transition-snappy);
    border: 1px solid var(--base-color-black);
    background: transparent;
    color: var(--base-color-black);
}

.raum-pf-filter_area_btn:hover {
    background: rgba(var(--color-black-rgb), 0.05);
}

.raum-pf-filter_area_btn.active {
    background: var(--base-color-black);
    color: var(--signature-color);
    border-color: var(--base-color-black);
}

/* =========================
   리스트형 레이아웃
========================= */
.raum-pf-list_wrap {
}

.raum-pf-list_header {
    display: flex;
    align-items: center;
    padding: var(--space-15) 0;
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.1);
    font-size: var(--cv-portfolio-10);
    font-weight: var(--fw-500);
    color: var(--color-gray-600);
}

.raum-pf-list_header .raum-pf-list_col_name {
    justify-content: center;
    text-align: center;
}

.raum-pf-list_row {
    display: flex;
    align-items: center;
    padding: var(--cv-portfolio-11) 0;
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.06);
    text-decoration: none;
    color: var(--base-color-black);
    transition: background var(--transition-snappy);
    cursor: pointer;
}

.raum-pf-list_row:hover {
    background: rgba(var(--color-black-rgb), 0.02);
}

.raum-pf-list_chk {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-14);
}

.raum-pf-list_chk input[type="checkbox"].selec_chk {
    position: relative;
    width: var(--space-16);
    height: var(--space-16);
    opacity: var(--op-1);
    overflow: visible;
    z-index: var(--z-1);
    cursor: pointer;
    accent-color: var(--base-color-black);
    margin: 0;
}

.raum-pf-list_chk.chk_box input[type="checkbox"] + label {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    opacity: var(--op-0);
}

.raum-pf-list_col {
    padding: 0 var(--space-10);
    font-size: var(--cv-portfolio-7);
}

.raum-pf-list_col_name {
    width: var(--space-120);
    flex: 0 0 var(--space-120);
    padding: 0;
}

.raum-pf-list_col_title {
    flex: 1;
    min-width: 0;
}

.raum-pf-list_text_wrap,
.raum-pf-list_text_top,
.raum-pf-list_text_meta {
    display: contents;
}

.raum-pf-list_col_year {
    width: var(--space-100);
    text-align: center;
}

.raum-pf-list_col_program {
    width: var(--space-120);
    text-align: center;
}

.raum-pf-list_col_area {
    width: var(--space-120);
    text-align: center;
}

.raum-pf-list_col_award {
    width: var(--space-80);
    text-align: center;
    padding-right: 0;
    order: 1;
}

.raum-pf-list_thumb {
    width: var(--space-120);
    height: var(--space-75);
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-hex-e5e5e5);
}

.raum-pf-list_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter var(--transition-fast);
}

.raum-pf-list_row:hover .raum-pf-list_thumb img {
    filter: grayscale(0%);
}

.raum-pf-list_thumb_noimg {
    background: var(--color-hex-d0d0d0);
}

.raum-pf-list_title {
    font-weight: var(--fw-400);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.raum-pf-award_icon {
    display: inline-block;
    vertical-align: middle;
}

/* =========================
   글쓰기 - 리스트형 정보 입력
========================= */

#raum-pf-write {
    flex: 1;
    width: auto;
    margin: 0;
    background-color: var(--background-color);
    padding: var(--card-padding-lg) var(--card-padding) var(--spacing-section-xl);
    font-family: var(--font-KR-base);
}

/* #raum-pf-view 첫 정의는 하단 통합 정의로 이관 (중복 제거) */

body #bo_portfolio {
    width: 100%;
    background-color: var(--background-color);
    padding: 0;
    font-family: var(--font-KR-base);
}


/* =========================
   카테고리 탭
========================= */
#bo_portfolio #bo_cate {
    padding: var(--cv-portfolio-9) 0 0;
}

#bo_portfolio #bo_cate h2 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden;
}

#bo_portfolio #bo_cate_ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
}

#bo_portfolio #bo_cate_ul li {
    display: inline-flex;
    align-items: center;
}

#bo_portfolio #bo_cate_ul li + li::before {
    content: '|';
    color: rgba(var(--color-black-rgb), 0.3);
    padding: 0 var(--cv-portfolio-12);
    font-size: var(--cv-portfolio-13);
}

#bo_portfolio #bo_cate_ul a {
    display: block;
    padding: var(--space-4) 0;
    color: var(--base-color-black);
    font-size: var(--cv-portfolio-14);
    font-weight: var(--fw-400);
    text-decoration: none;
    transition: all var(--transition-snappy);
    background: transparent;
}

#bo_portfolio #bo_cate_ul a:hover {
    color: var(--base-color-black);
    font-weight: var(--fw-700);
}

#bo_portfolio #bo_cate_ul #bo_cate_on,
#bo_portfolio #bo_cate_ul a.on {
    color: var(--base-color-black);
    font-weight: var(--fw-700);
}


/* =========================
   관리자 버튼
========================= */
#bo_portfolio #bo_btn_top {
    display: none;
}

#bo_portfolio #bo_btn_top:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#bo_portfolio .btn_bo_user {
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_portfolio .btn_bo_user li {
    float: left;
    width: var(--space-40);
    text-align: center;
    margin-left: var(--space-5);
}

#bo_portfolio .btn_bo_user>li {
    position: relative;
}

#bo_portfolio .more_opt {
    display: none;
    position: absolute;
    top: var(--space-45);
    right: 0;
    background: var(--base-color-white);
    border: 1px solid var(--color-gray-270);
    z-index: var(--z-999);
}

#bo_portfolio .more_opt:before {
    content: "";
    position: absolute;
    top: -var(--space-8);
    right: var(--space-13);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--px-6) var(--px-8) var(--px-6);
    border-color: transparent transparent var(--color-gray-270) transparent;
}

#bo_portfolio .more_opt:after {
    content: "";
    position: absolute;
    top: -var(--space-6);
    right: var(--space-13);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--px-6) var(--px-8) var(--px-6);
    border-color: transparent transparent var(--base-color-white) transparent;
}

#bo_portfolio .more_opt li {
    border-bottom: 1px solid var(--color-ui-f1f1f1);
    padding: var(--space-10);
    float: inherit;
    width: var(--space-90);
    margin: 0;
    color: var(--color-gray-420);
    text-align: left;
}

#bo_portfolio .more_opt li:last-child {
    border-bottom: 0;
}

#bo_portfolio .more_opt li button,
#bo_portfolio .more_opt li a {
    width: 100%;
    border: 0;
    background: var(--base-color-white);
    color: var(--color-gray-420);
}

#bo_portfolio .more_opt li:hover button {
    color: var(--base-color-black);
}

#bo_portfolio .more_opt li i {
    float: right;
    line-height: var(--space-20);
}


/* =========================
   포트폴리오 3열 그리드
========================= */
.raum-pf-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-portfolio-15) var(--cv-portfolio-15);
    margin-top: var(--cv-portfolio-9);
}

.raum-pf-grid > .raum-pf-card {
    flex: 0 1 calc((100% - var(--cv-portfolio-15) * 2) / 3);
    box-sizing: border-box;
}

.raum-pf-card {
    position: relative;
}

.raum-pf-card_link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.raum-pf-card_award {
    position: absolute;
    top: var(--cv-portfolio-16);
    right: var(--cv-portfolio-16);
    z-index: var(--z-1);
    filter: drop-shadow(0 1px var(--px-2) rgba(0, 0, 0, 0.3));
}

.raum-pf-card_link:hover {
    text-decoration: none;
}

.raum-pf-card_img {
    position: relative;
    width: 100%;
    height: var(--cv-portfolio-17);
    overflow: hidden;
}

.raum-pf-card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

.raum-pf-card_link:hover .raum-pf-card_img img {
    transform: scale(1.05);
}

.raum-pf-card_noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-hex-e0ddd9);
}

.raum-pf-card_noimg span {
    font-size: var(--cv-portfolio-7);
    color: var(--color-gray-400);
    text-transform: uppercase;
}

.raum-pf-card_text {
    padding: var(--cv-portfolio-16) 0;
    text-align: left;
}

.raum-pf-card_title {
    font-size: var(--text-font-size);
    line-height: var(--text-font-size-line);
    font-weight: var(--fw-700);
    color: var(--base-color-black);
    margin: 0 0 var(--space-2);
    word-break: keep-all;
}

.raum-pf-card_info {
    font-size: var(--cv-portfolio-13);
    line-height: var(--lh-15);
    color: var(--base-color-black);
    font-weight: var(--fw-400);
}

/* 체크박스 */
.raum-pf-chk {
    position: absolute;
    top: var(--cv-portfolio-18);
    left: var(--cv-portfolio-18);
    z-index: var(--z-3);
}

.raum-pf-chk.chk_box input[type="checkbox"] + label {
    padding-left: 0;
    cursor: pointer;
}

.raum-pf-chk.chk_box input[type="checkbox"] + label span {
    cursor: pointer;
    top: 0;
    left: 0;
    width: var(--space-24);
    height: var(--space-24);
    border-radius: 50%;
    border: none;
    background: rgba(var(--color-white-rgb), 0.5);
    backdrop-filter: blur(var(--px-4));
    -webkit-backdrop-filter: blur(var(--px-4));
    box-shadow: 0 var(--px-2) var(--px-6) rgba(var(--color-black-rgb), 0.2);
    transition: background var(--transition-snappy);
}

.raum-pf-chk.chk_box input[type="checkbox"] + label span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    background: var(--signature-color);
    transform: translate(-50%, -50%) scale(0);
    opacity: var(--op-0);
    transition: transform var(--transition-snappy), opacity var(--transition-quick);
}

.raum-pf-chk.chk_box input[type="checkbox"]:checked + label span {
    background: rgba(var(--color-white-rgb), 0.7);
    border: none;
    border-radius: 50%;
}

.raum-pf-chk.chk_box input[type="checkbox"]:checked + label span::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--op-1);
}

/* 빈 목록 */
.raum-pf-empty {
    padding: var(--space-100) 0;
    text-align: center;
    color: var(--color-gray-400);
    font-size: 1em;
}

.raum-pf-infinite_loader {
    padding: var(--space-40) 0;
    text-align: center;
}

.raum-pf-loader_spinner {
    display: inline-block;
    width: var(--space-30);
    height: var(--space-30);
    border: var(--px-2) solid rgba(var(--color-black-rgb), 0.1);
    border-top-color: var(--base-color-black);
    border-radius: 50%;
    animation: raum-pf-spin var(--anim-spin-fast);
}


/* =========================
   체크박스 공통
========================= */
.selec_chk {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: var(--op-0);
    outline: 0;
    z-index: -1;
    overflow: hidden;
}

.chk_box {
    position: relative;
}

.chk_box input[type="checkbox"]+label {
    position: relative;
    padding-left: var(--space-20);
    color: var(--color-gray-430);
    vertical-align: baseline;
}

.chk_box input[type="checkbox"]+label span {
    position: absolute;
    top: var(--space-10);
    left: var(--space-10);
    width: var(--space-15);
    height: var(--space-15);
    display: block;
    background: var(--base-color-white);
    border: 1px solid var(--color-gray-230);
    border-radius: var(--px-3);
}

.chk_box input[type="checkbox"]:checked+label {
    color: var(--base-color-black);
}

.chk_box input[type="checkbox"]:checked+label span {
    background: url(./img/chk.png) no-repeat 50% 50% var(--color-accent-blue);
    border-color: var(--color-accent-blue-bright);
    border-radius: var(--px-3);
}


/* =========================
   검색
========================= */
.bo_sch_wrap {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-999);
}

.bo_sch {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--base-color-white);
    text-align: left;
    width: var(--space-330);
    max-height: var(--space-300);
    margin-left: -7.8125rem;
    margin-top: -var(--space-180);
    overflow-y: auto;
    box-shadow: 1px 1px var(--px-18) rgba(var(--color-black-rgb), 0.2);
    border: 1px solid var(--color-ui-dde7e9);
    border-radius: var(--px-3);
}

.bo_sch:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

.bo_sch h3 {
    padding: var(--space-15);
    border-bottom: 1px solid var(--color-ui-line);
}

.bo_sch form {
    padding: var(--space-15);
    display: block;
}

.bo_sch select {
    border: 1px solid var(--color-ui-input-bg);
    width: 100%;
    height: var(--space-40);
    border-radius: var(--px-2);
    box-shadow: inset 0 1px 1px rgba(var(--color-black-rgb), .075);
}

.bo_sch .sch_bar {
    display: inline-block;
    width: 100%;
    clear: both;
    margin-top: var(--space-15);
    border: 1px solid var(--color-ui-input-bg);
    border-radius: var(--px-2);
    box-shadow: inset 0 1px 1px rgba(var(--color-black-rgb), .075);
}

.bo_sch .sch_input {
    width: var(--space-250);
    height: var(--space-38);
    border: 0;
    padding: 0;
    background-color: transparent;
    float: left;
}

.bo_sch .sch_btn {
    height: var(--space-38);
    float: right;
    color: var(--color-gray-440);
    background: none;
    border: 0;
    width: var(--space-40);
    font-size: var(--space-15);
}

.bo_sch .bo_sch_cls {
    position: absolute;
    right: 0;
    top: 0;
    color: var(--color-gray-280);
    border: 0;
    padding: var(--space-12) var(--space-15);
    font-size: var(--space-16);
    background: var(--base-color-white);
}

.bo_sch_bg {
    background: rgba(var(--color-black-rgb), 0.1);
    width: 100%;
    height: 100%;
}


/* =========================
   보기 페이지 (view)
========================= */
#raum-pf-view {
    width: auto;
    margin: 0;
    padding: 0;
    font-family: var(--font-KR-base);
    position: relative;
    background-color: var(--background-color);
    --pf-wrapper-pt-extra-min: 3rem;
    --pf-wrapper-pt-extra-pref: 5vw;
    --pf-wrapper-pt-extra-max: 6rem;
    --pf-wrapper-pt-extra: clamp(var(--pf-wrapper-pt-extra-min), var(--pf-wrapper-pt-extra-pref), var(--pf-wrapper-pt-extra-max));
    --pf-wrapper-pt: calc(var(--header-height) + var(--pf-wrapper-pt-extra));
    --pf-section-height: calc(100svh - var(--pf-wrapper-pt));
    --pf-title-pt-min: 4rem;
    --pf-title-pt-pref: 6vw;
    --pf-title-pt-max: 6rem;
    --pf-title-pt: clamp(var(--pf-title-pt-min), var(--pf-title-pt-pref), var(--pf-title-pt-max));
    --pf-title-pb-min: 2.5rem;
    --pf-title-pb-pref: 4vw;
    --pf-title-pb-max: 4rem;
    --pf-title-pb: clamp(var(--pf-title-pb-min), var(--pf-title-pb-pref), var(--pf-title-pb-max));
    --pf-title-total: calc(var(--pf-title-pt) + var(--pf-title-pb) + 2.5rem);
    --pf-hero-height: calc(var(--pf-section-height) - var(--pf-title-total));
}

#raum-pf-view #bo_btn_top {
    display: none;
}

#raum-pf-view .btn_bo_user {
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

#raum-pf-view .btn_bo_user li {
    float: none;
    text-align: center;
}

#raum-pf-view .btn_bo_user>li {
    position: relative;
}

#raum-pf-view .btn_bo_user>li>a,
#raum-pf-view .btn_bo_user>li>button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-16);
    font-size: var(--text-font-size);
    line-height: var(--lh-14);
    color: var(--base-color-black);
    background: transparent;
    border: 1px solid var(--base-color-black);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-snappy);
    white-space: nowrap;
}

#raum-pf-view .btn_bo_user>li>a:hover,
#raum-pf-view .btn_bo_user>li>button:hover {
    background: var(--signature-color);
    color: var(--signature-color);
    border-color: var(--signature-color);
}

#raum-pf-view .more_opt {
    display: none;
    position: absolute;
    top: var(--space-45);
    right: 0;
    background: var(--base-color-white);
    border: 1px solid var(--color-gray-270);
    z-index: var(--z-999);
}

#raum-pf-view .more_opt li {
    border-bottom: 1px solid var(--color-ui-f1f1f1);
    padding: var(--space-10);
    float: inherit;
    width: var(--space-90);
    margin: 0;
    color: var(--color-gray-420);
    text-align: left;
}

#raum-pf-view .more_opt li:last-child {
    border-bottom: 0;
}

#raum-pf-view .more_opt li a {
    width: 100%;
    border: 0;
    background: var(--base-color-white);
    color: var(--color-gray-420);
    text-decoration: none;
}

#raum-pf-view .more_opt li a i {
    float: right;
    line-height: var(--space-20);
}

/* 프로젝트 헤더 */

.raum-pf-view_title {
    font-size: var(--cv-portfolio-19);
    font-weight: var(--fw-700);
    color: var(--base-color-black);
    margin: 0 0 var(--space-12);
    line-height: var(--lh-13);
}

/* 헤더 세로선 */

/* ========== 뷰 슬라이더 (리스트 상단과 동일) ========== */

.raum-pf-view_first_screen {
    height: var(--pf-section-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 높이를 --pf-hero-height 로 고정한다.
   height:auto 로 두면 자식의 height:100% 가 해석되지 않아
   첫 사진(특히 세로)이 프레임 높이를 결정해 버린다. */
.raum-pf-view_hero_section {
    flex: 0 0 auto;
    height: var(--pf-hero-height);
}

.raum-pf-view_hero_section .raum-pf-slider {
    height: 100%;
}

.raum-pf-view_title_section {
    flex: 0 0 auto;
    padding: var(--pf-title-pt) 0 var(--pf-title-pb);
}

.raum-pf-view_title_section .raum-pf-view_title {
    margin: 0;
    line-height: var(--lh-13);
}

.raum-pf-slider {
    position: relative;
    height: var(--pf-slider-height);
}

.raum-pf-slider_viewport {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.raum-pf-slider_track {
    display: flex;
    height: 100%;
    transition: transform var(--transition-medium);
}

.raum-pf-slider_slide {
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.raum-pf-slider_slide img {
    display: block;
    /* width/height/background: JS 3분기 주입 */
}

#raum-pf-view > .raum-pf-slider_arrow {
    position: absolute;
    top: calc(var(--pf-hero-height) / 2);
    transform: translateY(-50%);
    z-index: var(--z-10);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    opacity: var(--op-1);
    transition: color var(--transition-snappy);
}

#raum-pf-view > .raum-pf-slider_arrow:hover {
    color: var(--base-color-black);
}

.raum-pf-slider .raum-pf-slider_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--base-color-white);
    opacity: var(--op-05);
    transition: opacity var(--transition-snappy);
}

#raum-pf-view > .raum-pf-slider_prev {
    left: calc(var(--padding-pc) * -1 - var(--cv-portfolio-20));
}

#raum-pf-view > .raum-pf-slider_next {
    right: calc(var(--padding-pc) * -1 - var(--cv-portfolio-20));
}

.raum-pf-slider_arrow:hover {
    opacity: var(--op-1);
}

.raum-pf-slider_arrow svg {
    width: var(--cv-portfolio-1);
    height: auto;
    display: block;
}

.raum-pf-slider_dots {
    text-align: center;
    padding: var(--cv-portfolio-6) 0;
}

.raum-pf-slider_dot {
    display: inline-block;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    background: rgba(var(--color-black-rgb), 0.2);
    margin: 0 var(--space-5);
    cursor: pointer;
    transition: background var(--transition-snappy);
}

.raum-pf-slider_dot:hover {
    background: rgba(var(--color-black-rgb), 0.4);
}

.raum-pf-slider_dot.active {
    background: rgba(var(--color-black-rgb), 0.6);
}

/* 글쓰기 - 슬라이드 업로드 */
.raum-pf-w_slider_hint {
    text-align: center;
    font-size: 0.85em;
    color: var(--color-gray-400);
    margin: 0 0 var(--space-12);
}

.raum-pf-w_slider_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-20);
}

.raum-pf-w_slider_grid > * {
    flex: 0 1 calc((100% - var(--space-20) * 4) / 5);
    box-sizing: border-box;
}


/* 프로젝트 정보 */

/* ========== 프로젝트 상세 (이미지 + 정보 테이블) ========== */

/* 글쓰기 - 프로젝트 상세 입력 */

/* 글쓰기 - 상세 테이블 입력 */

/* 섹션 공통 */

.raum-pf-sec_title {
    font-family: var(--font-KR-base);
    font-size: var(--cv-portfolio-21);
    font-weight: var(--fw-400);
    color: var(--base-color-black);
    margin: 0 0 var(--cv-portfolio-22);

}

/* ========== 섹션 2 — 단일 이미지 ========== */

/* 글쓰기 - 섹션2 */

/* ========== 섹션 3 — 이미지 + 텍스트 + 그리드 ========== */

/* 글쓰기 - 섹션3 */

/* 사진 그리드 (범용) */

/* 이전/다음글 */

.nb_label {
    font-size: var(--cv-portfolio-10);
    color: var(--color-gray-400);
    margin: 0 var(--space-8);
}

/* ========== 섹션 4 — Interior Information ========== */

/* 글쓰기 - 섹션4 */


/* ========== 섹션 5 — Work Review ========== */

/* 글쓰기 - 섹션5 */



.raum-pf-section_board_list {
    padding: var(--cv-portfolio-23) 0 0;
}

.raum-pf-section_board_list .raum-pf-sec_title {
    color: var(--base-color-black);
}

/* 글쓰기 - 섹션6 업로드 그리드 */


/* ========== 마지막 섹션 — 게시판 글 목록 ========== */

/* 목록 버튼 */
.raum-pf-view_bottom {
    text-align: center;
    padding: var(--cv-portfolio-9) 0;
}

.raum-pf-btn_list {
    display: inline-block;
    padding: var(--space-12) var(--space-40);
    border: 1px solid var(--base-color-black);
    color: var(--base-color-black);
    text-decoration: none;
    font-size: var(--cv-portfolio-7);
    transition: all var(--transition-snappy);
}

.raum-pf-btn_list:hover {
    background: var(--signature-color);
    border-color: var(--signature-color);
    color: var(--base-color-white);
}


/* =========================
   글쓰기 폼 (보기와 동일 레이아웃)
========================= */
/* 글쓰기 페이지: 헤더/푸터 숨김 */
body:has(.raum-pf-write_page) header,
body:has(.raum-pf-write_page) footer,
body:has(.raum-pf-write_page) .raum-gnb-all,
body:has(.raum-pf-write_page) #hd_login_msg {
    display: none;
}

body:has(.raum-pf-write_page) #wrapper,
body:has(.raum-pf-write_page) #container {
    padding: 0;
}

/* 글쓰기 페이지: 2컬럼 (로고 사이드바 | 폼) */
.raum-pf-write_page {
    display: flex;
    min-height: var(--svh-100);
}

.raum-pf-write_sidebar {
    position: sticky;
    top: 0;
    width: var(--sidebar-width);
    height: var(--svh-100);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--cv-portfolio-2);
    background: var(--base-color-white);
}

.raum-pf-write_logo {
    display: flex;
    text-decoration: none;
}

.raum-pf-write_logo img {
    width: var(--cv-portfolio-24);
    height: auto;
}

.raum-pf-write_sidebar_text {
    margin-top: var(--cv-portfolio-25);
}

.raum-pf-write_sidebar_board {
    display: block;
    font-family: var(--font-KR-base);
    font-size: var(--cv-portfolio-26);
    font-weight: var(--fw-600);
    color: var(--base-color-black);
    letter-spacing: var(--ls-002);
}

.raum-pf-write_sidebar_reg {
    display: block;
    font-size: var(--cv-portfolio-27);
    font-weight: var(--fw-400);
    color: var(--color-gray-400);
    letter-spacing: var(--ls-008);
    margin-top: var(--space-4);
}

.raum-pf-write_sidebar_date {
    display: block;
    margin-top: var(--cv-portfolio-25);
    font-size: var(--cv-portfolio-28);
    font-weight: var(--fw-400);
    color: var(--color-gray-300);
    letter-spacing: var(--ls-01);
}

.raum-pf-write_sidebar_line {
    display: block;
    width: var(--space-32);
    height: var(--height-1p);
    background: rgba(var(--color-black-rgb), 0.12);
    margin: var(--cv-portfolio-8) 0;
}

.raum-pf-write_sidebar_slogan {
    display: block;
    font-family: var(--font-KR-base);
    font-size: var(--cv-portfolio-7);
    font-weight: var(--fw-400);
    
    color: var(--base-color-black);
    letter-spacing: var(--ls-005);
}

.raum-pf-w_section {
    position: relative;
    padding: var(--cv-portfolio-29) 0;
}

/* 헤더 입력 */
.raum-pf-w_title_input {
    display: block;
    width: 100%;
    border: none;
    border-bottom: var(--px-2) dashed rgba(var(--color-black-rgb), 0.15);
    background: transparent;
    text-align: center;
    font-size: var(--space-26);
    font-weight: var(--fw-700);
    color: var(--base-color-black);
    padding: var(--space-10) 0;
    margin-bottom: var(--space-12);
    outline: none;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    line-height: var(--lh-14);
}

.raum-pf-w_title_input::placeholder {
    color: var(--color-gray-400);
}

.raum-pf-w_title_input:focus {
    border-bottom-color: var(--base-color-black);
}

.raum-pf-w_cate_select {
    display: block;
    max-width: var(--space-300);
    margin: 0 auto var(--space-20);
    border: 1px solid rgba(var(--color-black-rgb), 0.15);
    height: var(--space-38);
    line-height: var(--space-38);
    padding: 0 var(--space-12);
    border-radius: 0;
    text-align: center;
    box-sizing: border-box;
    background: transparent;
    font-size: var(--space-14);
    color: var(--color-gray-600);
    outline: none;
}

.raum-pf-w_field_row {
    max-width: var(--space-400);
    margin: 0 auto var(--space-15);
}

.raum-pf-w_input {
    width: 100%;
    border: 1px solid var(--color-ui-input-bg);
    padding: var(--space-8) var(--space-12);
    border-radius: var(--px-3);
    box-sizing: border-box;
}

/* 프로젝트 정보 입력 */

/* Building Information 카드 입력 */

/* 섹션 제목 입력 */

/* 섹션 설명 입력 */

/* 이미지 업로드 영역 */
.raum-pf-w_img_area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--cv-portfolio-30);
    background: var(--color-gray-150);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.raum-pf-w_img_toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-4);
}

.raum-pf-w_img_act_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5-alt);
    border: none;
    border-radius: 0;
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: color var(--transition-snappy), background var(--transition-snappy);
}

@media (hover: hover) {
    .raum-pf-w_img_edit_btn:hover {
        color: var(--base-color-white);
        background: var(--signature-color);
        border-color: var(--signature-color);
    }

    .raum-pf-w_img_del_btn:hover {
        color: var(--base-color-white);
        background: var(--color-accent-red);
        border-color: var(--color-accent-red);
    }
}

.raum-pf-w_file_input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: var(--op-0);
    overflow: hidden;
}

.raum-pf-w_img_label {
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.raum-pf-w_img_area:hover {
    background-color: var(--color-gray-200);
}

.raum-pf-w_img_placeholder {
    color: var(--color-gray-400);
    font-size: var(--cv-portfolio-7);
    text-align: center;
    transition: opacity var(--transition-snappy);
}

.raum-pf-w_img_placeholder i {
    margin-right: var(--space-6);
    font-size: 1.2em;
}

/* 히어로 이미지 업로드 */

/* 3장 갤러리 업로드 */


/* 기존 파일 표시 */

/* 버튼 */
.raum-pf-w_buttons {
    text-align: center;
    padding: var(--cv-portfolio-9) 0;
    display: flex;
    justify-content: center;
    gap: var(--space-12);
}

.raum-pf-btn_cancel,
.raum-pf-btn_submit {
    display: inline-block;
    padding: var(--space-12) var(--space-40);
    font-size: var(--cv-portfolio-7);
    border: none;
    background: var(--background-color-gray);
    color: var(--base-color-black);
    cursor: pointer;
    transition: all var(--transition-snappy);
    text-decoration: none;
}

.raum-pf-btn_cancel:hover,
.raum-pf-btn_submit:hover {
    background: rgba(var(--color-black-rgb), 0.15);
}

/* PC: 기존 버튼 영역 숨기고 사이드바 아이콘 표시 */
.raum-pf-write_page .raum-pf-w_buttons {
    display: none;
}

/* 사이드바 액션 아이콘 */
.raum-pf-write_sidebar_actions {
    display: flex;
    gap: var(--cv-portfolio-16);
    margin-top: var(--cv-portfolio-25);
}

.raum-pf-write_sidebar_actions a,
.raum-pf-write_sidebar_actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-48);
    height: var(--space-48);
    border-radius: 50%;
    border: 1px solid rgba(var(--color-black-rgb), 0.15);
    background: transparent;
    color: var(--base-color-black);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

a.raum-pf-write_sidebar_actions a:link,
a.raum-pf-write_sidebar_actions a:visited {
    color: var(--base-color-black);
}

@media (hover: hover) {
    .raum-pf-write_sidebar_actions a:hover,
    .raum-pf-write_sidebar_actions button:hover {
        background: var(--signature-color);
        color: var(--base-color-white);
        border-color: var(--signature-color);
    }
}

/* 모바일: 사이드바 아이콘 숨기고 하단 fixed 표시 */
@media (max-width: 768px) {
    .raum-pf-write_sidebar_actions {
        display: none;
    }

    .raum-pf-write_page .raum-pf-w_buttons {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        justify-content: center;
        gap: var(--space-12);
        padding: var(--cv-portfolio-31);
        background: rgba(var(--color-white-rgb), 0.95);
        backdrop-filter: blur(var(--px-10));
        -webkit-backdrop-filter: blur(var(--px-10));
        border-top: 1px solid rgba(var(--color-black-rgb), 0.08);
        z-index: var(--z-999);
    }
}


/* =========================
   반응형
========================= */
@media (max-width: 1024px) {
    .raum-pf-top_slide_section {
        margin: 0 0 var(--space-100);
    }

    .raum-pf-cate_view_wrap {
        gap: var(--space-15);
        align-items: center;
    }

    #bo_cate {
        position: absolute;
        visibility: hidden;
        pointer-events: none;
    }

    .raum-pf-view_toggle {
        padding-top: 0;
        justify-content: flex-end;
    }

    .raum-pf-top_slider {
        padding: 0 var(--cv-portfolio-32);
    }

    .raum-pf-grid {
        gap: var(--px-30) var(--cv-portfolio-33);
    }

    .raum-pf-grid > .raum-pf-card {
        flex: 1 1 clamp(14rem, 30vw, 22rem);
    }

    .raum-pf-list_row {
        padding: var(--space-18) 0;
    }

    .raum-pf-list_col_year,
    .raum-pf-list_col_program,
    .raum-pf-list_col_area {
        width: var(--space-80);
    }

    .raum-pf-list_col_award {
        width: var(--space-60);
    }

    .raum-pf-list_thumb {
        width: var(--space-100);
        height: var(--space-65);
    }

    .raum-pf-list_col_name {
        gap: var(--space-15);
    }

    .raum-pf-view_content {
        padding: var(--cv-portfolio-47) 0;
    }

    .raum-pf-view_info_table {
        padding: 0;
    }

    .raum-pf-info_tbl,
    .raum-pf-info_tbl tbody,
    .raum-pf-info_tbl tr {
        display: block;
        width: 100%;
    }

    .raum-pf-info_tbl tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
    }

    .raum-pf-info_group {
        flex: 1 1 calc(50% - var(--space-8));
        min-width: 0;
    }
}

@media (max-width: 860px) {
    .raum-pf-top_slide_section {
        padding: 0;
        margin: var(--cv-portfolio-34) 0 var(--space-70);
        --pf-section-height: clamp(16rem, 56vw + 4rem, 28rem);
    }

    .raum-pf-top_slider {
        padding: 0;
    }

    .raum-pf-top_slider_arrow {
        display: none;
    }

    .raum-pf-top_slider_dots {
        margin-top: var(--cv-portfolio-38);
    }

    #bo_portfolio #bo_cate_ul {
        gap: var(--space-8);
    }

    #bo_portfolio #bo_cate_ul a {
        padding: var(--space-7) var(--space-16);
    }

    .raum-pf-cate_view_wrap {
        margin-bottom: var(--cv-portfolio-39);
    }

    .raum-pf-view_btn {
        width: var(--space-36);
        height: var(--space-36);
    }

    .raum-pf-filter_btn {
        width: var(--space-36);
        height: var(--space-36);
    }

    .raum-pf-filter_panel {
        right: 0;
        min-width: var(--space-280);
    }

    .raum-pf-grid {
        gap: var(--px-25) var(--cv-portfolio-40);
    }

    .raum-pf-card_text {
        padding: var(--space-8) 0 var(--space-20);
    }

    /* 리스트형 모바일 - 상단: 이미지+이름 / 하단: 메타정보 */
    .raum-pf-list_header {
        display: none;
    }

    .raum-pf-list_row {
        flex-wrap: wrap;
        padding: var(--space-18) 0;
        gap: 0;
    }

    .raum-pf-slide_more {
        margin-top: 0;
    }

    .raum-pf-list_row {
        align-items: stretch;
        text-align: left;
        margin-bottom: var(--space-24);
    }

    .raum-pf-list_col {
        padding: 0;
    }

    .raum-pf-list_col_name {
        width: var(--space-120);
        flex: 0 0 var(--space-120);
    }

    .raum-pf-list_thumb {
        width: 100%;
        height: auto;
    }

    .raum-pf-list_thumb img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: initial;
    }

    .raum-pf-list_text_wrap {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        padding-left: var(--space-12);
        gap: var(--space-8);
        justify-content: space-between;
    }

    .raum-pf-list_text_top {
        display: flex;
        align-items: center;
        gap: var(--space-8);
        min-width: 0;
    }

    .raum-pf-list_text_meta {
        display: flex;
        align-items: center;
        column-gap: var(--space-12);
        row-gap: var(--space-2);
        flex-wrap: wrap;
    }

    .raum-pf-list_col_title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .raum-pf-list_title {
        display: block;
        width: 100%;
        padding-left: 0;
        font-size: var(--space-13);
        box-sizing: border-box;
        text-align: left;
    }

    .raum-pf-list_col_year,
    .raum-pf-list_col_program,
    .raum-pf-list_col_area {
        width: auto;
        flex: none;
        text-align: left;
        font-size: var(--space-12);
        color: var(--color-gray-500);
        padding: 0;
        margin: 0;
    }

    .raum-pf-list_col_award {
        flex: 0 0 auto;
        width: auto;
        padding: 0;
        margin: 0;
    }

    .raum-pf-list_col_area:empty,
    .raum-pf-list_col_year:empty {
        display: none;
    }

    .raum-pf-list_col_year::before { content: 'Year '; font-weight: var(--fw-500); color: var(--color-gray-600); }
    .raum-pf-list_col_area::before { content: 'Area '; font-weight: var(--fw-500); color: var(--color-gray-600); }

    .raum-pf-list_col_program {
        display: none;
    }
}

@media (max-width: 480px) {

    .raum-pf-top_slider_arrow {
        display: none;
    }

    .raum-pf-slider_arrow {
        display: none;
    }

    .raum-pf-slide_overlay {
        padding: var(--space-12);
    }

    .raum-pf-filter_panel {
        min-width: var(--space-260);
        padding: var(--space-16);
    }

    .raum-pf-filter_years {
        gap: var(--space-10);
    }

    .raum-pf-filter_area_btn {
        padding: var(--space-7) var(--space-16);
    }

    #bo_portfolio #bo_cate_ul a {
        padding: var(--space-5) var(--space-12);
    }

    .raum-pf-grid {
        gap: var(--cv-portfolio-44);
    }

    .raum-pf-card_text {
        padding: var(--space-8) 0 var(--space-22);
    }

    .raum-pf-list_thumb {
        width: 100%;
        height: auto;
    }

    .raum-pf-list_col_year,
    .raum-pf-list_col_area,
    .raum-pf-list_col_award {
        font-size: var(--space-12);
    }

}


/* =========================
   라이트박스 (원본 이미지 보기)
========================= */
.raum-pf-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-99999);
    background: rgba(var(--color-black-rgb), 0.9);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.raum-pf-lightbox.active {
    display: flex;
}

.raum-pf-lightbox_close {
    position: absolute;
    top: var(--cv-portfolio-45);
    right: var(--cv-portfolio-45);
    width: var(--cv-portfolio-46);
    height: var(--cv-portfolio-46);
    background: none;
    border: none;
    cursor: pointer;
    z-index: var(--z-1);
    padding: 0;
}

.raum-pf-lightbox_close::before,
.raum-pf-lightbox_close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: var(--space-2);
    background: var(--base-color-white);
    transition: opacity var(--transition-snappy);
}

.raum-pf-lightbox_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.raum-pf-lightbox_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.raum-pf-lightbox_close:hover::before,
.raum-pf-lightbox_close:hover::after {
    opacity: var(--op-06);
}

.raum-pf-lightbox_img {
    max-width: var(--pf-lightbox-max-w);
    max-height: var(--pf-lightbox-max-h);
    object-fit: contain;
    cursor: default;
    animation: raum-pf-lightbox_in var(--transition-swift);
}

#raum-pf-view img:not(.raum-pf-lightbox_img),
#raum-pf-view .raum-pf-slider_slide,
#raum-pf-view .raum-pf-photo_main_slide {
    cursor: zoom-in;
}

#raum-pf-view .raum-pf-slider_arrow svg:not(._),
#raum-pf-view .raum-pf-related_arrow svg:not(._),
#raum-pf-view .raum-pf-photo_arrow svg:not(._) {
    cursor: pointer;
}

/* ========== [NEW] 본문 섹션 ========== */
.raum-pf-view_content {
    padding: var(--cv-portfolio-47) var(--cv-portfolio-48) var(--cv-portfolio-47) 0;
}

@media (max-width: 1024px) {
    .raum-pf-view_content {
        padding: var(--cv-portfolio-47) 0;
    }

    .raum-pf-view_title {
        font-size: var(--space-22);
        line-height: var(--lh-13);
    }

    .raum-pf-content_body {
        line-height: var(--lh-16);
    }

    .raum-pf-content_body p {
        margin: 0 0 1em;
    }

    .raum-pf-photo_section_title {
        font-size: var(--space-14);
        padding-bottom: var(--space-8);
        margin: 0 0 var(--space-12);
    }

    .raum-pf-info_label {
        min-width: 4em;
        font-size: var(--space-12);
    }

    .raum-pf-info_value {
        font-size: var(--space-13);
    }

    .raum-pf-related_card_title {
        font-size: var(--space-13);
    }

    .raum-pf-photo_section {
        margin-bottom: var(--space-32);
    }

    .raum-pf-info_tbl {
        width: 100%;
        margin: 0;
    }

    .raum-pf-info_label {
        min-width: var(--space-72);
    }

    .raum-pf-btn_list {
        min-height: var(--space-44);
    }

    #raum-pf-view .raum-pf-photo_arrow {
        display: none;
    }
}

.raum-pf-content_body {
    font-size: var(--cv-portfolio-49);
    line-height: var(--lh-19);
    color: var(--color-gray-600);
    word-break: keep-all;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

@media (max-width: 1024px) {
    .raum-pf-content_body {
        line-height: var(--lh-15);
    }

    .raum-pf-content_body p {
        margin: 0 0 0.8em;
    }
}

.raum-pf-content_body p {
    margin: 0 0 1.5em;
}

.raum-pf-content_body p:last-child {
    margin-bottom: 0;
}

/* ========== [NEW] 프로젝트 정보 테이블 (3열) ========== */
.raum-pf-view_info_table {
    padding: 0;
    
}

.raum-pf-info_tbl {
    --pf-tbl-gap-min: 0.25rem;
    --pf-tbl-gap-pref: 0.4vw;
    --pf-tbl-gap-max: 0.4375rem;
    --pf-tbl-gap: clamp(var(--pf-tbl-gap-min), var(--pf-tbl-gap-pref), var(--pf-tbl-gap-max));
    width: calc(100% + var(--pf-tbl-gap) * 2);
    margin: calc(var(--pf-tbl-gap) * -1) calc(var(--pf-tbl-gap) * -1);
    border-collapse: separate;
    border-spacing: var(--pf-tbl-gap);
    background: var(--base-color-white);
}

@media (max-width: 1024px) {
    .raum-pf-info_tbl {
        width: 100%;
        margin: 0;
        border-spacing: 0;
    }
}

.raum-pf-info_tbl tr {
    border: none;
}

.raum-pf-info_tbl .raum-pf-info_group {
    width: 33.333%;
    padding: var(--cv-portfolio-50) var(--cv-portfolio-51);
    background: var(--color-hex-f5f5f3);
    border: none;
    vertical-align: middle;
}

.raum-pf-info_label {
    display: inline-block;
    min-width: 5em;
    margin-right: var(--cv-portfolio-52);
    font-size: var(--cv-portfolio-53);
    font-weight: var(--fw-400);
    color: var(--color-gray-500);
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
}

.raum-pf-info_value {
    font-size: var(--cv-portfolio-7);
    font-weight: var(--fw-600);
    color: var(--base-color-black);
}

@media (max-width: 768px) {
    .raum-pf-info_tbl,
    .raum-pf-info_tbl tbody {
        display: block;
        width: 100%;
    }

    .raum-pf-info_tbl tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-6);
        width: 100%;
    }

    .raum-pf-info_tbl .raum-pf-info_group {
        display: flex;
        align-items: center;
        width: 100%;
        flex: 0 0 100%;
        padding: var(--cv-portfolio-54);
        box-sizing: border-box;
    }

    #raum-pf-view .raum-pf-photo_main_wrap {
        height: var(--space-160);
    }
}

@media (max-width: 480px) {
    .raum-pf-info_tbl .raum-pf-info_group {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* ========== [NEW] 이미지 섹션 (외부사진/내부사진/도면) ========== */
.raum-pf-photo_section {
    padding: var(--cv-portfolio-23) 0;
}

/* Matterport 3D Tour (Diagram & Plan 하단) */
.raum-pf-matterport_section {
    padding: var(--cv-portfolio-23) 0;
}

.raum-pf-matterport {
    width: 100%;
    background: var(--color-gray-950);
    overflow: hidden;
}

.raum-pf-matterport iframe {
    display: block;
    width: 100%;
    height: var(--cv-portfolio-55);
    border: 0;
}

/* Matterport URL 입력 (write 페이지) */
.raum-pf-w_matterport_row {
    width: 100%;
}

.raum-pf-w_matterport_row .raum-pf-w_info_field_input {
    flex: 1;
}

.raum-pf-photo_section_title {
    font-family: var(--font-KR-base);
    font-size: var(--cv-portfolio-49);
    font-weight: var(--fw-400);
    color: var(--base-color-black);
    padding-bottom: var(--cv-portfolio-56);
    border-bottom: var(--px-2) solid var(--base-color-black);
    margin: 0 0 var(--cv-portfolio-57);
}

#raum-pf-view .raum-pf-photo_main_wrap {
    position: relative;
    display: block;
    width: 100%;
    height: var(--cv-portfolio-58);
}

@media (max-width: 1024px) {
    #raum-pf-view .raum-pf-photo_main_wrap {
        position: relative;
        height: 0;
        padding-top: 100%;
    }

    #raum-pf-view .raum-pf-photo_main_viewport {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
    }

    .raum-pf-matterport iframe {
        height: var(--space-260);
    }
}

#raum-pf-view .raum-pf-photo_main_viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 1024px) {
    #raum-pf-view .raum-pf-photo_main_viewport {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
    }
}

#raum-pf-view .raum-pf-photo_main_track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    transition: transform var(--transition-medium);
}

#raum-pf-view .raum-pf-photo_main_slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#raum-pf-view .raum-pf-photo_main_slide img {
    display: block;
    /* width/height/background: JS 3분기 주입 */
}


#raum-pf-view .raum-pf-photo_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-5);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    opacity: var(--op-1);
    transition: color var(--transition-snappy);
}

#raum-pf-view .raum-pf-photo_arrow:hover {
    color: var(--base-color-black);
}

#raum-pf-view .raum-pf-photo_arrow svg {
    width: var(--cv-portfolio-1);
    height: auto;
    display: block;
}

@media (max-width: 1024px) {
    #raum-pf-view .raum-pf-photo_arrow {
        display: none;
    }
}

#raum-pf-view .raum-pf-photo_prev {
    left: calc(var(--padding-pc) * -1 - var(--cv-portfolio-20));
}

#raum-pf-view .raum-pf-photo_next {
    right: calc(var(--padding-pc) * -1 - var(--cv-portfolio-20));
}


.raum-pf-photo_thumbs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: var(--cv-portfolio-5);
    padding: var(--cv-portfolio-5) 0 var(--cv-portfolio-8);
    border-top: 1px solid var(--base-color-black);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    min-width: 0;
    cursor: grab;
}

.raum-pf-photo_thumbs.dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

/* 썸네일 줄 — 스크롤바는 basic.css 전역 규칙으로 감춘다.
   대신 오른쪽 끝 그라디언트로 「더 있다」를 알린다. 끝까지 밀면 사라진다. */
.raum-pf-photo_thumbs_wrap {
    position: relative;
    width: 100%;
}

.raum-pf-photo_thumbs_wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--cv-portfolio-fade);
    background: linear-gradient(to right, rgba(var(--color-white-rgb), var(--op-0)), rgba(var(--color-white-rgb), var(--op-095)));
    pointer-events: none;
    opacity: var(--op-1);
    transition: opacity var(--transition-snappy);
}

.raum-pf-photo_thumbs_wrap.is-end::after {
    opacity: var(--op-0);
}

.raum-pf-photo_thumb {
    flex: 0 0 20%;
    box-sizing: border-box;
    height: var(--cv-portfolio-59);
    cursor: pointer;
    opacity: var(--op-055);
    transition: opacity var(--transition-snappy);
    overflow: hidden;
    outline: none;
    padding: 0 var(--cv-portfolio-60);
    border-left: 1px solid var(--base-color-black);
    border-right: 1px solid var(--base-color-black);
    background-origin: content-box;
    background-clip: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
}

@media (max-width: 1024px) {
    .raum-pf-photo_thumb {
        flex: 0 0 33.333%;
        height: var(--space-80);
    }
}

@media (max-width: 480px) {
    .raum-pf-photo_thumb {
        flex: 0 0 50%;
        height: var(--space-70);
    }
}

.raum-pf-photo_thumb + .raum-pf-photo_thumb {
    border-left: none;
}

.raum-pf-photo_thumb.active {
    opacity: var(--op-1);
}

.raum-pf-photo_thumb:hover {
    opacity: var(--op-085);
}

/* 썸네일은 좌우 padding 을 살려야 해서 absolute 대신 flex 중앙 정렬로 맞춘다.
   맞춤 기준은 .raum-pf-fitbox 와 같다 — 높이를 채우고 세로 사진은 좌우에 여백이 생긴다. */
.raum-pf-photo_thumb img {
    display: block;
    width: auto;
    height: 100%;
    flex: 0 0 auto;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.raum-pf-photo_thumb:focus,
.raum-pf-photo_thumb:focus-visible {
    outline: none;
}

/* ========== [NEW] CM Works 링크 블록 ========== */
/* ========== 프로젝트 링크 블록 (배너 N개 세로 스택) ========== */
.raum-pf-project_link_section {
    padding: var(--cv-portfolio-47) 0;
    display: flex;
    flex-direction: column;
    gap: var(--cv-portfolio-5);
}

/* 부모: flex-wrap — ul/텍스트 기준 width, 좁아지면 자동 줄바꿈(세로) */
.raum-pf-project_link_block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cv-portfolio-22);
    padding: var(--cv-portfolio-21);
    background: var(--color-gray-100);
    text-decoration: none;
    color: var(--base-color-black);
    transition: background var(--transition-fast);
}

a.raum-pf-project_link_block:link,
a.raum-pf-project_link_block:visited {
    color: var(--base-color-black);
}

.raum-pf-project_link_block:hover {
    background: var(--color-gray-150);
}

/* 자식1: 사진 영역(ul) — 기준 width, flex-wrap으로 4열↔2열 자연 전환 */
.raum-pf-project_link_thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-portfolio-61);
    flex: 1 1 clamp(16rem, 45%, 36rem);
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* li — 기준 width(4열) + 프레임 height, background로 이미지 cover (비율 유지, 꽉 참) */
.raum-pf-project_link_thumb {
    flex: 1 1 calc(25% - var(--cv-portfolio-61) * 0.75);
    min-width: 0;
    height: var(--cv-portfolio-62);
    background: var(--thumb-bg) center / cover no-repeat;
    filter: grayscale(100%);
    transition: filter var(--transition-fast);
}

.raum-pf-project_link_block:hover .raum-pf-project_link_thumb {
    filter: grayscale(0%);
}

/* 768px 이하 — 사진 2x2 (마지막 보루, 1열 없음) */
@media (max-width: 768px) {
    .raum-pf-project_link_thumb {
        flex: 1 1 calc(50% - var(--cv-portfolio-61) / 2);
    }
}

/* 자식2: 텍스트 영역 — 기준 width, 좁아지면 자연 줄바꿈 */
.raum-pf-project_link_text {
    flex: 1 1 clamp(12rem, 25%, 20rem);
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-size: var(--cv-portfolio-63);
    color: var(--signature-color);
    line-height: var(--lh-14);
}

.raum-pf-project_link_name {
    font-weight: var(--fw-600);
    margin-right: var(--space-4);
}

/* ========== Related Contents (3열 카드 그리드) ========== */
.raum-pf-related_wrap {
    position: relative;
}

.raum-pf-related_arrow,
.raum-pf-related_arrow:link,
.raum-pf-related_arrow:visited {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    transition: color var(--transition-snappy);
    text-decoration: none;
}

.raum-pf-related_arrow:hover {
    color: var(--base-color-black);
}

.raum-pf-related_arrow svg {
    width: var(--cv-portfolio-1);
    height: auto;
    display: block;
}

.raum-pf-related_arrow--prev {
    left: calc(var(--padding-pc) * -1 - var(--cv-portfolio-20));
}

.raum-pf-related_arrow--next {
    right: calc(var(--padding-pc) * -1 - var(--cv-portfolio-20));
}

.raum-pf-related_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-portfolio-5);
}

/* [NEW] 슬라이드 viewport / track */
.raum-pf-related_viewport {
    overflow: hidden;
    width: 100%;
}

.raum-pf-related_track {
    display: flex;
    gap: var(--cv-portfolio-5);
    will-change: transform;
}

.raum-pf-related_track .raum-pf-related_card {
    flex: 0 0 calc((100% - var(--cv-portfolio-5) * 2) / 3);
    min-width: 0;
}

@media (max-width: 1200px) {
    .raum-pf-related_track .raum-pf-related_card {
        flex: 0 0 calc((100% - var(--cv-portfolio-5)) / 2);
    }
}

@media (max-width: 768px) {
    .raum-pf-related_track .raum-pf-related_card {
        flex: 0 0 100%;
    }
}

button.raum-pf-related_arrow {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

button.raum-pf-related_arrow:disabled {
    opacity: var(--op-025);
    cursor: not-allowed;
}

.raum-pf-related_card {
    flex: 0 1 calc(33.333% - var(--cv-portfolio-5) * 2 / 3);
    min-width: 0;
    text-decoration: none;
    color: var(--base-color-white);
    overflow: hidden;
}

.raum-pf-related_card_img {
    position: relative;
    width: 100%;
    height: var(--cv-portfolio-64);
    overflow: hidden;
}

.raum-pf-related_card_img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.raum-pf-related_card:hover .raum-pf-related_card_img img {
    transform: scale(1.05);
}

.raum-pf-related_card_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-black-rgb), 0.35);
}

.raum-pf-related_card_info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--cv-portfolio-65);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    z-index: var(--z-1);
}

.raum-pf-related_card_title {
    font-size: var(--cv-portfolio-49);
    font-weight: var(--fw-700);
    color: var(--base-color-white);
    display: block;
}

.raum-pf-related_card_meta {
    font-size: var(--cv-portfolio-66);
    font-weight: var(--fw-400);
    color: var(--base-color-white);
    display: block;
}

@media (max-width: 768px) {
    .raum-pf-related_card {
        flex: 0 1 calc(50% - var(--cv-portfolio-5) / 2);
    }
}

@media (max-width: 480px) {
    .raum-pf-related_card {
        flex: 0 1 100%;
    }
}

/* ========== [NEW] 글쓰기 — 이미지 그리드 (5장) ========== */
.raum-pf-w_photo_grid {
    display: flex; flex-wrap: wrap;
    
    gap: var(--cv-portfolio-67);
    margin-top: var(--cv-portfolio-57);
}

.raum-pf-w_photo_grid > * { flex: 0 1 calc((100% - var(--cv-portfolio-68) * 4) / 5); box-sizing: border-box; }


/* ========== [NEW] 글쓰기 — 프로젝트 정보 14필드 ========== */
.raum-pf-w_info_fields {
    display: flex; flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--cv-portfolio-16) var(--cv-portfolio-69);
}

.raum-pf-w_info_field_row {
    display: flex;
    align-items: stretch;
    gap: var(--cv-portfolio-70);
    padding: 0;
}

.raum-pf-w_info_field_label {
    display: flex;
    align-items: center;
    font-size: var(--cv-portfolio-71);
    font-weight: var(--fw-600);
    color: var(--color-gray-600);
    white-space: nowrap;
    min-width: var(--space-88);
    flex-shrink: 0;
    padding: var(--cv-portfolio-72) 0;
}

.raum-pf-w_info_field_input {
    flex: 1;
    border: none;
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.08);
    background: transparent;
    font-size: var(--cv-portfolio-71);
    color: var(--color-gray-380);
    padding: var(--cv-portfolio-72) 0;
    outline: none;
    transition: border-color var(--transition-snappy), color var(--transition-snappy);
}

.raum-pf-w_info_field_input::placeholder {
    color: var(--color-gray-400);
}

.raum-pf-w_info_field_input:focus {
    color: var(--base-color-black);
    border-bottom-color: var(--signature-color);
}

@media (max-width: 768px) {
    .raum-pf-w_info_fields {
        flex-direction: column;
    }
}

/* ========== [NEW] 글쓰기 — 링크 + 배너 옵션 ========== */
.raum-pf-w_link_rows {
    display: flex;
    flex-direction: column;
    gap: var(--cv-portfolio-5);
}

.raum-pf-w_link_row {
    display: flex;
    flex-direction: column;
    gap: var(--cv-portfolio-73);
}

.raum-pf-w_link_options {
    display: flex;
    align-items: center;
    gap: var(--cv-portfolio-8);
    padding-left: calc(5.5rem + var(--cv-portfolio-70));
    flex-wrap: wrap;
}

.raum-pf-w_radio_label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    cursor: pointer;
    font-size: var(--cv-portfolio-71);
    color: var(--color-gray-400);
    white-space: nowrap;
    user-select: none;
    line-height: var(--lh-1);
    transition: color var(--transition-snappy);
}

.raum-pf-w_radio_label input[type="radio"] {
    width: var(--space-12);
    height: var(--space-12);
    accent-color: var(--signature-color);
    cursor: pointer;
    margin: 0;
}

.raum-pf-w_radio_label:has(input:checked) {
    color: var(--base-color-black);
}

.raum-pf-w_link_label_input {
    flex: 1;
    min-width: var(--cv-portfolio-17);
}

@media (max-width: 768px) {
    .raum-pf-w_link_options {
        padding-left: 0;
    }
}

/* ========== [NEW] 글쓰기 — Matterport iframe 미리보기 ========== */
.raum-pf-w_matterport_preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: var(--cv-portfolio-74);
    max-height: var(--cv-portfolio-75);
    margin-top: var(--cv-portfolio-52);
    background: var(--color-gray-100);
    border: 1px solid rgba(var(--color-black-rgb), 0.08);
    overflow: hidden;
}

.raum-pf-w_matterport_preview iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.raum-pf-w_matterport_preview[data-empty="1"] iframe {
    visibility: hidden;
}

.raum-pf-w_matterport_empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    font-size: var(--cv-portfolio-76);
    pointer-events: none;
}

.raum-pf-w_matterport_preview[data-empty="0"] .raum-pf-w_matterport_empty {
    display: none;
}

/* ========== [NEW] 글쓰기 — 관련 컨텐츠 (패널 / 칩 / 모달) ========== */
.raum-pf-w_related_panel {
    display: flex;
    flex-direction: column;
    gap: var(--cv-portfolio-52);
}

.raum-pf-w_related_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
}

.raum-pf-w_related_title {
    font-size: var(--cv-portfolio-77);
    font-weight: var(--fw-600);
    color: var(--color-gray-700);
}

.raum-pf-w_related_count {
    color: var(--color-gray-400);
    font-weight: var(--fw-400);
}

.raum-pf-w_related_open {
    padding: var(--cv-portfolio-78) var(--cv-portfolio-5);
    border: 1px solid var(--base-color-black);
    background: transparent;
    color: var(--base-color-black);
    font-size: var(--cv-portfolio-53);
    cursor: pointer;
    transition: all var(--transition-snappy);
}

.raum-pf-w_related_open:hover {
    background: var(--signature-color);
    border-color: var(--signature-color);
    color: var(--base-color-white);
}

.raum-pf-w_related_chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-20);
    padding: var(--space-15);
    background: var(--color-gray-50);
    border: 1px dashed rgba(var(--color-black-rgb), 0.08);
}

.raum-pf-w_related_chips > * {
    flex: 0 1 calc((100% - var(--space-20) * 4) / 5);
    box-sizing: border-box;
    overflow: hidden;
}

.raum-pf-w_related_chips.raum-pf-w_related_chips--img > * {
    flex: 0 1 calc((100% - var(--space-20) * 3) / 4);
}

.raum-pf-w_related_chips[data-empty="1"] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: var(--space-25) var(--space-15);
}

.raum-pf-w_related_empty {
    color: var(--color-gray-400);
    font-size: var(--cv-portfolio-53);
}

.raum-pf-w_related_chip {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    min-width: 0;
    background: var(--base-color-white);
    border: 1px solid rgba(var(--color-black-rgb), 0.1);
    font-size: var(--cv-portfolio-53);
    color: var(--color-gray-700);
    overflow: hidden;
}

.raum-pf-w_related_chip_actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-10);
}

.raum-pf-w_related_chip_label {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-10);
    min-width: 0;
    background: var(--signature-color);
    color: var(--base-color-white);
}

.raum-pf-w_related_chip_num {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.75);
    font-weight: var(--fw-600);
    min-width: var(--space-18);
}

.raum-pf-w_related_chip_text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.raum-pf-w_related_chip_move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-20);
    height: var(--space-20);
    padding: 0;
    border: 1px solid rgba(var(--color-black-rgb), 0.12);
    border-radius: var(--space-3);
    background: transparent;
    color: var(--color-gray-600);
    cursor: pointer;
    line-height: var(--lh-1);
    transition: all var(--transition-quick);
}

.raum-pf-w_related_chip_move svg {
    width: var(--space-12);
    height: var(--space-12);
    display: block;
}

.raum-pf-w_related_chip_move:hover:not(:disabled) {
    color: var(--base-color-white);
    background: var(--signature-color);
    border-color: var(--signature-color);
}

.raum-pf-w_related_chip_move:disabled {
    opacity: var(--op-025);
    cursor: not-allowed;
}

.raum-pf-w_related_chip_remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-20);
    height: var(--space-20);
    border: 1px solid rgba(var(--color-black-rgb), 0.12);
    border-radius: var(--space-3);
    background: transparent;
    color: var(--color-gray-600);
    cursor: pointer;
    font-size: var(--space-14);
    line-height: var(--lh-1);
    margin-left: auto;
    transition: all var(--transition-quick);
}

.raum-pf-w_related_chip_remove:hover {
    color: var(--base-color-white);
    background: var(--signature-color);
    border-color: var(--signature-color);
}

.raum-pf-w_modal_award_label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-8);
    cursor: pointer;
    font-size: var(--cv-portfolio-76);
    color: var(--color-gray-700);
    white-space: nowrap;
    user-select: none;
}

.raum-pf-w_modal_award_label input[type="checkbox"] {
    width: var(--space-14);
    height: var(--space-14);
    accent-color: var(--signature-color);
    cursor: pointer;
}

/* 모달 — [hidden] 속성 + specificity 강화로 우선순위 확보 */
.raum-pf-w_modal[hidden][hidden] {
    display: none;
}

.raum-pf-w_modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-9999);
    display: flex;
    align-items: center;
    justify-content: center;
}

.raum-pf-w_modal_backdrop {
    position: absolute;
    inset: 0;
    background: var(--pf-modal-backdrop);
}

.raum-pf-w_modal_panel {
    position: relative;
    width: var(--pf-modal-w);
    height: var(--pf-modal-h);
    background: var(--base-color-white);
    display: flex;
    flex-direction: column;
    box-shadow: 0 var(--space-20) var(--space-48) var(--pf-modal-shadow);
}

.raum-pf-w_modal_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cv-portfolio-79) var(--cv-portfolio-80);
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.08);
}

.raum-pf-w_modal_title {
    margin: 0;
    font-size: var(--cv-portfolio-81);
    font-weight: var(--fw-600);
    color: var(--base-color-black);
}

.raum-pf-w_modal_close {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-gray-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.raum-pf-w_modal_close:hover {
    color: var(--signature-color);
}

.raum-pf-w_modal_filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-portfolio-68);
    padding: var(--cv-portfolio-82) var(--cv-portfolio-80);
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.06);
}

.raum-pf-w_modal_search {
    flex: 1 1 var(--pf-modal-search-basis);
    border: 1px solid rgba(var(--color-black-rgb), 0.1);
    padding: var(--cv-portfolio-83) var(--cv-portfolio-18);
    font-size: var(--cv-portfolio-76);
    outline: none;
}

.raum-pf-w_modal_search:focus {
    border-color: var(--signature-color);
}

.raum-pf-w_modal_cate {
    border: 1px solid rgba(var(--color-black-rgb), 0.1);
    padding: var(--cv-portfolio-83) var(--cv-portfolio-18);
    font-size: var(--cv-portfolio-76);
    background: var(--base-color-white);
    min-width: var(--cv-portfolio-84);
}

.raum-pf-w_modal_grid {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--space-20);
    padding: var(--space-25);
}

.raum-pf-w_modal_grid > .raum-pf-w_modal_card {
    flex: 0 1 calc((100% - var(--space-20) * 4) / 5);
    box-sizing: border-box;
}

.raum-pf-w_modal_grid_empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-gray-400);
    padding: var(--space-32) 0;
}

.raum-pf-w_modal_card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(var(--color-black-rgb), 0.08);
    cursor: pointer;
    transition: border-color var(--transition-snappy), opacity var(--transition-snappy);
    overflow: hidden;
}

.raum-pf-w_modal_card.is-checked {
    border-color: var(--signature-color);
}

.raum-pf-w_modal_card.is-disabled {
    opacity: var(--op-04);
    cursor: not-allowed;
}

.raum-pf-w_modal_card input[type="checkbox"] {
    position: absolute;
    top: var(--space-7-alt);
    right: var(--space-7-alt);
    z-index: var(--z-2);
    width: var(--space-16);
    height: var(--space-16);
    accent-color: var(--signature-color);
    cursor: pointer;
}

/* CSS variable injection — 이미지 첨부 슬롯/모달 미리보기 (.raum-bg-cover) */
.raum-bg-cover {
    background-image: var(--bg-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 첨부 삭제 체크박스 — 휴지통 버튼(.raum-pf-w_img_del_btn) JS가 자동 체크하는 데이터 전송용 hidden input */
.raum-pf-w_file_del_chk {
    display: none;
}

/* 스크린리더 전용 텍스트 (시각 숨김 + 접근성 보존) — 훅 규칙 B 구현 2 패턴 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.raum-pf-w_modal_card_thumb_wrap {
    position: relative;
    width: 100%;
    height: clamp(6rem, 10vw, 10rem);
    background-image: var(--bg-thumb-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-gray-100);
    overflow: hidden;
}

.raum-pf-w_modal_card_thumb {
    display: none;
}

.raum-pf-w_modal_card_thumb--empty {
    background-color: var(--color-gray-100);
}

.raum-pf-w_modal_card_meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-12);
}

.raum-pf-w_modal_card_cate {
    font-size: var(--cv-portfolio-85);
    color: var(--color-gray-400);
}

.raum-pf-w_modal_card_title {
    font-size: var(--cv-portfolio-86);
    color: var(--base-color-black);
    line-height: var(--lh-14);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
}

.raum-pf-w_modal_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cv-portfolio-87) var(--cv-portfolio-80);
    border-top: 1px solid rgba(var(--color-black-rgb), 0.08);
}

.raum-pf-w_modal_selected {
    color: var(--color-gray-600);
    font-size: var(--cv-portfolio-7);
}

.raum-pf-w_modal_apply {
    padding: var(--cv-portfolio-78) var(--cv-portfolio-80);
    border: 1px solid var(--base-color-black);
    background: var(--base-color-black);
    color: var(--base-color-white);
    cursor: pointer;
    font-size: var(--cv-portfolio-7);
    transition: all var(--transition-snappy);
}

.raum-pf-w_modal_apply:hover {
    background: var(--signature-color);
    border-color: var(--signature-color);
}

/* ========== [NEW] 글쓰기 — 본문 textarea ========== */
.raum-pf-w_content_textarea {
    display: block;
    width: 100%;
    height: var(--space-400);
    border: 1px dashed rgba(var(--color-black-rgb), 0.15);
    background: transparent;
    font-size: var(--cv-portfolio-49);
    line-height: var(--lh-19);
    font-family: var(--font-KR-base);
    color: var(--color-gray-600);
    padding: var(--cv-portfolio-88);
    outline: none;
    box-sizing: border-box;
    resize: vertical;
}

.raum-pf-w_content_textarea::placeholder {
    color: var(--color-gray-400);
}

.raum-pf-w_content_textarea:focus {
    border-color: var(--base-color-black);
}

/* ========== [NEW] 프로젝트명 + 리스트 슬라이드 노출 (한 줄) ========== */

/* ========== [NEW] 슬라이드 설정 (2열) ========== */

/* ========== [NEW] 분류/슬라이드노출 + 본문 (2열) ========== */
.raum-pf-w_meta_content_row {
    display: flex;
    gap: var(--cv-portfolio-89);
    align-items: flex-start;
    margin-top: var(--cv-portfolio-5);
}

.raum-pf-w_meta_left {
    flex-shrink: 0;
    width: var(--cv-portfolio-90);
    display: flex;
    flex-direction: column;
    gap: var(--cv-portfolio-8);
}

.raum-pf-w_meta_right {
    flex: 1;
}

.raum-pf-w_cate_select--left {
    margin: 0;
    max-width: none;
    text-align: left;
}

@media (max-width: 768px) {
    .raum-pf-w_meta_content_row {
        flex-direction: column;
    }

    .raum-pf-w_meta_left {
        width: 100%;
        flex-direction: row;
        align-items: center;
    }
}

/* ========== [NEW] 슬라이드 섹션 ========== */

.raum-pf-w_slide_item {
    display: flex;
    flex-direction: column;
    gap: var(--cv-portfolio-91);
}

.raum-pf-w_slide_rank_num {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.1);
    background: transparent;
    font-size: var(--cv-portfolio-92);
    color: var(--base-color-black);
    text-align: center;
    padding: var(--cv-portfolio-93) 0;
    outline: none;
}

.raum-pf-w_slide_rank_num:focus {
    border-bottom-color: var(--base-color-black);
}

.raum-pf-w_slide_rank_num::placeholder {
    color: var(--color-gray-400);
}

/* ========== [NEW] 슬라이드 그리드 5열 ========== */
/* ========== [NEW] 사진 그리드 10장 → 5열 2줄 (썸네일 가시성 확보) ========== */
/* ========== [NEW] + 아이콘 ========== */
.raum-pf-w_upload_plus {
    position: relative;
    display: block;
    width: var(--cv-portfolio-94);
    height: var(--cv-portfolio-94);
}

.raum-pf-w_upload_plus::before,
.raum-pf-w_upload_plus::after {
    content: "";
    position: absolute;
    background: rgba(var(--color-black-rgb), 0.2);
    transition: background var(--transition-fast);
}

.raum-pf-w_upload_plus::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: var(--px-2);
    transform: translateY(-50%);
}

.raum-pf-w_upload_plus::after {
    top: 0;
    left: 50%;
    width: var(--px-2);
    height: 100%;
    transform: translateX(-50%);
}

.raum-pf-w_img_label:hover .raum-pf-w_upload_plus::before,
.raum-pf-w_img_label:hover .raum-pf-w_upload_plus::after {
    background: rgba(var(--color-black-rgb), 0.5);
}

/* ========== [NEW] 본문 자동 높이 + 밝은회색 배경 ========== */
.raum-pf-w_content_textarea.raum-pf-w_content_textarea--auto {
    height: var(--cv-portfolio-95);
    resize: none;
    overflow: hidden;
    background: rgba(var(--color-black-rgb), 0.03);
    border: none;
    border-radius: var(--px-3);
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.raum-pf-w_content_textarea.raum-pf-w_content_textarea--auto:focus {
    border: none;
}

/* ========== [NEW] 정보 필드 3열 ========== */
/* ========== [NEW] 반응형 ========== */
@media (max-width: 768px) {
    .raum-pf-write_page {
        flex-direction: column;
    }

    .raum-pf-write_sidebar {
        position: relative;
        width: 100%;
        height: auto;
        padding: var(--cv-portfolio-96);
    }

    .raum-pf-write_logo {
        font-size: var(--cv-portfolio-97);
    }
}

@media (max-width: 480px) {
    .raum-pf-w_info_fields--3col {
        flex-direction: column;
    }
}

/* =========================
   관리자 하단 플로팅 바 (Liquid Glass)
========================= */
.raum-pf-admin_bar {
    position: fixed;
    bottom: var(--cv-portfolio-21);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-999);
    display: flex;
    align-items: center;
    gap: var(--cv-portfolio-18);
    padding: var(--cv-portfolio-78) var(--cv-portfolio-98);
    background: linear-gradient(
        135deg,
        rgba(var(--color-white-rgb), 0.12) 0%,
        rgba(var(--color-white-rgb), 0.06) 50%,
        rgba(var(--color-white-rgb), 0.1) 100%
    );
    backdrop-filter: blur(var(--px-20)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--px-20)) saturate(1.4);
    border: 1px solid rgba(var(--color-white-rgb), 0.18);
    border-radius: var(--space-50);
    box-shadow:
        0 0.5rem 2rem rgba(var(--color-black-rgb), 0.15),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.15),
        inset 0 -1px 0 rgba(var(--color-black-rgb), 0.05);
}

/* 구분선 */
.raum-pf-admin_bar_divider {
    width: var(--width-1p);
    margin: 0 var(--cv-portfolio-99);
    height: var(--space-20);
    background: rgba(var(--color-white-rgb), 0.2);
    flex-shrink: 0;
}

/* 전체선택 */
.raum-pf-admin_bar_chk {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    color: var(--base-color-black);
    font-size: var(--space-14);
    font-weight: var(--fw-600);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.raum-pf-admin_bar_chk input[type="checkbox"] {
    position: absolute;
    opacity: var(--op-0);
    width: 0;
    height: 0;
}

.raum-pf-admin_bar_chk_box {
    position: relative;
    width: var(--space-18);
    height: var(--space-18);
    border: none;
    border-radius: 50%;
    background: rgba(var(--color-white-rgb), 0.18);
    transition: background var(--transition-snappy);
    flex-shrink: 0;
}

.raum-pf-admin_bar_chk_box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-7);
    height: var(--space-7);
    border-radius: 50%;
    background: var(--signature-color);
    transform: translate(-50%, -50%) scale(0);
    opacity: var(--op-0);
    transition: transform var(--transition-snappy), opacity var(--transition-quick);
}

.raum-pf-admin_bar_chk input[type="checkbox"]:checked + .raum-pf-admin_bar_chk_box {
    background: rgba(var(--color-white-rgb), 0.35);
}

.raum-pf-admin_bar_chk input[type="checkbox"]:checked + .raum-pf-admin_bar_chk_box::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--op-1);
}

@media (hover: hover) {
    .raum-pf-admin_bar_chk:hover .raum-pf-admin_bar_chk_box {
        background: rgba(var(--color-white-rgb), 0.3);
    }
}

/* 버튼 공통 */
.raum-pf-admin_bar_btn,
a.raum-pf-admin_bar_btn,
a.raum-pf-admin_bar_btn:link,
a.raum-pf-admin_bar_btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cv-portfolio-100);
    font-size: 0;
    line-height: var(--lh-0);
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

@media (hover: hover) {
    .raum-pf-admin_bar_btn:hover,
    a.raum-pf-admin_bar_btn:hover,
    a.raum-pf-admin_bar_btn:active {
        background: rgba(var(--color-white-rgb), 0.18);
        border-color: rgba(var(--color-white-rgb), 0.3);
        color: var(--signature-color);
    }
}

.raum-pf-admin_bar_btn[disabled],
.raum-pf-admin_bar_btn:disabled {
    opacity: var(--op-035);
    cursor: not-allowed;
    pointer-events: none;
}

.raum-pf-admin_bar_btn--settings svg {
    animation: raum-gear-spin var(--anim-spin-slow);
}

@keyframes raum-gear-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.raum-pf-admin_bar_btn--danger {
    color: rgba(255, 120, 120, 0.9);
    border-color: rgba(255, 120, 120, 0.2);
}

@media (hover: hover) {
    .raum-pf-admin_bar_btn--danger:hover {
        background: rgba(255, 80, 80, 0.15);
        border-color: rgba(255, 120, 120, 0.35);
        color: rgba(255, 120, 120, 0.9);
    }
}

/* ========== 보러가기 배너 설정 ========== */
.raum-pf-w_banner_title {
    font-size: var(--cv-portfolio-101);
    font-weight: var(--fw-600);
    color: var(--text-color);
    margin: 0 0 var(--cv-portfolio-8);
}

.raum-pf-w_section .raum-pf-w_related_panel + .raum-pf-w_related_panel {
    margin-top: var(--cv-portfolio-102);
}

/* 이미지 칩 변형 — 관련 컨텐츠 칩 위에 썸네일 영역 추가 */
.raum-pf-w_related_chip--img .raum-pf-w_related_chip_thumb {
    width: 100%;
    height: var(--cv-portfolio-103);
    background: var(--color-gray-200);
    overflow: hidden;
}

.raum-pf-w_related_chip--img .raum-pf-w_related_chip_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 모달 카드 이미지 변형 */