/* =========================================================
   대림우드컴퍼니 홈페이지 준비 중 페이지
   - 오른쪽 이미지만 교체하려면:
     images/coming-interior.jpg 파일을 같은 이름으로 교체하세요.
   ========================================================= */

:root {
  --background: #f8f2ea;
  --background-deep: #efe2d1;
  --brown: #4d321f;
  --brown-soft: #75553c;
  --gold: #bd843a;
  --gold-light: #d8ad6c;
  --line: rgba(177, 125, 57, 0.7);
  --white: #fffdf9;
}

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

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  color: var(--brown);
  background: var(--background);
  font-family: "Noto Sans KR", sans-serif;
  word-break: keep-all;
}

a {
  color: inherit;
  text-decoration: none;
}

.coming-soon {
  display: grid;
  grid-template-columns: minmax(0, 64fr) minmax(420px, 36fr);
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 40%, rgba(255, 255, 255, 0.82), transparent 42%),
    linear-gradient(115deg, #fbf6f0 0%, var(--background) 62%, #efe0cd 100%);
}

/* 왼쪽 콘텐츠 영역 */
.coming-soon__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 30px ;
  isolation: isolate;
}

.content-inner {
  position: relative;
  z-index: 3;
  width: min(100%, 790px);
  text-align: center;
  transform: translateY(-1.5%);
}

/* 로고 */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(35px, 4.2vh, 58px);
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  /*width: 112px;
  height: 94px;
  margin-bottom: 8px;
  background: linear-gradient(145deg, #8a4818, #55260e);
  clip-path: polygon(50% 0%, 95% 24%, 95% 76%, 50% 100%, 5% 76%, 5% 24%);*/
}

/*.brand-mark::before {
  position: absolute;
  inset: 5px;
  content: "";
  background: var(--background);
  clip-path: inherit;
}

.brand-mark span {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 53px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -6px;
  color: #7a2f13;
  transform: translateX(-2px);
}*/
.brand-mark img {
  width: 120px;
  margin-bottom: 7px;
}

.brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 1.75vw, 31px);
  letter-spacing: 0.16em;
  color: #a26d2b;
}

/* 메인 문구 */
.message h1 {
  font-family: "Noto Serif KR", serif;
  font-size: clamp(33px, 3.05vw, 54px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.045em;
  color: #4b3020;
}

.description {
  margin-top: clamp(25px, 3vh, 38px);
  font-size: clamp(14px, 1.12vw, 19px);
  font-weight: 400;
  line-height: 1.75;
  color: #725e4d;
}

.short-line {
  width: 48px;
  height: 1px;
  margin: 24px auto 17px;
  background: var(--line);
}

.domain {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 1.65vw, 28px);
  letter-spacing: 0.11em;
  color: #a76f2c;
}

.waiting-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(330px, 75%);
  min-height: 55px;
  margin: 16px auto 0;
  padding: 13px 28px;
  border: 1px solid rgba(191, 133, 56, 0.28);
  border-radius: 999px;
  color: #fffdf9;
  font-size: clamp(16px, 1.3vw, 21px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(100deg, #d19a50, #b87a2e);
  box-shadow:
    0 8px 16px rgba(118, 69, 24, 0.19),
    inset 0 1px rgba(255, 255, 255, 0.45);
}

/* 연락처 */
.contact {
  width: min(100%, 560px);
  margin: clamp(35px, 4.2vh, 58px) auto 0;
}

.contact-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.contact-title-row h2 {
  font-family: "Noto Serif KR", serif;
  font-size: clamp(17px, 1.25vw, 22px);
  font-weight: 600;
  color: #5b402d;
}

.contact-title-line {
  position: relative;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line));
}

.contact-title-line:last-child {
  background: linear-gradient(to left, transparent, var(--line));
}

.contact-title-line::after {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}

.contact-title-line:first-child::after {
  right: -3px;
}

.contact-title-line:last-child::after {
  left: -3px;
}

.contact-list {
  display: grid;
  gap: 10px;
  margin-top: 17px;
}

.contact-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-size: clamp(14px, 1.05vw, 18px);
  color: #5d4939;
}

.contact-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid #b77a2e;
  border-radius: 50%;
  color: #a36d26;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.contact-icon--house {
  font-size: 19px;
  transform: translateY(-1px);
}

