@charset "utf-8";

.display_pc_only{display:block;}
.display_tablet_only{display:none;}
 
.ap_header{
  height:var(--headerH);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  border-bottom:1px solid var(--line);
}

.ap_header .ap_logo{font-family: 'Plantin'; font-size: 30px;}

.ap_menu_btn{
  width:40px;height:40px;background:transparent;border:0px solid var(--line);border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.ap_menu_btn span{width:18px;height:2px;background:#111;display:block;}
/* Layout PC */
   .ap_layout{
      height:calc(100vh - var(--headerH));
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
    }
    .ap_col{border-right:1px solid var(--line);overflow:auto;min-width:0;background:#fff;}
    .ap_col--right{border-right:0;   }
    .ap_col_inner{padding:0px 0px;min-width:0;    height: 100%;}
    .ap_divider{height:1px;background:var(--line);margin:0px 0;}

    /* Items */
    .ap_nav{display:flex;flex-direction:column;gap:5px;    padding: 15px 0 0 0;}
    .ap_item{
      display:flex;align-items:center;justify-content:space-between;
      padding:15px 16px;border-radius:15px;    margin: 0 15px; line-height: 1.1; color:#000;
    }
    .ap_item_txt{ text-transform:uppercase;     font-family: 'Plantin'; font-size: 24px;}

 


    .ap_item_dot{width:8px;height:8px;border-radius:50%;background:#111;opacity:0;}
    .ap_item:hover{background:var(--pill);}
    .ap_item.is-active{background:#f2f2f2;}
.ap_item.is-active:hover{background:var(--pill);}
    .ap_item:hover .ap_item_dot{opacity:1;}
    .ap_item.is-active .ap_item_dot{/*opacity:1;*/}

    /* Link style */
    .ap_item--link{justify-content:flex-start;}
    .ap_item--link:hover{background:transparent;}
    .ap_item--link .ap_item_txt{text-transform:uppercase;}

    /* Placeholder */
    .ap_placeholder{
      color:#000;
      font-size:14px;
      line-height:1.7;
      padding:12px 15px;
        text-align: center;
        display:none;
    }


    /* Content */
    .ap_media{width:100%; background:#000;border-radius:14px; overflow: hidden;}
.ap_media img{width:100%;}
    .ap_title{margin:16px 0 10px;font-size:20px;     font-family: 'Plantin'; font-weight: 300;text-transform:uppercase;letter-spacing:.2px;}
    .ap_desc{margin:0;line-height:1.6;font-size:14px; }

    /* 3단계: 기본은 전부 숨김, 선택된 것만 보이기 */
    [data-content]{display:none;}
    [data-content].is-show{display:block;}

    /* Mobile bars */
    .ap_mo_bar{display:none;}
    .ap_back{
      width:56px;height:var(--moBarH);
      border-right:1px solid var(--line);
      display:flex;align-items:center;justify-content:center;
      font-size:18px;background:#fff;color:#000;
    }
    .ap_mo_title{
      flex:1;height:var(--moBarH);
      display:flex;align-items:center;     font-family: 'Plantin';
      padding:0 16px; font-size:20px;background:#fff; color:#000;
    }

.in_link a{
  font-size:16px;
  background:#f6c844;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  font-weight:700;
  padding:13px 40px;
  overflow:hidden; /* 핵심 */
}

/* 점 영역 */
.in_link a::after{
  content:"••";
  display:inline-block;
  margin-left:0;
  max-width:0;          /* ❗ 처음엔 없음 */
  opacity:0;
  white-space:nowrap;
  transition: max-width .25s ease, margin-left .25s ease, opacity .15s ease;
}

/* hover 시 확장 */
.in_link a:hover::after{
  max-width:20px;       /* 점이 들어갈 만큼 */
  margin-left:8px;
  opacity:1;
}

.ap_lang{position:relative;}

.ap_lang .ap_lang_panel{font-family: 'Plantin_l', 'Pretendard Variable';}


  .ap_lang_tabs{
    margin-top:18px;
    display:flex;
    gap:14px;
    font-size:14px;
    letter-spacing:.06em;
    text-transform:uppercase;
    user-select:none;
          position: relative;
    z-index: 9;
  }
  .ap_lang_tab{
    padding:0;
    background:transparent;
    border:0;
    color:#999;
    font-weight:600;
    cursor:pointer;
  }
  .ap_lang_tab.is-active{color:#111;}

.ap_lang .ap_lang_panel .box{    margin: 0 0 15px;}
.ap_lang .ap_lang_panel .box span{    font-weight: 700; display: block;}


.ap_col--left .ap_item2{padding: 15px 45px;} 
.ap_col--left .ap_item2 .ap_item_txt{font-size: 20px;}

.ap_col--mid .ap_item_txt{font-size:20px;}
.ap_col--mid .ap_panel2{padding:15px 15px;     background: #f9f9f9; height: 100%;}

.ap_col--right .ap_col_inner{ }
.ap_col--right .ap_col_inner article{    background: #f9f9f9;  height: 100%;padding: 15px;}
.ap_col--right .ap_col_inner article#content-contact{background:#fff;    padding: 40px 30px;}

#panel-people .in_link{margin:30px 0 0 0;}
#panel-project .in_link{margin:30px 0 0 0;}
#panel-press .in_link{margin:30px 0 0 0;}
#panel-insight .in_link{margin:30px 0 0 0;}
#panel-contact .ap_item{font-size: 15px; background:#f6c844; border-radius: 10px;margin:0; font-weight: 700;   padding: 10px 15px;}


@media (min-width: 1025px) {
    .ap_lang .ap_lang_body{height: 120px; overflow-y: auto}
    .ap_lang .ap_lang_body2{height:17vw; overflow-y: auto}
}

/* ===== Base ===== */
  .ap_contact{max-width:720px;}
  .ap_contact_desc{
    margin:0 0 28px;
    font-size:20px;    font-family: 'Plantin_l';
    line-height:1.7;
  }
  .ap_form{display:flex;flex-direction:column;gap:20px;}
  .ap_row{display:grid;gap:18px;}
  .ap_row--2col{grid-template-columns:1fr 1fr;}

  .ap_field{display:flex;flex-direction:column;gap:10px;}
  .ap_label{
    font-size:14px;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .ap_req{font-weight:700;}

  .ap_input,.ap_select,.ap_textarea{
    width:100%;
    border:1px solid #111;
    padding:14px 16px;
    font-size:14px;
    border-radius:0;
    outline:none;
    background:#fff;
  }
  .ap_input::placeholder,.ap_textarea::placeholder{color:#aaa;}

  /* select 화살표/정렬 */
  .ap_select_wrap{position:relative;}
  .ap_select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding-right:44px;
    cursor:pointer;
  }
  .ap_select_wrap::after{
    content:"";
    position:absolute;
    right:16px;
    top:50%;
    width:8px;height:8px;
    border-right:1px solid #111;
    border-bottom:1px solid #111;
    transform:translateY(-60%) rotate(45deg);
    pointer-events:none;
  }

  .ap_textarea{min-height:180px;resize:vertical;}

  .ap_submit{
    width:100%;
    padding:18px 16px;
    border:0;
    background:#000;
    color:#fff;
    font-size:14px;
    cursor:pointer;
      margin:0 0 100px 0;
  }


/* ===== Footer Base ===== */
.ap_footer{
  width:100%;
  padding:24px 32px;
    position: fixed;
    bottom: 0;
}

.ap_footer_inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ===== Left ===== */
.ap_footer_toggle{
  display:flex;
  align-items:center;
  gap:14px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
    color:#000;
}

/* dots */
.ap_dots{
  display:flex;
  gap:6px;
}
.ap_dots i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#000;
  display:block;
  transition:background .2s ease;
}

/* text */
.ap_footer_text{
  font-size:13px;
  line-height:1;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
}

/* active */
.ap_footer_toggle.is-active .ap_dots i{
  background:#ffbe00;
}
.ap_footer_toggle.is-active .ap_footer_text{
  opacity:1;
  transform:translateY(0);
}

/* ===== Right ===== */
.ap_footer_right{
  display:flex;
  gap:16px;
}
.ap_footer_right img{
  width:18px;
  display:block;
}
.ap_footer_right img.insta{    width: 20px;}

/* mobile */
@media (max-width: 1024px) {
    .display_pc_only{display:none;}
    .display_tablet_only{display:block;}
    
     :root{ --headerH:56px; --pad:16px; } 
.ap_layout{
        position:relative;height:calc(100vh - var(--headerH));
        display:block;overflow:hidden;
      }
      .ap_col{
        position:absolute;top:0;left:0;width:100%;height:100%;
        border-right:0;overflow:auto;
        transform:translateX(0);transition:transform .28s ease;
      }
      .ap_mo_bar{
        display:flex;height:auto;
        border-bottom:1px solid var(--line);
        position:sticky;top:0;z-index:5;background:#fff;
      }
    .ap_nav{     gap: 5px;    padding: 8px 0 0 0;}
      .ap_col--left{transform:translateX(0%);}
      .ap_col--mid{transform:translateX(100%);}
      .ap_col--right{transform:translateX(200%); background:#f9f9f9;}
    
    .ap_col--mid #panel-contact .ap_item_txt{ font-size: 15px;}
    #panel-contact .ap_item{margin:20px 0 0 0;}

      .ap_layout[data-step="2"] .ap_col--left{transform:translateX(-100%);}
      .ap_layout[data-step="2"] .ap_col--mid{transform:translateX(0%);}
      .ap_layout[data-step="2"] .ap_col--right{transform:translateX(100%);}

      .ap_layout[data-step="3"] .ap_col--left{transform:translateX(-200%);}
      .ap_layout[data-step="3"] .ap_col--mid{transform:translateX(-100%);}
      .ap_layout[data-step="3"] .ap_col--right{transform:translateX(0%);}

      .ap_title{font-size:24px;}
    
    .ap_row--2col{grid-template-columns:1fr;}
    
    .ap_footer{padding: 15px 15px;}
    
    .ap_submit{margin:0 0 100px 0;}
    .ap_col--right .ap_col_inner article#content-about-commit .ap_lang{padding:0 0 50px 0;}
    .ap_col--right .ap_col_inner article#content-contact{background:#f9f9f9;}
    .ap_contact_desc{font-size: 18px; line-height: 1.4;}
}









/* ===== 큰틀(PC)만 ===== */

  :root{
  --line:#d9d9d9;
  --pill:#f4d57a;
  --headerH:64px;
  --pad:24px;
  --moBarH:56px;
}