@font-face {
  font-family: "DungGeunMo";
  src: url("./DungGeunMo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --fs-15: 15px;
  --fs-12: 12px;
  --fs-10: 10px;

  --bg: #6f95ff;
  --ink: #111;
  --border: #111;
  --muted: #777;
  --placeholder: #d7d7d7;
  --dash: rgba(255,255,255,.55);

  --gap-between: 6px;
  --outer-top-padding: 46px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "DungGeunMo", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

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

.stage{
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px 12px;
}

/* ===== outer ===== */
.outer{
  width: min(360px, 100%);
  height: calc(100vh - 32px);
  position: relative;
  padding-top: var(--outer-top-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gap-between);
}

.outer::before{
  content:"";
  position: absolute;
  left: -10px;
  right: -10px;
  top: calc(var(--outer-top-padding) - 10px);
  bottom: -10px;
  border: 2px dashed var(--dash);
  border-radius: 38px;
  pointer-events: none;
}

/* ===== tabs ===== */
.tabs{
  position: absolute;
  top: 14px;
  left: 26px;
  display: flex;
  gap: 16px;
  z-index: 20;
}

.tab{
  height: 34px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6e6e6;
  border: 2px solid var(--border);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  font-size: var(--fs-15);
  margin-bottom: -2px;
}

.tab[aria-current="page"]{
  background: #fff;
  border-bottom: none;
}

/* ===== boxes ===== */
.box{
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 26px;
  padding: 16px;
}

/* top profile */
.box-top{
  padding: 18px 16px;
}
.profile{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
}
.avatar{
  width: 110px;
  height: 110px;
  background: var(--placeholder);
  border-radius: 14px;
  background: url("img/profile.jpg") center / cover no-repeat;
}
.counts{ font-size: var(--fs-12); margin: 0 0 8px; }
.name{ font-size: var(--fs-15); margin: 0 0 6px; }
.sub{ font-size: var(--fs-12); color: var(--muted); margin: 0; }

/* springs */
.springs{ position: relative; height: 0; }
.spring{
  position: absolute;
  width: 10px;
  height: 30px;
  border: 2px solid #8d8d8d;
  border-radius: 8px;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 48%,
    #bdbdbd 50%,
    #cfcfcf 52%,
    #cfcfcf 100%
  );
  top: -18px;
}
.s1{ left: 78px; }
.s2{ left: 118px; }
.s3{ right: 118px; }
.s4{ right: 78px; }

/* bottom write box */
.box-bottom{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.deadline{
  margin: 0 4px 0;
  font-size: var(--fs-10);
  color: #ff2a2a;
  text-align: right;
}

.to-row{ padding-left: 4px; }
.to-pill{
  display: inline-block;
  font-size: var(--fs-15);
}

.write-form{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ✅ 텍스트박스(큰 네모) = message-box */
.message-box{
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #666;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

/* 위 구역: textarea */
.message{
  flex: 1;
  min-height: 260px;
  resize: none;
  border: 0;
  border-radius: 0;
  padding: 12px;
  font-size: var(--fs-12);
  outline: none;
  background: transparent;
}

/* 수평선 */
.message-divider{
  height: 1px;
  background: #666;
  margin: 0 10px;
}

/* 아래 구역: 닉네임 */
.message-nick{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 10px 8px;
}

.nick-label{
  font-size: var(--fs-12);
  color: #111;
}

.nickname{
  width: 120px;
  height: 26px;
  border: 0;
  border-bottom: 1px solid #666;
  font-size: var(--fs-12);
  outline: none;
  padding: 2px 2px;
  background: transparent;
}

/* placeholder 색 */
.nickname::placeholder{
  color: rgba(0,0,0,.45);
}

.dice{
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.dice img{
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

/* 공개/비공개 영역: 텍스트박스 밖 오른쪽 */
.bottom-row{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 2px;
}

.privacy{
  display: grid;
  gap: 6px;
  font-size: var(--fs-10);
  white-space: nowrap;
}

.check{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.check input{ transform: translateY(1px); }

.privacy em{
  font-style: normal;
  color: #555;
}

.send-main{
  align-self: center;
  width: 92px;
  height: 34px;
  border: 1px solid #666;
  background: #efefef;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--fs-12);
}


/* 모바일 */
@media (max-width: 480px){
  .stage{
    padding: 20px 16px;
    height: 100dvh;
  }
  .outer{
    width: 100%;
    height: 100%;
  }
  .message{
    min-height: 280px;
  }
}
/* ===== MODAL (NO BLUR VERSION) ===== */

.modal{
  position: absolute;
  inset: 0;
  display: none;
  z-index: 50;
  pointer-events: none;
}

.outer.is-modal-open .modal{
  display: block;
  pointer-events: auto;
}

/* ❌ 배경 blur 전부 제거 */
.outer.is-modal-open .box-top,
.outer.is-modal-open .box-bottom,
.outer.is-modal-open .springs,
.outer.is-modal-open .tabs{
  filter: none;
}


/* 카드 */
.modal-card{
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: calc(100% - 56px);
  max-width: 320px;
  background: #fff;
  border: 1px solid #666;
  border-radius: 14px;
  padding: 14px 14px 12px;
  z-index: 1;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* 이하 스타일 유지 */
.modal-title{
  margin: 0 0 8px;
  font-size: var(--fs-12);
}

.modal-help{
  margin: 0 0 10px;
  font-size: var(--fs-10);
  color: #ff2a2a;
  line-height: 1.35;
}

.modal-check{
  margin-bottom: 8px;
  font-size: var(--fs-10);
}

.pin{
  width: 100%;
  height: 34px;
  border: 1px solid #666;
  border-radius: 10px;
  padding: 0 10px;
  font-size: var(--fs-12);
  outline: none;
  background: #fff;
}

.send-final{
  margin: 12px auto 0;
  display: block;
  width: 92px;
  height: 34px;
  border: 1px solid #666;
  background: #efefef;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--fs-12);
}

/* a11y */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =======================================
   write 전용 반응형
   - 공통(style.css)의 철학 그대로: 480px 기준
   - list.css처럼 내부 스크롤 안정성: min-height:0 체인
======================================= */

/* ✅ 0) 모바일에서 내부 높이 계산 안정화 (iOS/크롬) */
@media (max-width: 480px){
  .stage{ min-height: 0; }
  .outer{ min-height: 0; }
  .box-bottom{ min-height: 0; }
  .write-form{ min-height: 0; }
  .message-box{ min-height: 0; }
  .message{ min-height: 0; } /* textarea가 flex로 줄어들 수 있게 */
}

/* ✅ 1) 기본 모바일(폭 480 이하) */
@media (max-width: 480px){
  .stage{
    padding: 20px 16px;  /* 공통 style.css와 동일 톤 */
    height: 100dvh;
  }

  .outer{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* 아래 박스에서 textarea가 화면을 꽉 차게 */
  .box-bottom{
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* “텍스트박스(큰 네모)”가 남은 공간을 먹게 */
  .write-form{
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .message-box{
    flex: 1;
  }

  /* 너무 짧은 화면에서 닉네임/공개영역이 밀려서 겹치면 줄이기 */
  .message{
    padding: 10px;
  }

  /* 공개/비공개 영역이 너무 아래로 내려가면 살짝 타이트 */
  .bottom-row{
    margin-top: 2px;
  }
}

/* ✅ 2) “짧은 화면” (iPhone SE급) — 높이 700 미만 */
@media (max-width: 480px) and (max-height: 699px){
  /* 위 박스(프로필) 조금만 줄여서 textarea 공간 확보 */
  .box-top{
    padding: 14px 14px;
  }
  .avatar{
    width: 96px;
    height: 96px;
  }
  .profile{
    grid-template-columns: 96px 1fr;
    gap: 12px;
  }

  /* 스프링 간격 살짝 좁혀서 아래 박스 위 공간 확보 */
  .spring{
    height: 26px;
    top: -16px;
  }

  /* textarea 최소높이 강제 제거(짧은 화면에서 터짐 방지) */
  .message{
    min-height: 0;
  }

  /* Send 버튼 살짝 줄여서 하단 여유 */
  .send-main{
    width: 86px;
    height: 32px;
  }
}

/* ✅ 3) “긴 화면” (iPhone 12~ Pro Max 등) — 높이 700 이상 */
@media (max-width: 480px) and (min-height: 700px){
  .stage{
    padding: 60px 20px;  /* 공통 style.css 긴폰 규칙과 동일 */
  }

  /* 긴 화면은 여백 많으니 textarea 숨통 트이게 */
  .message{
    padding: 12px;
  }

  .box-bottom{
    gap: 12px;
  }
}

/* ✅ 4) 태블릿/데스크톱(768 이상) — 공통 style.css 톤 유지 */
@media (min-width: 768px){
  .stage{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 0;
    height: 100vh;
  }

  .outer{
    width: 600px;  /* 공통과 맞춤 */
    height: 92vh;
    max-height: 1100px;
  }

  /* textarea가 너무 넓어보이면 좌우 패딩 약간 */
  .box-bottom{
    padding: 18px;
  }

  .message{
    padding: 14px;
  }

  /* 공개/비공개 영역이 너무 붙으면 약간 띄우기 */
  .bottom-row{
    padding-right: 6px;
  }
}


/* ✅ 키보드 올라올 때 write 페이지 레이아웃 안정화 */
@media (max-width: 480px){

  /* 1) 스크롤 막지 말기 (이게 제일 중요) */
  body{
    overflow-x: hidden;
    overflow-y: auto;          /* ✅ hidden → auto */
    -webkit-overflow-scrolling: touch;
  }

  /* 2) height 고정하지 말고 min-height로 */
  .stage{
    height: auto !important;
    min-height: 100dvh;
  }

  .outer{
    height: auto !important;
    min-height: calc(100dvh - 32px);
  }
}