@charset "utf-8";

:root {
  --renew-bg: #FAF8F4;
  --renew-surface: #FFFFFF;
  --renew-soft: #F2EEE8;
  --renew-text: #2B2926;
  --renew-text-secondary: #77716A;
  --renew-text-muted: #A59E96;
  --renew-line: #DDD7CF;
  --renew-accent: #5A4637;
  --renew-red: #D71920;
  --portfolio-bg: var(--renew-bg);
  --portfolio-surface: var(--renew-surface);
  --portfolio-soft: var(--renew-soft);
  --portfolio-text: var(--renew-text);
  --portfolio-secondary: var(--renew-text-secondary);
  --portfolio-line: var(--renew-line);
  --portfolio-accent: var(--renew-accent);
  --portfolio-overlay: rgba(43, 41, 38, .56);
}

html,
body {
  background-color: var(--renew-bg);
  color: var(--renew-text);
}

a { color: var(--renew-text); }
a:hover { color: var(--renew-accent); }
::selection { background-color: var(--renew-accent); color: var(--renew-surface); }

/* Existing menu geometry and animation remain owned by layout.css/design.js. */
.mobile_menu {
  background-color: var(--renew-bg);
  border-color: var(--renew-line);
}
.mobile_menu > ul > li > a { color: var(--renew-text); }
.mobile_menu > ul > li > a:hover,
.mobile_menu > ul > li > a.selected { color: var(--renew-accent); }
.mobile_menu .info { color: var(--renew-text-secondary); }
.mobile_menu .top_link img,
.mobile_menu .social img { filter: grayscale(1) brightness(.42); }

/* Central consultation form keeps the legacy request panel shell. */
#win_requset_area {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 70px;
}
#win_requset_area > .pdT40,
#win_requset_area > .pdT30,
#win_requset_area > .pdT20,
#win_requset_area > .pdT10 {
  display: none;
}
#request_title {
  flex: 0 0 auto;
}
#title_sect0 > .fc_gray9 {
  display: none;
}
#win_requset_area h3.title {
  margin: 0;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 300;
  color: #2B2926;
  text-indent: 0;
}
#win_requset_area h3.title span {
  font-weight: 300;
  color: #2B2926;
}
#win_requset_area .title_sub {
  padding: 8px 0 1px;
  font-size: 14px;
  line-height: 1.5;
}
#title_sect0 > p:last-child {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
#request_content {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  margin-top: 14px;
}
#content_sect0 {
  height: 100%;
  min-height: 0;
}
.central-consult-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media screen and (max-width: 768px) {
  #win_requset_area {
    padding-top: 54px;
  }
  #win_requset_area h3.title {
    font-size: 30px;
  }
  #win_requset_area .title_sub {
    padding-top: 5px;
    font-size: 13px;
  }
  #title_sect0 > p:last-child {
    font-size: 12px;
  }
  #request_content {
    margin-top: 9px;
  }
}

/* Shared DAON logo asset: preserve the supplied artwork's aspect ratio. */
#mobile_header h1.logo {
  width: 128px;
  height: auto;
}
#mobile_header h1.logo a,
#mobile_header h1.logo img {
  display: block;
  width: 100%;
  height: auto;
}
#footer_wrap .footer_logo { width: 210px; }
#footer_wrap .footer_logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  #mobile_header h1.logo { width: 96px; height: auto; }
  #footer_wrap .footer_logo { width: 145px; }
}

