/* subtitle-seq4-2.css
   - Seq4 전용 Title Section (1280 x 280)
   - submotion.css와 함께 사용 (data-enter 모션은 submotion.css)
*/

/* =========================
   Tokens (Title only)
========================= */
:root{
  --seq4-title-h: 280px;
  --seq4-title-pad-top: 140px;

  --title-box-w: 151px;
  --title-box-h: 96px;
  --title-box-pad-top: 24px;

  /* ✅ 가운데 정렬 정확도를 위해 0 */
  --title-box-pad-left: 0px;

  /* Sub2 Left padding (원하면 0으로 바꿔도 됨) */
  --info-pad-x: 18px;
}

/* =========================
   Title Section (1280 x 280)
========================= */
.sub-title-section{
  width: 100%;
  background: #fff;
}

.sub-title-section__inner{
  width: 100%;
  max-width: 1280px;
  height: var(--seq4-title-h);
  margin: 0 auto;
  padding-top: var(--seq4-title-pad-top);

  position: relative;
  box-sizing: border-box;
}

/* ✅ 타이틀(오시는 길 + 점) 박스 자체를 정확히 중앙 */
.sub-title-box{
  width: var(--title-box-w);
  height: var(--title-box-h);
  margin: 0 auto;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-top: var(--title-box-pad-top);
  padding-left: var(--title-box-pad-left);
  box-sizing: border-box;
}

.sub-title-text{
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

.page-point{
  position: absolute;
  width: 15px;
  height: 15px;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 10%);
  display: block;
  pointer-events: none;
}

