@charset "UTF-8";

/* GOM architecture renewal layer — load after style.css */
:root {
  --gom-ink: #18231f;
  --gom-muted: #68736e;
  --gom-paper: #f7f4ed;
  --gom-card: #ffffff;
  --gom-line: #dfe4df;
  --gom-green: #1f5c45;
  --gom-green-dark: #164534;
  --gom-yellow: #f2c94c;
  --gom-radius: 18px;
  --gom-shadow: 0 16px 44px rgba(24, 35, 31, .08);
}

html { scroll-behavior: smooth; }
body {
  color: var(--gom-ink);
  background: #fff;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  word-break: keep-all;
}

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--gom-yellow);
  outline-offset: 4px;
}

.gom-skip {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  padding: 11px 16px;
  color: #fff;
  background: var(--gom-green-dark);
  border-radius: 8px;
  transform: translateY(-150%);
}
.gom-skip:focus { transform: translateY(0); }

#header {
  height: 88px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gom-line);
}
#header .inner_header { max-width: 1180px; height: 88px; }
#header .title_text {
  color: var(--gom-ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
}
#header .title_text::after {
  content: "현장 경험으로 읽는 건축";
  display: block;
  margin-top: 5px;
  color: var(--gom-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
}

.gom-progress {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: var(--gom-yellow);
  transition: width .08s linear;
}

.gom-home-intro {
  margin: 0 auto 66px;
  padding: 64px 24px 0;
  max-width: 1180px;
}
.is-permalink .gom-home-intro { display: none; }
.gom-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 40px;
  padding: 58px;
  color: #fff;
  background: var(--gom-green-dark);
  border-radius: 28px;
  box-shadow: var(--gom-shadow);
}
.gom-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -160px;
  width: 360px;
  height: 360px;
  border: 70px solid rgba(242,201,76,.18);
  border-radius: 50%;
}
.gom-eyebrow {
  margin: 0 0 18px;
  color: var(--gom-yellow);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}
.gom-hero h2 {
  margin: 0;
  max-width: 680px;
  color: #fff;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.15;
  letter-spacing: -.06em;
}
.gom-hero-copy {
  margin: 22px 0 0;
  max-width: 620px;
  color: rgba(255,255,255,.76);
  font-size: 17px;
  line-height: 1.75;
}
.gom-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.gom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  color: var(--gom-ink);
  background: var(--gom-yellow);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.gom-button--ghost { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); }
.gom-hero-note {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: 24px;
  color: var(--gom-ink);
  background: var(--gom-yellow);
  border-radius: 18px;
}
.gom-hero-note strong { display: block; margin-bottom: 10px; font-size: 18px; }
.gom-hero-note p { margin: 0; font-size: 14px; line-height: 1.65; }

.gom-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 22px;
}
.gom-topic {
  display: block;
  min-height: 128px;
  padding: 24px;
  color: var(--gom-ink);
  background: var(--gom-paper);
  border: 1px solid transparent;
  border-radius: var(--gom-radius);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gom-topic:hover { transform: translateY(-4px); border-color: #cbd5ce; box-shadow: var(--gom-shadow); }
.gom-topic b { display: block; margin-bottom: 9px; font-size: 18px; }
.gom-topic span { color: var(--gom-muted); font-size: 13px; line-height: 1.55; }

#main > .revenue_unit_wrap,
#main > ins.adsbygoogle,
#main > div[id*="ad"] { min-height: 0 !important; margin: 18px auto !important; }
.inner_index { max-width: 1120px; padding-top: 0; }
.is-permalink .inner_index { max-width: 1040px; padding-top: 62px; }
.index_type_common .title_category {
  margin-bottom: 28px;
  color: var(--gom-ink);
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -.05em;
}

.list_horizontal { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.list_horizontal_item {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
  border: 1px solid var(--gom-line);
  border-radius: var(--gom-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.list_horizontal_item:hover { transform: translateY(-4px); box-shadow: var(--gom-shadow); }
.list_horizontal_item .article_content { padding: 0 !important; }
.list_horizontal_item .thumbnail_zone { width: 100% !important; height: 230px !important; }
.list_horizontal_item .thumbnail_post { width: 100% !important; height: 100% !important; background-size: cover; }
.list_horizontal_item .box_contents { padding: 24px 24px 28px !important; }
.list_horizontal_item .title_post { font-size: 21px !important; line-height: 1.45 !important; letter-spacing: -.035em; }
.list_horizontal_item .txt_post { color: var(--gom-muted) !important; line-height: 1.7 !important; }
.list_horizontal_item .btn_more { display: none !important; }
.info_post, .view_info_post { color: var(--gom-muted) !important; }
.thema_apply { color: var(--gom-green) !important; }

.category_content_area { margin: 0 !important; }
.area_view_content { max-width: 820px; margin: 0 auto; }
.area_view_content > .article_content > .info_post {
  margin: 0 0 34px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gom-line);
}
.title_view {
  color: var(--gom-ink) !important;
  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 850 !important;
  line-height: 1.22 !important;
  letter-spacing: -.055em !important;
}
.gom-article-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  color: var(--gom-muted);
  font-size: 13px;
}
.gom-article-tools span { padding: 7px 11px; background: var(--gom-paper); border-radius: 999px; }
.gom-toc {
  margin: 0 0 40px;
  padding: 26px 28px;
  background: var(--gom-paper);
  border-left: 5px solid var(--gom-green);
  border-radius: 0 var(--gom-radius) var(--gom-radius) 0;
}
.gom-toc strong { display: block; margin-bottom: 14px; font-size: 16px; }
.gom-toc ol { margin: 0 !important; padding-left: 20px !important; }
.gom-toc li { margin: 7px 0 !important; }
.gom-toc li.is-sub { margin-left: 18px !important; }
.gom-toc a { color: var(--gom-ink) !important; text-decoration: none !important; }
.gom-toc a:hover { color: var(--gom-green) !important; text-decoration: underline !important; }

#article-view {
  padding: 0 !important;
  color: #26322d;
  font-size: 17px !important;
  line-height: 1.88 !important;
}
#article-view p { margin: 0 0 1.35em !important; }
#article-view h2,
#article-view h3 {
  scroll-margin-top: 110px;
  color: var(--gom-ink) !important;
  letter-spacing: -.04em;
}
#article-view h2 {
  margin: 2.5em 0 .85em !important;
  padding: 0 0 12px !important;
  border-bottom: 3px solid var(--gom-ink);
  font-size: 29px !important;
}
#article-view h3 { margin: 2em 0 .7em !important; font-size: 23px !important; }
#article-view a { color: var(--gom-green) !important; text-underline-offset: 3px; }
#article-view img { border-radius: 12px; }
#article-view blockquote { border-radius: 12px; }
#article-view table { display: block; width: 100%; overflow-x: auto; }