/* HOME: retain the slider and replace only its image sources. */
.renew-home #main_gal,
.renew-home #main_gal .banner_container { overflow: hidden; }
.renew-home #main_gal .banner_container { background-color: var(--renew-soft); }
.renew-home #banner_content .img1 {
  background-image: linear-gradient(rgba(43, 41, 38, .13), rgba(43, 41, 38, .13)), url('/img/main/home-hero-01.jpg');
}
.renew-home #banner_content .img2 {
  background-image: linear-gradient(rgba(43, 41, 38, .13), rgba(43, 41, 38, .13)), url('/img/main/home-hero-02.jpg');
}
.renew-home #banner_content .img3 {
  background-image: linear-gradient(rgba(43, 41, 38, .13), rgba(43, 41, 38, .13)), url('/img/main/home-hero-03.jpg');
}
.renew-home #banner_content .img4 {
  background-image: linear-gradient(rgba(43, 41, 38, .13), rgba(43, 41, 38, .13)), url('/img/main/home-hero-04.jpg');
}
.renew-home #banner_content .img5 {
  background-image: linear-gradient(rgba(43, 41, 38, .13), rgba(43, 41, 38, .13)), url('/img/main/home-hero-05.jpg');
}
.renew-home #banner_content .img6 {
  background-image: linear-gradient(rgba(43, 41, 38, .13), rgba(43, 41, 38, .13)), url('/img/main/home-hero-06.jpg');
}
.renew-home #cont { background-color: var(--renew-bg); }
.renew-home #cont li a:hover h4 { color: var(--renew-surface); }
.renew-home #cont li:nth-child(1) .img_area > div {
  background: linear-gradient(rgba(43, 41, 38, .10), rgba(43, 41, 38, .10)), url('/img/portfolio/detail/94/1772764879_i2.jpg') center center / cover no-repeat;
}
.renew-home #cont li:nth-child(3) .img_area > div {
  background: linear-gradient(rgba(43, 41, 38, .10), rgba(43, 41, 38, .10)), url('/img/portfolio/detail/89/1749618825_i1.jpg') center center / cover no-repeat;
}
.renew-home #cont li:nth-child(1) .img_area img,
.renew-home #cont li:nth-child(3) .img_area img { visibility: hidden; }
.renew-home #cont li .img_area {
  filter: grayscale(100%);
  transition: filter .65s ease;
}
.renew-home #cont li:hover .img_area { filter: grayscale(0%); }

/* HOME lower links: preserve the three-column interaction in a slimmer banner. */
.renew-home #cont > li,
.renew-home #cont > li > a,
.renew-home #cont > li > a > img {
  height: 210px;
}
.renew-home #cont > li > a > img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.renew-home #cont li .img_area > div {
  height: 210px;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
}
.renew-home #cont li .img_area img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 480px) {
  .renew-home #cont > li,
  .renew-home #cont > li > a,
  .renew-home #cont > li > a > img,
  .renew-home #cont li .img_area > div,
  .renew-home #cont li .img_area img {
    height: 180px;
  }
}