.contact-phone {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.contact-phone:hover {
  color: #9e641f;
}

/* 오른쪽 인테리어 */
.coming-soon__visual {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  border-top-left-radius: 54% 24%;
  background: #bf8b58;
  box-shadow: -25px 0 45px rgba(84, 50, 20, 0.08);
}

.visual-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  object-fit: cover;
  object-position: 51% center;
}

/* 왼쪽 장식선 */
.background-lines--left {
  position: absolute;
  z-index: 1;
  top: -8%;
  left: -170px;
  width: 390px;
  height: 75%;
  border: 1px solid rgba(194, 145, 79, 0.25);
  border-radius: 48%;
  transform: rotate(-7deg);
}

.background-lines--left::before,
.background-lines--left::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(194, 145, 79, 0.24);
  border-radius: inherit;
}

.background-lines--left::before {
  inset: 18px -11px -18px 18px;
}

.background-lines--left::after {
  inset: 39px -22px -39px 38px;
}

/* 왼쪽 아래 나무 단면 CSS 장식 */
.wood-slice {
  position: absolute;
  z-index: 2;

  /* 위치 */
  left: -145px;
  bottom: -155px;

  /* 크기 */
  width: clamp(320px, 25vw, 500px);
  aspect-ratio: 1;
  overflow: hidden;

  /* 완전한 정원이 아닌 자연스러운 원목 형태 */
  border-radius: 49% 51% 48% 52% / 52% 48% 52% 48%;

  background:

    /* 얇고 미세한 나뭇결 */
    repeating-linear-gradient(
      87deg,
      rgba(87, 48, 21, 0.045) 0,
      rgba(87, 48, 21, 0.045) 1px,
      transparent 1px,
      transparent 4px
    ),

    /* 반대 방향의 가는 목재결 */
    repeating-linear-gradient(
      103deg,
      transparent 0,
      transparent 7px,
      rgba(255, 246, 226, 0.09) 8px,
      transparent 10px
    ),

    /* 부분적으로 진하고 밝아지는 자연스러운 얼룩 */
    conic-gradient(
      from 10deg at 37% 58%,
      rgba(96, 49, 18, 0.16) 0deg,
      transparent 35deg,

      rgba(255, 232, 195, 0.19) 65deg,
      transparent 105deg,

      rgba(104, 56, 22, 0.12) 140deg,
      transparent 190deg,

      rgba(255, 239, 210, 0.2) 225deg,
      transparent 265deg,

      rgba(91, 45, 16, 0.14) 310deg,
      transparent 360deg
    ),

    /* 촘촘하고 얇은 나이테 */
    repeating-radial-gradient(
      ellipse at 37% 58%,

      transparent 0,
      transparent 5px,

      rgba(112, 64, 29, 0.13) 6px,
      rgba(112, 64, 29, 0.13) 7px,

      transparent 8px,
      transparent 12px,

      rgba(137, 83, 41, 0.16) 13px,
      rgba(137, 83, 41, 0.16) 15px,

      transparent 16px,
      transparent 22px
    ),

    /* 조금 더 진한 큰 나이테 */
    repeating-radial-gradient(
      ellipse at 37% 58%,

      transparent 0,
      transparent 23px,

      rgba(102, 55, 22, 0.29) 24px,
      rgba(102, 55, 22, 0.29) 26px,

      rgba(230, 187, 125, 0.09) 27px,
      rgba(230, 187, 125, 0.09) 38px
    ),

    /* 나무 기본색 */
    radial-gradient(
      ellipse at 37% 58%,

      #8b4c1e 0%,
      #aa6a32 5%,
      #c98c4d 12%,
      #e1b77b 21%,
      #c68748 32%,
      #e5bd82 44%,
      #c68849 57%,
      #e5bd83 72%,
      #c08042 87%,
      #a15d27 100%
    );

  background-blend-mode:
    multiply,
    soft-light,
    multiply,
    multiply,
    normal,
    normal;

  box-shadow:
    18px 14px 38px rgba(83, 48, 25, 0.13),
    inset -25px -20px 45px rgba(84, 41, 12, 0.17),
    inset 18px 15px 35px rgba(255, 235, 200, 0.15);

  transform: rotate(-3deg) scaleX(0.9);
  transform-origin: center;
}


