:root {
  --line: #e5e5e5;
  --serif: var(--font-noto-serif), "Noto Serif KR", Georgia, serif;
  --sans: var(--font-pretendard), Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --sans-m: var(--font-pretendard), Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --serif-m: var(--font-noto-serif), "Noto Serif KR", Georgia, serif;
  --sans-mv: var(--font-pretendard), Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --serif-mv: var(--font-noto-serif), "Noto Serif KR", Georgia, serif;
  --sans-wc: var(--font-pretendard), Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --text-main: #111111;
  --text-body: #363636;
  --text-main-m: #111111;
  --text-body-m: #363636;
  --text-main-mv: #111111;
  --text-body-mv: #363636;
  --text-main-wc: #111111;
  --text-body-wc: #363636;
}

.page-wrapper{
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px 100px;
    }

.section-label{
      font-family: Pretendard, "Noto Sans KR", sans-serif;
      font-size: 38px;
      font-weight: 400;
      line-height: 1.55;
      color: #111;
      letter-spacing: -0.02em;
      padding: 52px 0 24px;
      margin-bottom: 0;
      text-transform: none;
    }

.photo-area{
      width: 100%;
      aspect-ratio: 16 / 7;
      background-color: #e8e4de;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      overflow: hidden;
      position: relative;
    }

.photo-area img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

.headline-block{
      padding: 60px 0 60px;
      text-align: center;
    }

.headline-block p{
      font-family: var(--serif);
      font-size: clamp(20px, 2.6vw, 26px);
      font-weight: 500;
      line-height: 1.55;
      color: var(--text-main);
      letter-spacing: -0.01em;
      opacity: 0;
      transition: opacity 2.4s ease-out;
    }

.headline-block p.headline-visible{
      opacity: 1;
    }

.body-block{
      padding: 0;
    }

.body-section{
      margin-bottom: 28px;
    }

.body-section p{
      font-family: var(--sans);
      font-size: 19px;
      font-weight: 400;
      line-height: 1.85;
      color: var(--text-body);
      letter-spacing: -0.01em;
      text-align: center;
    }

.closing-block{
      margin-top: 36px;
      text-align: center;
    }

.closing-block__plain{
      font-family: var(--sans);
      font-size: 19px;
      font-weight: 400;
      line-height: 1.85;
      color: var(--text-body);
      letter-spacing: -0.01em;
      margin-bottom: 32px;
    }

.closing-block span{
      font-family: var(--sans);
      font-size: 19px;
      font-weight: 500;
      line-height: 2.0;
      color: var(--text-main);
      letter-spacing: -0.01em;
      background-color: #B3A087;
      padding: 2px 4px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

.page-wrapper-m{
      max-width: 480px;
      margin: 0 auto;
      padding: 0 0 80px;
    }

.section-label-m{
      font-family: var(--sans-m);
      font-size: 28px;
      font-weight: 400;
      line-height: 1.55;
      color: #111;
      letter-spacing: -0.02em;
      padding: 40px 20px 20px;
      margin-bottom: 8px;
    }

.photo-area-m{
      width: 100%;
      aspect-ratio: 16 / 8;
      background-color: #e8e4de;
      overflow: hidden;
      position: relative;
      display: block;
      line-height: 0;
      font-size: 0;
    }

.photo-area-m img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 0%;
      display: block;
      vertical-align: bottom;
    }

.headline-block-m{
      padding: 40px 20px 36px;
      text-align: center;
    }

.headline-block-m p{
      font-family: var(--serif-m);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.75;
      color: var(--text-main-m);
      letter-spacing: -0.01em;
      opacity: 0;
      transition: opacity 2.4s ease-out;
    }

.headline-block-m p.headline-visible-m{
      opacity: 1;
    }

.body-block-m{
      padding: 0 20px;
    }

.body-section-m{
      margin-bottom: 20px;
    }

.body-section-m p{
      font-family: var(--sans-m);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.9;
      color: var(--text-body-m);
      letter-spacing: -0.01em;
      text-align: center;
      word-break: keep-all;
    }

.closing-block-m{
      margin-top: 32px;
      text-align: center;
    }

.closing-block-m__plain{
      font-family: var(--sans-m);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.9;
      color: var(--text-body-m);
      letter-spacing: -0.01em;
      margin-bottom: 32px;
      word-break: keep-all;
    }

.closing-block-m span{
      font-family: var(--sans-m);
      font-size: 13px;
      font-weight: 500;
      line-height: 2.0;
      color: var(--text-main-m);
      letter-spacing: -0.01em;
      background-color: #B3A087;
      padding: 2px 4px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

.section-label{
      font-family: Pretendard, "Noto Sans KR", sans-serif;
      font-size: 38px;
      font-weight: 400;
      line-height: 1.55;
      color: #111;
      letter-spacing: -0.02em;
      padding: 52px 0 8px;
      margin-bottom: 20px;
      text-transform: none;
    }

.photo-area{
      width: 100%;
      aspect-ratio: 16 / 7;
      overflow: hidden;
      border-radius: 0;
      opacity: 1;
      transform: none;
      transition: none;
      margin-bottom: 52px;
      position: relative;
    }

.photo-area img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      display: block;
    }

.profile-grid{
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

.profile-right{
      display: flex;
      flex-direction: column;
      gap: 0;
    }

.career-list{
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 0;
    }

.career-list li{
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-body);
      letter-spacing: -0.01em;
    }