.area_tag { margin-top: 52px !important; padding: 24px !important; background: var(--gom-paper); border-radius: var(--gom-radius); }
.related_type_view { margin-top: 54px !important; }
.related_type_view .title_related { color: var(--gom-ink) !important; font-size: 25px !important; font-weight: 800; }
.related_type_view .list_related { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.related_type_view .list_related li { float: none !important; width: auto !important; margin: 0 !important; }
.related_type_view .link_related { height: 170px !important; border-radius: 14px; overflow: hidden; }
.related_type_view .link_related .txt { padding: 18px !important; }
.related_type_view .link_related .txt strong { font-size: 15px !important; line-height: 1.45 !important; }

#aside { background: var(--gom-paper); }
#footer { padding: 38px 24px; color: var(--gom-muted); background: var(--gom-ink); }

@media (max-width: 820px) {
  #header, #header .inner_header { height: 70px; }
  #header .title_text { font-size: 21px; }
  #header .title_text::after { display: none; }
  .gom-home-intro { padding: 28px 16px 0; margin-bottom: 42px; }
  .gom-hero { grid-template-columns: 1fr; gap: 24px; padding: 36px 26px; border-radius: 20px; }
  .gom-hero h2 { font-size: 37px; }
  .gom-hero-copy { font-size: 15px; }
  .gom-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gom-topic { min-height: 108px; padding: 18px; }
  .inner_index, .is-permalink .inner_index { padding: 34px 18px 0; }
  .list_horizontal { grid-template-columns: 1fr; gap: 18px; }
  .list_horizontal_item .thumbnail_zone { height: 210px !important; }
  .title_view { font-size: 34px !important; }
  #article-view { font-size: 16.5px !important; line-height: 1.82 !important; }
  #article-view h2 { font-size: 25px !important; }
  .gom-toc { padding: 22px; }
  .related_type_view .list_related { grid-template-columns: 1fr; }
  .related_type_view .link_related { height: 150px !important; }
}

@media (max-width: 480px) {
  .gom-topic-grid { grid-template-columns: 1fr; }
  .gom-topic { min-height: 0; }
  .gom-button { width: 100%; }
  .title_view { font-size: 30px !important; }
}

/* Thumbnail legibility: preserve square, text-heavy cover artwork. */
.list_horizontal_item .article_content {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 190px;
}
.list_horizontal_item .thumbnail_zone {
  width: 190px !important;
  height: 190px !important;
  background: var(--gom-paper);
}
.list_horizontal_item .thumbnail_post {
  display: block;
  background-color: var(--gom-paper);
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center !important;
}
.list_horizontal_item .box_contents {
  min-width: 0;
  padding: 22px !important;
}
.list_horizontal_item .txt_post {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 820px) {
  .list_horizontal_item .article_content {
    grid-template-columns: 160px minmax(0, 1fr);
    min-height: 160px;
  }
  .list_horizontal_item .thumbnail_zone {
    width: 160px !important;
    height: 160px !important;
  }
  .list_horizontal_item .box_contents { padding: 18px !important; }
  .list_horizontal_item .title_post { font-size: 18px !important; }
  .list_horizontal_item .txt_post { -webkit-line-clamp: 2; }
}

@media (max-width: 520px) {
  .list_horizontal_item .article_content { display: block; }
  .list_horizontal_item .thumbnail_zone {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  .list_horizontal_item .box_contents { padding: 20px !important; }
  .list_horizontal_item .txt_post { -webkit-line-clamp: 3; }
}