/* 최기락 — creamconnection 레이아웃 유지, 로고·영상만 보정 */
#header .choikirak-header-logo {
  display: block;
  width: min(280px, 52vw);
  height: auto;
}

#header .wrap.clear {
  position: relative;
}

#header .all_menu_b {
  z-index: 5;
}

/* 햄버거(.all_menu_b)와 겹치지 않도록 common.css의 right 값 + 버튼 너비 + 간격 */
.choikirak-lang-btn {
  position: absolute;
  right: calc(80px + 40px + 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  min-width: 44px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(35, 24, 21, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #3e2c1d;
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.choikirak-lang-btn:hover {
  border-color: #0a594b;
  color: #0a594b;
}

@media (max-width: 1640px) {
  .choikirak-lang-btn {
    right: calc(40px + 40px + 12px);
  }
}

@media (max-width: 1416px) {
  .choikirak-lang-btn {
    right: calc(20px + 40px + 12px);
  }
}

@media (max-width: 980px) {
  .choikirak-lang-btn {
    height: 32px;
    min-width: 40px;
    font-size: 12px;
  }
}
/* 히어로(v01): 로고 이미지·SVG 모두 비표시 — 카피(v_txt)만 노출 */
.visual .v01 .choikirak-visual-logo,
.visual .v01 > svg {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

/* v01 롤링 카피 — 한 줄만 보이도록 창 높이 고정 (JS가 줄 높이로 보정) */
#main .visual .v01 .v_txt {
  overflow: hidden !important;
  height: clamp(72px, 5.5vw, 96px);
  box-sizing: border-box;
  padding: 0 clamp(16px, 4vw, 48px);
}
#main .visual .v01 .v_txt strong {
  display: block;
  line-height: 1.45;
  word-break: keep-all;
  white-space: normal;
  margin: 0;
}
@media (max-width: 1300px) {
  #main .visual .v01 .v_txt {
    height: clamp(44px, 11vw, 56px);
  }
}

/* v02: 문구 연출 후 hero-01.webp (기존 영상 clip-path 연출 유지) */
#main .visual {
  overflow: hidden;
  isolation: isolate;
}
#main .visual .v02 .video {
  overflow: hidden;
}
#main .visual .v02 .videobcg.choikirak-hero-img {
  object-fit: cover;
  object-position: center;
}

/* con01: 카드 이미지 크기·겹침 방지 (원본은 JPG 고정폭, webp 교체 시 필수) */
#main .con_w {
  position: relative;
  z-index: 2;
  background-color: #e9e4dd;
}
#main .con01 .list .img {
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
}
#main .con01 .list .img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
#main .con01 .m_tit .st01 .sq:after {
  content: "50년";
}
#main .con02 .m_tit .st01 .sq:after {
  content: "SUITECH system";
}
#main .con04 .m_tit .st01 .sq:after {
  content: "맞춤 수트";
}
#main .con05 .m_tit .st01 .sq:after {
  content: "맞춤 상담 체크";
}
#main .con07 .m_tit .st01 .sq:after {
  content: "전화 · 문의";
}

html[lang="en"] #main .con01 .m_tit .st01 .sq:after {
  content: "50 yrs";
}
html[lang="en"] #main .con02 .m_tit .st01 .sq:after {
  content: "SUITECH";
}
html[lang="en"] #main .con04 .m_tit .st01 .sq:after {
  content: "Bespoke";
}
html[lang="en"] #main .con05 .m_tit .st01 .sq:after {
  content: "Consult";
}
html[lang="en"] #main .con07 .m_tit .st01 .sq:after {
  content: "Contact";
}
html[lang="en"] #main .con05 .c02 .chk_list > div:nth-child(1) .answer strong .sq1:after {
  content: "Book fitting";
}
html[lang="en"] #main .con05 .c02 .chk_list > div:nth-child(2) .answer strong .sq1:after {
  content: "Re-fit timing";
}
html[lang="en"] #main .con05 .c02 .chk_list > div:nth-child(3) .answer strong .sq1:after {
  content: "SUITECH bespoke";
}