.career-list li::before{
      content: '';
      flex-shrink: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: var(--beige-dot);
      margin-top: 6px;
    }

.profile-name-block{
      margin-bottom: 8px;
    }

.profile-name-row{
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

.profile-name-ko{
      font-family: var(--serif);
      font-size: 36px;
      font-weight: 600;
      color: var(--text-main);
      letter-spacing: -0.02em;
    }

.profile-name-title{
      font-family: var(--sans);
      font-size: 18px;
      font-weight: 400;
      color: var(--text-main);
      letter-spacing: -0.01em;
    }

.page-title{
      font-family: Pretendard, "Noto Sans KR", sans-serif;
      font-size: 44px;
      font-weight: 400;
      line-height: 1.55;
      color: #111;
      letter-spacing: -0.02em;
      padding: 52px 0 8px;
      margin-bottom: 8px;
    }

.section-header{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 40px;
    }

.section-header-bar{
      width: 4px;
      height: 22px;
      background-color: var(--beige);
      flex-shrink: 0;
    }

.section-header-text{
      font-family: var(--sans);
      font-size: 20px;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: -0.01em;
    }

.category-block{
      margin-bottom: 52px;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

.category-block.visible{
      opacity: 1;
      transform: translateY(0);
    }

.category-title-row{
      display: flex;
      align-items: flex-start;
      margin-bottom: 0;
      border-bottom: 2px solid var(--beige);
      padding-bottom: 12px;
    }

.category-num{
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      background-color: var(--beige);
      padding: 3px 10px;
      letter-spacing: 0.02em;
      margin-right: 14px;
      flex-shrink: 0;
    }

.category-name{
      font-family: var(--sans);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: -0.01em;
    }

.cases-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 0;
    }

.case-item{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-family: var(--sans);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-body);
      letter-spacing: -0.01em;
      padding: 9px 16px 9px 0;
      min-width: 0;
    }

.case-item:nth-child(even){
      padding-left: 48px;
    }

.case-item::before{
      content: '';
      flex-shrink: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: var(--beige);
      margin-top: 8px;
    }

.page-wrapper-mv{
      max-width: 480px;
      margin: 0 auto;
      padding: 0 0 80px;
    }

.section-label-mv{
      font-family: var(--sans-mv);
      font-size: 28px;
      font-weight: 400;
      line-height: 1.55;
      color: #111;
      letter-spacing: -0.02em;
      padding: 40px 20px 20px;
      margin-bottom: 8px;
    }

.photo-area-mv{
      width: 100%;
      aspect-ratio: 16 / 8;
      background-color: #e8e4de;
      overflow: hidden;
      position: relative;
      display: block;
      line-height: 0;
      font-size: 0;
    }

.photo-area-mv img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 10%;
      display: block;
      vertical-align: bottom;
    }

.profile-grid-mv{
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 32px 20px 0;
    }

.profile-name-block-mv{
      margin-bottom: 0;
    }

.profile-name-row-mv{
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

.profile-name-ko-mv{
      font-family: var(--serif-mv);
      font-size: 30px;
      font-weight: 600;
      color: var(--text-main-mv);
      letter-spacing: -0.02em;
    }

.profile-name-title-mv{
      font-family: var(--sans-mv);
      font-size: 16px;
      font-weight: 400;
      color: var(--text-main-mv);
      letter-spacing: -0.01em;
    }

.career-list-mv{
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 0;
    }

.career-list-mv li{
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-family: var(--sans-mv);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-body-mv);
      letter-spacing: -0.01em;
    }

.career-list-mv li::before{
      content: '';
      flex-shrink: 0;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: var(--beige-mv);
      margin-top: 6px;
    }

.page-wrapper-wc{
      max-width: 480px;
      margin: 0 auto;
      padding: 0 20px 80px;
    }

.page-title-wc{
      font-family: var(--sans-wc);
      font-size: 28px;
      font-weight: 400;
      line-height: 1.55;
      color: #111;
      letter-spacing: -0.02em;
      padding: 40px 0 8px;
      margin-bottom: 8px;
    }

.section-header-wc{
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 32px;
    }

.section-header-bar-wc{
      width: 3px;
      height: 18px;
      background-color: var(--beige-wc);
      flex-shrink: 0;
    }

.section-header-text-wc{
      font-family: var(--sans-wc);
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main-wc);
      letter-spacing: -0.01em;
    }

/* 애니메이션 */
    .category-block-wc{
      margin-bottom: 40px;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

.category-block-wc.visible-wc{
      opacity: 1;
      transform: translateY(0);
    }

.category-title-row-wc{
      display: flex;
      align-items: center;
      border-bottom: 2px solid var(--beige-wc);
      padding-bottom: 10px;
      margin-bottom: 0;
    }

.category-num-wc{
      font-family: var(--sans-wc);
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background-color: var(--beige-wc);
      padding: 2px 8px;
      letter-spacing: 0.02em;
      margin-right: 10px;
      flex-shrink: 0;
    }

.category-name-wc{
      font-family: var(--sans-wc);
      font-size: 17px;
      font-weight: 700;
      color: var(--text-main-wc);
      letter-spacing: -0.01em;
    }

.case-item-wc{
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-family: var(--sans-wc);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.65;
      color: var(--text-body-wc);
      letter-spacing: -0.01em;
      padding: 7px 0;
      word-break: keep-all;
    }

.case-item-wc::before{
      content: '';
      flex-shrink: 0;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: var(--beige-wc);
      margin-top: 7px;
    }