/* 나무 표면의 자연스러운 얼룩 */
.wood-slice::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;

  background:
    radial-gradient(
      ellipse at 20% 65%,
      rgba(69, 34, 11, 0.23) 0,
      rgba(69, 34, 11, 0.1) 8%,
      transparent 18%
    ),

    radial-gradient(
      ellipse at 51% 34%,
      rgba(255, 239, 207, 0.17) 0,
      transparent 27%
    ),

    radial-gradient(
      ellipse at 79% 65%,
      rgba(93, 45, 15, 0.12) 0,
      transparent 31%
    ),

    repeating-linear-gradient(
      96deg,
      transparent 0,
      transparent 13px,
      rgba(79, 40, 13, 0.045) 14px,
      transparent 17px
    );

  mix-blend-mode: multiply;
  opacity: 0.9;
}


/* 나무 중심부 */
.wood-slice::after {
  position: absolute;
  left: 29%;
  top: 51%;
  width: 78px;
  height: 65px;
  content: "";

  border-radius:
    46% 54% 48% 52% /
    55% 43% 57% 45%;

  background:
    repeating-radial-gradient(
      ellipse at 43% 52%,
      rgba(76, 36, 11, 0.32) 0,
      rgba(76, 36, 11, 0.32) 2px,
      transparent 3px,
      transparent 7px
    ),

    radial-gradient(
      ellipse at center,
      #7e4115 0%,
      #a75f27 45%,
      rgba(132, 67, 20, 0.26) 67%,
      transparent 73%
    );

  opacity: 0.86;
  transform: rotate(8deg);
}

/* 큰 화면에서 지나치게 넓어지는 것을 방지 */
@media (min-width: 1800px) {
  .coming-soon {
    grid-template-columns: minmax(0, 66fr) minmax(520px, 34fr);
  }

  .content-inner {
    width: min(100%, 900px);
  }

}

/* 태블릿 */
@media (max-width: 1050px) {
  .coming-soon {
    grid-template-columns: minmax(0, 60fr) minmax(350px, 40fr);
  }

  .coming-soon__content {
    padding-inline: 36px;
  }

  .contact-item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .contact-phone {
    grid-column: 2;
  }

  .brand-mark img {
  width: 80px;
  margin-bottom: 7px;
}
}

/* 모바일 */
@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  .coming-soon {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .coming-soon__content {
    order: 1;
    min-height: auto;
    padding: 48px 22px 52px;
  }

  .content-inner {
    width: 100%;
    transform: none;
  }

  .brand {
    margin-bottom: 31px;
  }

  .brand-mark {
    width: 83px;
    height: 70px;
  }

  .brand-mark span {
    font-size: 39px;
    letter-spacing: -5px;
  }

  .brand-name {
    font-size: 17px;
    letter-spacing: 0.1em;
  }

  .message h1 {
    font-size: clamp(15px, 7.3vw, 24px);
    line-height: 1.55;
  }

  .description {
    font-size: 12px;
    line-height: 1.75;
  }


  .waiting-badge {
    width: min(290px, 88%);
    min-height: 52px;
    font-size: 17px;
  }

  .contact {
    margin-top: 38px;
  }

  .contact-list {
    gap: 14px;
  }

  .contact-item {
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 9px 11px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(177, 125, 57, 0.2);
    font-size: 14px;
  }

  .contact-phone {
    grid-column: 2;
    color: #9f6829;
  }

  .coming-soon__visual {
    order: 2;
    width: 100%;
    min-height: 390px;
    height: 48vh;
    border-top-left-radius: 48% 22%;
    border-top-right-radius: 0;
  }

  .visual-image {
    min-height: 0;
    height: 100%;
    object-position: center 54%;
  }

  .wood-slice {
    display: none;
  }

  .background-lines--left {
    top: -70px;
    left: -260px;
    opacity: 0.65;
  }
}

@media (max-width: 430px) {
  .coming-soon__content {
    padding-inline: 17px;
  }

  .message h1 {
    font-size: 22px;
  }

  .brand-name {
    font-size: 15px;
  }

  .description {
    font-size: 11px;
    line-height: 1.75;
  }
}

/* 움직임을 줄이는 환경 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}