/* con05 결과 배지(.sq1) — 원본 CSS가 카페 문구(신메뉴 교육)를 :after로 덮어씀 */
#main .con05 .c02 .chk_list > div:nth-child(1) .answer strong .sq1:after {
  content: "상담·피팅 예약";
}
#main .con05 .c02 .chk_list > div:nth-child(2) .answer strong .sq1:after {
  content: "다시 잡을 시점";
}
#main .con05 .c02 .chk_list > div:nth-child(3) .answer strong .sq1:after {
  content: "SUITECH 맞춤";
}
#main .visual .v02 .choikirak-hero-v02__tagline {
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.45;
}
#main .visual .v02 .txt2 p:first-of-type {
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 400;
}

/* con01 타이틀: 문장당 한 줄 (PC) */
#main .con01 .left {
  min-width: 560px;
  flex-shrink: 0;
}
#main .con01 .m_tit.choikirak-con01-tit {
  gap: 20px;
}
#main .con01 .m_tit.choikirak-con01-tit .st01 {
  white-space: nowrap;
  display: block;
}
@media (max-width: 900px) {
  #main .con01 .left {
    min-width: 0;
    width: 100% !important;
  }
  #main .con01 .m_tit.choikirak-con01-tit .st01 {
    white-space: normal;
  }
}
.con04 .y_list .video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 9;
  background: #1a1311;
}
.con04 .y_list .video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* ========== 메인 — 글자 크기 확대 ========== */
#main .st01 {
  font-size: 52px;
}
#main .p01 {
  font-size: 38px;
}
#main .visual .v01 .v_txt strong {
  font-size: 56px;
}
#main .visual .v02 .txt1 strong {
  font-size: 92px;
  color: #1a1311 !important;
}
#main .visual .v02 .txt1 p {
  font-size: 46px;
  color: #1a1311 !important;
}
#main .visual .v02 .txt2 p {
  font-size: 28px;
}
#main .con01 .list .txt p {
  font-size: 28px;
}
#main .con03 .wrap > div .txt .txt2 strong {
  font-size: 42px;
}
#main .con03 .wrap > div .txt .txt2 p {
  font-size: 30px;
}
#main .con04 .y_list ul li .txt strong {
  font-size: 28px;
}
#main .con04 .y_list ul li .txt p {
  font-size: 21px;
}
#main .con05 .c_list ul li strong {
  font-size: 24px;
}
#main .con05 .c02 .chk_list .question strong {
  font-size: 32px;
  line-height: 1.45;
}
#main .con05 .c02 .chk_list .answer strong {
  font-size: 30px;
  line-height: 1.45;
}
#main .con06 .btn_list ul li .txt strong {
  font-size: 32px;
}
#main .con06 .btn_list ul li .txt p {
  font-size: 24px;
}
#main .con07 .m_tit p {
  font-size: 26px;
}
#main .con07 .c_btn .txt strong {
  font-size: 26px;
}
#main .visual .v02 .choikirak-hero-v02__tagline {
  font-size: clamp(22px, 2.5vw, 38px);
}
#main .visual .v02 .txt2 p:first-of-type {
  font-size: clamp(20px, 2vw, 32px);
}

@media (max-width: 1300px) {
  #main .st01 {
    font-size: 40px;
  }
  #main .p01 {
    font-size: 28px;
  }
  #main .con03 .wrap > div .txt .txt2 strong {
    font-size: 28px;
  }
  #main .con03 .wrap > div .txt .txt2 p {
    font-size: 22px;
  }
}

@media (max-width: 980px) {
  #main .st01 {
    font-size: 36px;
  }
  #main .p01 {
    font-size: 24px;
  }
  #main .visual .v01 .v_txt strong {
    font-size: 36px;
  }
  #main .visual .v02 .txt1 strong {
    font-size: 58px;
  }
  #main .visual .v02 .txt1 p {
    font-size: 32px;
  }
  #main .visual .v02 .txt2 strong {
    font-size: 88px;
  }
}