.sub-title-sub{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  width: fit-content;
  margin: 0 auto;

  height: 29px;
  line-height: 29px;

  white-space: nowrap;
  text-align: center;

  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* =========================
   Seq4 Desktop Frame (1280 x 1100 + pad 140/140)
========================= */
.seq4-frame{
  width: 100%;
  background: #fff;
}

.seq4-frame__inner{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 0;
  box-sizing: border-box;
}

.seq4-frame__content{
  width: 100%;
  height: 1100px;
  box-sizing: border-box;
}

/* =========================
   Sub2: 1280 x 820 area
   - 2 rows, each 400px
   - row gap 20px
========================= */
.sub2-area820{
  width: 100%;
  height: 840px; /* 400 + 40 + 400 */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 400px 400px;
  row-gap: 40px;
  box-sizing: border-box;
}

/* 각 row: 2 cols (550 / 730), height 400 */
.sub2-row{
  width: 100%;
  height: 400px;
  display: grid;
  grid-template-columns: 550px 730px;
  column-gap: 0;
  align-items: stretch;
  box-sizing: border-box;
}

/* ✅ 바깥 padding 때문에 400이 틀어지는거 방지 */
.sub2-left,
.sub2-right{
  min-height: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* 오른쪽 맵이 칼럼을 꽉 채우게 */
.sub2-right{
  display: flex;
}
.sub2-right > .map-card{
  flex: 1 1 auto;
}

/* =========================
   Kakao Map + Controls + Actions (Final)
========================= */
.map-card{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* zoom/reset absolute 기준 */
  box-sizing: border-box;
}

/* map area */
.kakao-map{
  width: 100%;
  flex: 1 1 auto;   /* 남는 높이 전부 */
  height: auto;
  border-radius: 0;
  overflow: hidden;
  background: #F8F9FA;
  box-shadow: none;
  position: relative;
  isolation: isolate;
}

/* Custom Zoom Buttons (버튼만) */
.map-zoom{
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.map-zoom__btn{
  width: 34px;
  height: 34px;
  border: 1px solid rgba(165,171,175,.55);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  user-select: none;
}

.map-zoom__btn:hover{
  border-color: rgba(165,171,175,.9);
}

/* Reset Button (줌 버튼 아래) */
.map-reset{
  position: absolute;
  right: 10px;
  top: 90px; /* 필요하면 여기만 조절 */
  width: 34px;
  height: 34px;

  border: 1px solid rgba(165,171,175,.55);
  border-radius: 6px;
  background: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  user-select: none;
  z-index: 5;
}

.map-reset:hover{
  border-color: rgba(165,171,175,.9);
}

/* Bottom Actions Bar */
.map-actions{
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;

  padding: 0 16px;
  box-sizing: border-box;

  background: #F2F3F4;
  border: 1px solid rgba(165,171,175,.45);
  border-radius: 0;
  box-shadow: none;
}

.map-action{
  display: inline-flex;
  align-items: center;
  height: 100%;

  font-size: 12px;
  font-weight: 500;
  color: #2F2A25;
  text-decoration: none;
  white-space: nowrap;
}

.map-action:hover{
  color: var(--c-orange, #ED7011);
  text-decoration: underline;
}

/* Kakao | map (map만 굵게) */
.map-brand{
  margin-right: auto;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: 1;
  user-select: none;
}
.map-brand__map{
  font-weight: 800;
}

/* ✅ 액션 링크 사이에 | 넣기 */
.map-actions .map-action + .map-action{
  position: relative;
  padding-left: 12px;
}
.map-actions .map-action + .map-action::before{
  content: "|";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(47,42,37,.55);
  line-height: 1;
}

/* =========================
   Marker Label (CustomOverlay)
   - 꼬리 포함, 10px 위로 띄움
========================= */
.kmap-label{
  position: relative;
  display: inline-block;

  padding: 6px 10px; /* ✅ 여백 늘리기 (상하/좌우) */
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;

  background: #fff;
  border: 1px solid rgba(165,171,175,.55);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);

  /* ✅ marker에서 10px 위로 떨어지게 */
  transform: translateY(-50px);
}

/* 꼬리(흰색) */
.kmap-label::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-width: 8px 7px 0 7px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* 꼬리 테두리 */
.kmap-label::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 1px;
  border-width: 9px 8px 0 8px;
  border-style: solid;
  border-color: rgba(165,171,175,.55) transparent transparent transparent;
}


/* =========================
   Sub2 Left Info (530 x 400)
   - rows: 1px / 64 / 58 / 2fr / 0.5fr x 4
   - ONLY top 1px line
========================= */
.info-card{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1px 64px 58px 2fr repeat(4, 0.5fr);
  box-sizing: border-box;
  background: #fff;
}

/* 맨 위 1px 라인 */
.info-card__topline{
  background: rgba(165,171,175,.45);
}

/* Row: 사업부 */
.info-card__dept{
  display: flex;
  align-items: center;
  padding: 0 var(--info-pad-x);
  box-sizing: border-box;
}
.info-card__dept p{ margin: 0; }

/* Row: 로고 + 회사명 */
.info-card__brand{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--info-pad-x);
  box-sizing: border-box;
}
.info-card__brand p{ margin: 0; }

.info-card__logo{
  width: 40px;
  height: 35px;
  display: block;
  object-fit: contain;
}

/* 이미지 자리(지금은 흰색) */
.info-card__hero{
  background: #fff;
}

/* Row: ADDRESS/TEL/FAX/EMAIL */
.info-card__row{
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 0 var(--info-pad-x);
  box-sizing: border-box;
}

.info-key,
.info-val{
  margin: 0;
  min-width: 0;
}
.info-val{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1279px){
  .co-prefix{ display: none; }
}

/* =========================================
   Tablet Info Card (0.75fr : 1fr) - Final
   - info height: 212
   - right: padding 40/40, 4 rows(27) + gaps(8)
   - left: center aligned block
========================================= */
@media (min-width: 800px) and (max-width: 1279px){

  /* Desktop 전용 요소 숨김 */
  .info-card__topline{ display: none; }
  .info-card__hero{ display: none; }
  .info-card{
    height: 249px;
    background: #fff;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 0.75fr 1fr;

    /* ✅ 왼쪽 스택 시작 위치(패딩40 + 가운데정렬 고려) */
    --left-stack-top: 45px;

    grid-template-rows:
      40px
      58px
      8px
      29px
      8px
      29px
      8px
      29px
      40px;

    position: relative;
  }

  /* ✅ 왼쪽 영역: 122px 텍스트박스, 왼쪽 상단정렬, padding-left 80, gap 8 */
   .info-card__dept{
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    justify-self: start;

    height: 30px;
    padding-bottom: 6px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    margin-top: 40px;
    margin-left: 80px;

    transform: none;
  }

  .info-card__brand{
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    justify-self: start;

    height: 58px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;

    padding: 0;
    margin: 0;
    box-sizing: border-box;

    margin-top: calc(40px + 30px + 8px); /* padding-top + dept + gap */
    margin-left: 80px;

    transform: none;
  }

  .info-card__logo{
    width: 40px;
    height: 35px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
  }


  /* -------------------------
     RIGHT (1fr) : 4행 고정 배치
     - 각 행은 지정된 grid-row에 정확히 안착
  ------------------------- */
  .info-card__row{
    grid-column: 2;

    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 12px;
    align-items: center;

    height: 29px;
    padding: 0 18px;
    margin: 0;
    box-sizing: border-box;
  }

  /* ✅ row는 .info-card의 5~8번째 자식 (topline/dept/brand/hero 다음) */
  .info-card > .info-card__row:nth-child(5){ grid-row: 2; height: 58px; align-items: flex-start; } /* ADDRESS */
  .info-card > .info-card__row:nth-child(6){ grid-row: 4; } /* TEL */
  .info-card > .info-card__row:nth-child(7){ grid-row: 6; } /* FAX */
  .info-card > .info-card__row:nth-child(8){ grid-row: 8; } /* E-MAIL */

  .info-key, .info-val{ margin: 0; min-width: 0; }
  .info-val{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .info-card > .info-card__row:nth-child(5) .info-val{
    white-space: normal;
    overflow: visible;
    line-height: 1.3;
  }
}

/* =========================================
   Tablet Layout (800 ~ 1279)
   - map(400) 위 + info(212) 아래
   - 카드 간격 20
   - 전체 패딩 상하 140 유지
========================================= */
@media (min-width: 800px) and (max-width: 1279px){

  .seq4-frame__inner{
    padding: 140px 0;
  }

  /* 2개 카드: (400+249)=649, gap 20 => 1318 */
  .seq4-frame__content{
    height: 1318px;
  }

  .sub2-area820{
    height: 1318px;
    grid-template-rows: 649px 649px;
    row-gap: 20px;
  }

  /* ✅ 핵심: 2열 -> 1열로 바꾸고, DOM 순서를 map 위로 올림 */
  .sub2-row{
    height: 649px;
    grid-template-columns: 1fr;
    grid-template-rows: 400px 249px;
    grid-template-areas:
      "map"
      "info";
  }

  .sub2-right{ grid-area: map; display: block; }
  .sub2-left { grid-area: info; }

  .map-card{ height: 400px; }
  .info-card{ height: 249px; }

  .sub2-row[data-enter]{ transition-delay: 0ms !important; }
}

/* =========================================
   MOBILE (≤ 799px)
   - Frame: 375 x 1890
   - Card gap: 20
   - Each card: map 400 + info 370 = 770
   - Info(370):
     padding 40(top)/20(sides)/40(bottom)
     gap 40
     top area 122
     bottom area 128
========================================= */
@media (max-width: 799px){

  /* -------------------------
     Frame / Card Layout
  ------------------------- */
  .seq4-frame__inner{
    padding: 140px 0;
  }

  .seq4-frame__content{
    height: 1560px; /* 770*2 + 20 */
  }

  .sub2-area820{
    height: 1560px;
    grid-template-rows: 770px 770px;
    row-gap: 20px;
  }

  .sub2-row{
    height: 770px;
    grid-template-columns: 1fr;
    grid-template-rows: 400px 370px;
    grid-template-areas:
      "map"
      "info";
  }

  .sub2-right{ grid-area: map; display: block; }
  .sub2-left { grid-area: info; }

  .map-card{ height: 400px; }

  .sub2-row[data-enter]{ transition-delay: 0ms !important; }

  /* -------------------------
   Info Card (370) - MOBILE
------------------------- */
.info-card__topline{ display: none; }
.info-card__hero{ display: none; }

.info-card{
  height: 370px;
  background: #fff;
  box-sizing: border-box;

  position: relative; /* ✅ absolute 기준 */

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 122px 128px;
  row-gap: 40px;

  padding: 40px 20px;
}

/* ✅ TOP(122) - 중앙왼쪽정렬, 86px블록(43+43) 중앙배치 → offset 18px */
.info-card__dept{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;

  height: 43px;
  padding: 18px 0 6px 0;
  margin: 0;
  margin-top: 18px; /* (122-86)/2 */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.info-card__brand{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;

  height: 43px;
  margin: 0;
  margin-top: calc(18px + 43px); /* offset + dept */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;

  padding: 0;
  box-sizing: border-box;
}

.info-card__logo{
  width: 40px;
  height: 35px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

/* ✅ BOTTOM(128) - 4 rows (겹침 방지: absolute 배치)
   bottom 시작 Y = padding-top 40 + top(122) + gap(40) = 202
   행: 44 / 22 / 22 / 22, 간격 6
*/
.info-card__row{
  position: absolute;
  left: 20px;   /* info-card padding-left */
  right: 20px;  /* info-card padding-right */

  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: 12px;

  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.info-card > .info-card__row:nth-child(5){
  top: 202px;
  height: 44px;
  align-items: flex-start; /* 2줄 주소 대응 */
}

.info-card > .info-card__row:nth-child(6){
  top: calc(202px + 44px + 6px); /* 252 */
  height: 22px;
  align-items: center;
}

.info-card > .info-card__row:nth-child(7){
  top: calc(202px + 44px + 6px + 22px + 6px); /* 280 */
  height: 22px;
  align-items: center;
}

.info-card > .info-card__row:nth-child(8){
  top: calc(202px + 44px + 6px + 22px + 6px + 22px + 6px); /* 308 */
  height: 22px;
  align-items: center;
}

.info-key, .info-val{ margin: 0; min-width: 0; }

/* 주소(54px)는 2줄 가능 */
.info-card > .info-card__row:nth-child(5) .info-val{
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.3;
}

/* 나머지는 1줄 유지 */
.info-card > .info-card__row:nth-child(6) .info-val,
.info-card > .info-card__row:nth-child(7) .info-val,
.info-card > .info-card__row:nth-child(8) .info-val{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -------------------------
   "주식회사 " 숨김 + 회사명 줄바꿈 방지
------------------------- */
.co-prefix{ display: none; }

.info-card__brand p{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
}

.m-only{ display: none; }
@media (max-width: 799px){
  .m-only{ display: inline; }
}

.t-only{ display: none; }
@media (min-width: 800px) and (max-width: 1279px){
  .t-only{ display: inline; }
}