/* HOME YouTube gallery: thumbnails load first; the player is created on demand. */
.daon-youtube {
  clear: both;
  padding: 88px 4vw 94px;
  background-color: var(--renew-bg);
}
.daon-youtube__inner {
  max-width: 1440px;
  margin: 0 auto;
}
.daon-youtube h2 {
  margin: 0 0 30px;
  color: var(--renew-text);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .08em;
  text-align: center;
}
.daon-youtube__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.daon-youtube__item {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  background-color: var(--renew-soft);
  cursor: pointer;
}
.daon-youtube__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.daon-youtube__item:hover img,
.daon-youtube__item:focus-visible img { transform: scale(1.03); }
.daon-youtube__item:focus-visible { outline: 1px solid var(--renew-accent); outline-offset: 3px; }
.daon-youtube__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background-color: rgba(43, 41, 38, .42);
  transform: translate(-50%, -50%);
  transition: background-color .4s ease, transform .4s ease;
}
.daon-youtube__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 52%;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
  transform: translate(-40%, -50%);
}
.daon-youtube__item:hover .daon-youtube__play,
.daon-youtube__item:focus-visible .daon-youtube__play {
  background-color: rgba(43, 41, 38, .62);
  transform: translate(-50%, -50%) scale(1.05);
}
.daon-youtube__channels {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.daon-youtube__channels a {
  padding: 10px 16px;
  border: 1px solid var(--renew-line);
  color: var(--renew-text-secondary);
  font-size: 12px;
  letter-spacing: .03em;
}
.daon-youtube__channels a:hover,
.daon-youtube__channels a:focus-visible {
  border-color: var(--renew-accent);
  color: var(--renew-accent);
}

/* HOME Instagram gallery: a one-time local snapshot, ready for a future data source. */
.daon-instagram {
  clear: both;
  padding: 0 4vw 94px;
  background-color: var(--renew-bg);
}
.daon-instagram__inner {
  max-width: 1440px;
  margin: 0 auto;
}
.daon-instagram h2 {
  margin: 0 0 30px;
  color: var(--renew-text);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .08em;
  text-align: center;
}
.daon-instagram__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.daon-instagram__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--renew-soft);
}
.daon-instagram__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.daon-instagram__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: rgba(43, 41, 38, .28);
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity .4s ease;
}
.daon-instagram__item:hover img,
.daon-instagram__item:focus-visible img { transform: scale(1.03); }
.daon-instagram__item:hover .daon-instagram__overlay,
.daon-instagram__item:focus-visible .daon-instagram__overlay { opacity: 1; }
.daon-instagram__item:focus-visible { outline: 1px solid var(--renew-accent); outline-offset: 3px; }
.daon-instagram__channels {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.daon-instagram__channels a {
  padding: 10px 16px;
  border: 1px solid var(--renew-line);
  color: var(--renew-text-secondary);
  font-size: 12px;
  letter-spacing: .03em;
}
.daon-instagram__channels a:hover,
.daon-instagram__channels a:focus-visible {
  border-color: var(--renew-accent);
  color: var(--renew-accent);
}
body.youtube-modal-open { overflow: hidden; }
.daon-youtube-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 68px 4vw 32px;
}
.daon-youtube-modal[hidden] { display: none; }
.daon-youtube-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(20, 19, 18, .84);
}
.daon-youtube-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, 92vw);
}
.daon-youtube-modal__player {
  aspect-ratio: 16 / 9;
  background-color: #111;
}
.daon-youtube-modal__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.daon-youtube-modal__close {
  position: absolute;
  right: 0;
  top: -48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 38px;
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .daon-youtube { padding: 72px 4vw 78px; }
  .daon-youtube__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daon-instagram { padding: 0 4vw 78px; }
  .daon-instagram__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 600px) {
  .daon-youtube { padding: 58px 20px 64px; }
  .daon-youtube h2 { margin-bottom: 24px; font-size: 20px; }
  .daon-youtube__grid { grid-template-columns: 1fr; gap: 12px; }
  .daon-instagram { padding: 0 20px 64px; }
  .daon-instagram h2 { margin-bottom: 24px; font-size: 20px; }
  .daon-instagram__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .daon-youtube-modal { padding: 58px 14px 24px; }
  .daon-youtube-modal__dialog { width: 100%; }
}

/* Public subpage heroes use distinct, locally archived Portfolio cuts. */
.renew-about #visual_container {
  background-image: linear-gradient(rgba(43, 41, 38, .18), rgba(43, 41, 38, .18)), url('/img/portfolio/detail/93/1765945307_i0.jpg');
}
.renew-contact #visual_container {
  background-image: linear-gradient(rgba(43, 41, 38, .18), rgba(43, 41, 38, .18)), url('/img/portfolio/detail/89/1749618776_i0.jpg');
}
.renew-news #visual_container {
  background-image: linear-gradient(rgba(43, 41, 38, .18), rgba(43, 41, 38, .18)), url('/img/portfolio/detail/94/1772764702_i0.jpg');
}
#visual { background-color: var(--renew-soft); }
#visual .visual_content,
#visual .visual_content2,
#visual .visual_content .title,
#visual .visual_content2 .title { color: var(--renew-surface); }

#content,
#container,
#news_wrap { background-color: var(--renew-bg); color: var(--renew-text); }
#container .top_line { border-color: var(--renew-accent); }
#container .top_text { color: var(--renew-text-secondary); }
#container .page_title { color: var(--renew-text); }