@media (max-width: 768px) {
  #main .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* con02 — 슬라이더·하단 카피 모바일 (한 화면에 1~1.5장, 본문 겹침 방지) */
  #main .con02 .c02 {
    padding-bottom: 48px;
  }

  #main .con02 .c02 .m_tit {
    padding: 0 4px 12px;
  }

  #main .con02 .c02 .m_tit .st01 {
    font-size: clamp(19px, 5.3vw, 24px);
    line-height: 1.48;
    letter-spacing: -0.02em;
  }

  html[lang="en"] #main .con02 .c02 .m_tit .st01 {
    font-size: clamp(17px, 4.7vw, 22px);
    line-height: 1.42;
    word-break: normal;
    overflow-wrap: break-word;
  }

  #main .con02 .c02 .r_list {
    margin-top: 28px;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }

  #main .con02 .c02 .r_list ul {
    gap: 14px;
    animation-duration: 45s;
  }

  #main .con02 .c02 .r_list ul li {
    gap: 14px;
  }

  #main .con02 .c02 .r_list ul li div:nth-child(odd) {
    transform: translateY(0);
  }

  #main .con02 .c02 .r_list ul li div {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
  }

  #main .con02 .c02 .r_list ul li img {
    width: min(268px, 74vw) !important;
    height: auto;
    max-height: min(400px, 50svh);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border-radius: 10px;
  }

  #main .con02 .c02 .arrow {
    margin-top: 20px !important;
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
  }

  #main .con02 .c02 .arrow .bg img {
    max-width: 100%;
    height: auto;
  }

  #main .con02 .c02 .txt {
    margin-top: 28px !important;
    gap: 14px !important;
    padding: 0 2px;
  }

  #main .con02 .c02 .txt .p01 {
    font-size: clamp(15px, 4.15vw, 18px) !important;
    line-height: 1.55;
    word-break: keep-all;
    padding: 0 8px;
    max-width: 28em;
  }

  html[lang="en"] #main .con02 .c02 .txt .p01 {
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 22em;
  }

  #main .st01 {
    font-size: clamp(22px, 5.8vw, 30px);
    word-break: keep-all;
  }

  #main .p01 {
    font-size: clamp(16px, 4.2vw, 20px);
  }

  /* v01: 한 줄 창 유지 — height:auto 금지(JS가 줄 높이로 덮어씀) */
  #main .visual .v01 .v_txt {
    padding: 0 16px;
    overflow: hidden !important;
    height: clamp(38px, 10.5vw, 48px);
  }

  #main .visual .v01 .v_txt strong {
    font-size: clamp(14px, 3.85vw, 18px);
    line-height: 1.35;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }

  html[lang="en"] #main .visual .v01 .v_txt strong {
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  #main .visual .v02 .txt1 strong {
    font-size: clamp(26px, 7.5vw, 38px);
  }

  #main .visual .v02 .txt1 p {
    font-size: clamp(15px, 4vw, 20px);
  }

  #main .visual .v02 .txt2 strong {
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.1;
  }

  #main .visual .v02 .txt2 p {
    font-size: clamp(14px, 3.6vw, 17px);
  }

  #main .visual .v02 .choikirak-hero-v02__tagline {
    font-size: clamp(15px, 4vw, 20px);
  }

  #main .con01 .list .txt p {
    font-size: clamp(14px, 3.8vw, 17px);
  }

  /* con03 — 번호·제목·본문 좌측 그리드 정렬 (01/02/03 동일 기준선) */
  #main .con03 {
    margin-top: 72px;
  }

  #main .con03 .wrap > div {
    flex-direction: column-reverse !important;
    align-items: stretch;
    padding: 32px 0 40px !important;
    gap: 18px;
  }

  #main .con03 .wrap > div .img {
    width: 100%;
  }

  #main .con03 .wrap > div .img img {
    width: 100% !important;
    max-height: min(52vw, 220px);
    object-fit: cover;
    transform: none !important;
    transform-origin: center center !important;
  }

  #main .con03 .wrap > div .txt {
    display: grid !important;
    grid-template-columns: 3rem 1fr;
    column-gap: 12px;
    align-items: start;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    gap: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    flex-flow: unset !important;
  }

  #main .con03 .wrap > div .txt .num {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    line-height: 1;
    font-size: clamp(32px, 9vw, 44px) !important;
    margin-top: 2px;
  }

  #main .con03 .wrap > div .txt .txt2 {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0 !important;
    gap: 10px !important;
    min-width: 0;
  }

  #main .con03 .wrap > div .txt .txt2 strong {
    font-size: clamp(17px, 4.5vw, 22px);
    line-height: 1.42;
    display: block;
  }

  #main .con03 .wrap > div .txt .txt2 p {
    font-size: clamp(14px, 3.7vw, 17px);
    line-height: 1.52;
    margin: 0;
  }

  html[lang="en"] #main .con03 .wrap > div .txt .txt2 strong,
  html[lang="en"] #main .con03 .wrap > div .txt .txt2 p {
    word-break: normal;
    overflow-wrap: break-word;
  }

  #main .con03 .wrap > div.is-inview .txt .txt2 {
    transition: opacity 0.35s ease;
  }

  #main .con04 .y_list ul li .txt strong {
    font-size: clamp(15px, 4vw, 18px);
  }

  #main .con04 .y_list ul li .txt p {
    font-size: clamp(14px, 3.6vw, 16px);
  }

  /* con05 체크리스트 — GSAP margin·2열 지그재그 제거, 1열 카드 */
  #main .con05 .c01 {
    padding-bottom: 24px;
  }

  #main .con05 .c_list {
    margin-top: 24px;
  }

  #main .con05 .c_list ul {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #main .con05 .c_list ul li,
  #main .con05 .c_list ul li.li01,
  #main .con05 .c_list ul li.li02,
  #main .con05 .c_list ul li.li03 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 0;
    padding: 14px 16px 16px !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
  }

  #main .con05 .c_list ul li svg {
    flex-shrink: 0;
    margin-top: 2px;
  }

  #main .con05 .c_list ul li strong {
    font-size: clamp(14px, 3.85vw, 16px) !important;
    line-height: 1.48;
    text-align: left;
    flex: 1;
  }

  html[lang="en"] #main .con05 .c_list ul li strong {
    word-break: normal;
    overflow-wrap: break-word;
  }

  #main .con05 .c02 .chk_list .question strong,
  #main .con05 .c02 .chk_list .answer strong {
    font-size: clamp(15px, 4vw, 18px);
  }

  #main .con06 .btn_list ul li .txt strong {
    font-size: clamp(18px, 4.8vw, 24px);
  }

  #main .con06 .btn_list ul li .txt p {
    font-size: clamp(14px, 3.7vw, 17px);
  }

  #main .con07 .m_tit p {
    font-size: clamp(14px, 3.8vw, 17px);
  }

  #main .con07 .c_btn .txt strong {
    font-size: clamp(15px, 4vw, 18px);
  }

  .choikirak-lang-btn {
    min-width: 38px;
    height: 30px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  #main .st01 {
    font-size: clamp(20px, 5.2vw, 26px);
  }

  #main .con02 .c02 .r_list ul li img {
    width: min(252px, 80vw) !important;
    max-height: min(360px, 46svh);
  }

  #main .con02 .c02 .m_tit .st01 {
    font-size: clamp(18px, 5vw, 22px);
  }

  #main .con02 .c02 .txt .p01 {
    font-size: clamp(14px, 3.9vw, 17px) !important;
  }

  #main .visual .v02 .txt1 strong {
    font-size: clamp(22px, 6.8vw, 32px);
  }
}