#news_wrap .news_title,
#news_wrap .list_box,
#news_wrap .cate_area .cate_wrap .box_area .cate_box,
#news_wrap .view_title { border-color: var(--renew-line); color: var(--renew-text); }
#news_wrap .list_box .text_area .cate_title,
#news_wrap .list_box .text_area .comment,
#news_wrap .list_box .text_area a.btn_more,
#news_wrap .cate_area .cate_wrap .box_area .cate_box ul li a { color: var(--renew-text-secondary); }
#news_wrap .list_box .text_area .subject,
#news_wrap .cate_area .cate_wrap .box_area .cate_box .title { color: var(--renew-text); }
#news_wrap .list_box .text_area a.btn_more:hover,
#news_wrap .cate_area .cate_wrap .box_area .cate_box ul li a:hover { color: var(--renew-accent); }

#footer { background-color: var(--renew-soft); border-color: var(--renew-line); }
#footer_wrap,
#footer_wrap a { color: var(--renew-text-secondary); }
#footer_wrap .footer_link li a { background-color: var(--renew-surface); border-color: var(--renew-line); color: var(--renew-text); }
#footer_wrap .footer_link li a:hover { background-color: var(--renew-accent); border-color: var(--renew-accent); color: var(--renew-surface); }
#footer_wrap .line_div { border-color: var(--renew-line); }

/* REQUEST shell and iframe form retain their existing dimensions and timing. */
#win_request { background-color: var(--renew-soft); color: var(--renew-text); }
#win_request_bg { background-color: var(--renew-text); }
#win_requset_area { color: var(--renew-text-secondary); }
#win_requset_area h3.title { color: var(--renew-text); }
#win_requset_area h3.title span { color: var(--renew-red); }
#win_requset_area .title_sub { color: var(--renew-text-secondary); }
#win_requset_area li a { background-color: var(--renew-surface); border-color: var(--renew-line); color: var(--renew-text-secondary); }
#win_requset_area li a:hover { border-color: var(--renew-accent); color: var(--renew-accent); }
#win_requset_area li a.selected { background-color: var(--renew-accent); border-color: var(--renew-accent); color: var(--renew-surface); }
#win_requset_wrap .btn_close img { filter: grayscale(1) brightness(.34); }

.renew-request-form,
.renew-career-form { background-color: var(--renew-soft); color: var(--renew-text-secondary); }
.renew-request-form .f_input,
.renew-career-form .f_input,
.renew-request-form .f_textarea,
.renew-career-form .f_textarea {
  background-color: var(--renew-surface) !important;
  border-color: var(--renew-line);
  color: var(--renew-text) !important;
}
.renew-request-form .myBtn,
.renew-career-form .myBtn { background-color: var(--renew-accent); color: var(--renew-surface); }
.renew-request-form .myBtn2,
.renew-career-form .myBtn2 { background-color: var(--renew-text-secondary); color: var(--renew-surface); }

/* Portfolio keeps the restored grid/viewer DOM and interaction model. */
.portfolio-list-page,
.portfolio-detail-page { background-color: var(--renew-bg); color: var(--renew-text); }
.portfolio-filter-bar { background-color: rgba(250, 248, 244, .97); border-color: var(--renew-line); }
.portfolio-filter { color: var(--renew-text-secondary); }
.portfolio-filter:hover,
.portfolio-filter:focus-visible,
.portfolio-filter.selected { color: var(--renew-accent); }
.portfolio-item,
.portfolio-empty-thumb,
.portfolio-empty-viewer,
.portfolio-viewer { background-color: var(--renew-soft); }
.portfolio-overlay { background-color: rgba(43, 41, 38, .56); color: var(--renew-surface); }
.portfolio-project-title { color: var(--renew-text); }
.portfolio-project-description { color: var(--renew-text-secondary); }
.portfolio-back { background-color: var(--renew-surface); border-color: var(--renew-line); color: var(--renew-text-secondary); }
.portfolio-back:hover,
.portfolio-back:focus-visible { border-color: var(--renew-accent); color: var(--renew-accent); }
.viewer-prev,
.viewer-next { color: var(--renew-text); filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .85)); }
.viewer-thumbnails { background-color: rgba(43, 41, 38, .68); }
.viewer-thumb { background-color: var(--renew-text); border-color: var(--renew-text-muted); }
.viewer-thumb.active { border-color: var(--renew-red); }