/*
 * ── 색 ──
 *
 * ★ 판매 페이지(public/index.html)와 **같은 색**을 씁니다.
 *   대문에서 보라빛 화면을 보고 들어오셨는데 글쓰기 화면만 다른 색이면,
 *   같은 곳에 계신 건지 헷갈리십니다. 그래서 두 화면의 색을 하나로 맞췄습니다.
 *   색을 바꾸실 때는 반드시 두 파일을 같이 고치십시오 (test/deploy.mjs 가 봅니다).
 *
 * ★ 밝은 화면용 변형은 두지 않습니다. 어느 폰에서 여시든 같은 화면이 나가야
 *   화면 사진으로 설명드릴 때 말이 맞습니다.
 */
:root {
  color-scheme: dark;

  --bg: #0A0B0E; --panel: #14161B; --panel-2: #1A1D24;
  --line: rgba(255,255,255,.09);
  --text: #EDEFF2; --muted: #A2AAB6;

  /* 주조색. 고른 칸·초점 테두리·강조에 씁니다. */
  --accent: #8B5CF6;
  /* 보라 바탕 위 글자는 안 읽힙니다. 글자에 쓸 때는 이 밝은 쪽을 씁니다. */
  --accent-text: #B9A3FF;
  --err: #FF6B5A;
  /* '준비됨' 같은 상태 표시. 주조색이 보라가 되면서 초록 자리가 없어졌는데,
     정상/고장은 색만 보고 알아야 해서 따로 남깁니다. */
  --ok: #3FD07A;

  /* 제일 눌러야 할 버튼 하나에만. 판매 페이지의 --grad 와 같은 줄기입니다. */
  --grad: linear-gradient(100deg,#FF7A62 0%,#D96BE0 46%,#8B5CF6 100%);

  --radius: 10px;
}
body {
  /* 판매 페이지처럼 위쪽에 빛 한 겹. 스크롤하면 같이 올라가 사라집니다. */
  background-image:
    radial-gradient(620px 320px at 82% -160px, rgba(139,92,246,.20), rgba(139,92,246,0) 70%),
    radial-gradient(520px 280px at 12% -130px, rgba(255,107,90,.13), rgba(255,107,90,0) 70%);
  background-repeat: no-repeat;
}
* { box-sizing: border-box; }
/* .layout 처럼 display 가 지정된 요소는 hidden 만으로는 안 숨는다. 게이트/도구를 확실히 감춘다. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
}
h1 { font-size: 16px; margin: 0; font-weight: 650; }
h2 { font-size: 12px; margin: 0 0 4px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.badge {
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.bad { color: var(--err); border-color: var(--err); }
/* 기간이 얼마 안 남았을 때. 오류는 아니지만 눈에 걸려야 한다. */
.badge.warn { color: var(--err); border-color: var(--err); }
.badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* 배지처럼 생겼지만 누를 수 있는 것 */
.badge.as-btn { cursor: pointer; font-family: inherit; }
.badge.as-btn:hover { color: var(--text); border-color: var(--muted); }

/*
 * 코드 입력 화면.
 * 안내를 읽는 화면이라 한 칸으로 좁게 세운다. 폰에서 읽을 폭이 곧 최대 폭이다.
 */
.gate { max-width: 520px; margin: 0 auto; padding: 24px 14px 40px; }
.gate-card { padding: 18px; }
.gate-title { font-size: 15px; color: var(--text); letter-spacing: 0; margin-bottom: 12px; }
.terms-lead { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.terms { margin: 0 0 14px; padding-left: 18px; font-size: 13px; line-height: 1.75; color: var(--text); }
.terms li { margin-bottom: 7px; }
.terms b { font-weight: 650; }
.gate-hint { margin: 10px 0 0; }

/*
 * ══ 코드를 잊으셨을 때 ══
 *
 * 접어둔다. 코드를 갖고 계신 분께는 보일 이유가 없고,
 * 펼쳐져 있으면 첫 화면이 '또 뭘 적어야 하나' 로 읽힌다.
 * 대신 잊으신 분 눈에는 반드시 띄어야 해서 밑줄을 둔다.
 */
.findcode { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.findcode summary {
  list-style: none; cursor: pointer;
  font-size: 13px; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.findcode summary::-webkit-details-marker { display: none; }
.findcode summary:hover { color: var(--text); }
.findcode > .under { margin: 10px 0 4px; }
.findcode .field { margin-top: 8px; }
.findcode .btn { width: 100%; margin-top: 10px; }
.findcode .notice { margin-top: 10px; }
.findcode-ok {
  margin-top: 12px; padding: 12px;
  border: 1px solid var(--accent); border-radius: 10px;
  background: var(--panel-2);
}
.findcode-ok .under:first-child { margin-top: 0; }
.findcode-ok .mycode-value { margin: 4px 0 8px; }
.gate .notice { margin-top: 12px; }

/* 체크 전에는 아래 칸이 잠긴다. 눌러야 할 곳으로 보이게 칸처럼 만든다. */
.check {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; margin-bottom: 14px; font-size: 14px; line-height: 1.4;
}
.check input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); }

.field input:disabled, .field textarea:disabled, .field select:disabled { opacity: .5; cursor: not-allowed; }
/* 코드는 GH-8F3K2 처럼 짧고 헷갈리기 쉬워서 글자를 띄우고 크게 보여준다. */
#code { text-transform: uppercase; letter-spacing: .12em; font-size: 16px; }

.layout {
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: 14px; padding: 14px; height: calc(100vh - 53px);
}
.side { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.hint { font-size: 11px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }

.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-family: inherit; font-size: 13px; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/*
 * 글 종류 고르기.
 * 장갑 낀 손으로 현장에서 누른다. 두 칸 다 손가락 하나로 확실히 눌리는 크기여야 한다.
 */
.kinds { display: grid; gap: 8px; }
.kind {
  display: flex; align-items: center; gap: 10px; min-height: 56px;
  padding: 10px 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
.kind input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); }
.kind-body { display: block; line-height: 1.35; }
.kind-body b { display: block; font-size: 14px; font-weight: 650; }
.kind-body em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* 고른 쪽. 라디오 점만으로는 어느 쪽을 골랐는지 한눈에 안 들어온다. */
.kind.on { border-color: var(--accent); }
.kind.on .kind-body b { color: var(--accent-text); }
.kind:hover:not(.on) { border-color: var(--muted); }

/* 칸 이름은 위 h2 로 이미 보인다. 화면 낭독기에는 남기고 눈에서만 뺀다. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.field .opt { font-style: normal; opacity: .8; }
/* 칸 아래 한 줄 설명. 무엇을 적어야 할지 모르겠는 칸에만 붙인다. */
.field .under {
  display: block; font-style: normal; font-size: 11px; color: var(--muted);
  margin-top: 5px; line-height: 1.5;
}
/* 법이 걸리는 자리에만 씁니다. 남발하면 아무 데도 안 걸립니다. */
.field .under.warn { color: var(--err); }
.field .under.warn b { color: var(--err); }

/* 이 글의 검색 순위를 결정하는 칸. 다른 칸과 같아 보이면 그냥 지나친다. */
#place-field span { color: var(--accent-text, var(--accent)); font-weight: 600; }
#place { border-color: var(--accent); }

/*
 * 접히는 칸 (업체와 읽는 사람).
 * 한 번 적으면 잘 안 바뀌는 값이라 접어둔다. 다만 접힌 칸은 잊히기 쉬워서
 * 요약줄에 업체명을 띄워 지금 뭐가 들어 있는지 보이게 해둔다.
 */
.fold summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary h2 { margin: 0; }
.fold summary::after { content: '▾'; color: var(--muted); font-size: 12px; margin-left: auto; }
.fold[open] summary::after { content: '▴'; }
.fold[open] summary { margin-bottom: 12px; }
.fold-note { font-size: 11px; color: var(--muted); }

.btn {
  appearance: none; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); padding: 9px 14px; border-radius: 8px;
  font-size: 13px; font-family: inherit; cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary {
  width: 100%; background: var(--grad); border-color: transparent;
  /* 그라데이션 위에서는 어두운 글자가 산호 쪽에서 탁해집니다. 흰 글자로 고정합니다. */
  color: #fff; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 10px 26px -12px rgba(180,80,180,.8);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); }

/*
 * 카카오톡 문의. 카톡은 노란색이라는 걸 다들 알고 있어서, 글자를 안 읽고도 눌린다.
 * 노랑 위 검은 글씨는 카카오가 정한 조합이라 어두운 화면에서도 그대로 읽힌다.
 */
.btn.kakao {
  display: block; width: 100%; margin-top: 12px; text-align: center;
  background: #FEE500; border-color: #FEE500; color: #191919;
  font-weight: 650; text-decoration: none; padding: 12px 14px;
}
.btn.kakao:hover { opacity: .92; }
/* 위 배지 줄의 작은 문의하기. 눈에 띄되 상태 배지들을 밀어내지 않을 정도로만. */
.badge.ask { text-decoration: none; border-color: #FEE500; color: #d8b400; }

.main {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.main-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.panel { padding: 24px; overflow-y: auto; flex: 1; }
.empty { color: var(--muted); text-align: center; margin-top: 70px; }

.preview { max-width: 680px; }
.preview h1 { font-size: 24px; line-height: 1.35; margin: 0 0 6px; }
.preview .meta { color: var(--muted); font-size: 12px; margin: 0 0 24px; }
.preview section { margin-bottom: 24px; }
.preview h3 { font-size: 17px; margin: 0 0 10px; }
.preview p { margin: 0 0 12px; }
.preview ul { margin: 0 0 12px; padding-left: 20px; }
.preview li { margin-bottom: 4px; }
.preview .closing { padding: 12px 14px; background: var(--panel-2); border-radius: 8px; }
.preview .tags { color: var(--muted); font-size: 12px; margin-top: 18px; }

/*
 * ══ 홈 화면에 두기 ══
 *
 * 코드를 넣고 들어오신 분께만, 한 번만 보여드리는 칸입니다.
 * 담으셨거나 '닫기' 를 누르시면 다시 안 나옵니다 (app.js 가 정합니다).
 * 여기서 요란하면 글 쓰러 오신 분을 막아서는 꼴이라, 카드 한 장으로 조용히 둡니다.
 */
/*
 * ══ 첫 글 ══
 *
 * 아직 한 편도 안 쓰신 분께만 맨 위에 뜬다. 한 편 쓰시면 사라진다.
 * 여기서만 테두리에 색을 준다 — 이 화면에서 지금 할 일이 이것 하나라는 뜻이다.
 */
.firstpost { border-color: var(--accent); }
.firstpost h2 { margin: 2px 0 8px; font-size: 18px; line-height: 1.4; }
.fp-eyebrow {
  margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent-text);
}
.firstpost .under { margin: 0 0 14px; }
.firstpost .under b { color: var(--text); font-weight: 600; }
.firstpost .btn { width: 100%; }

/*
 * ══ 내 이용 코드 ══
 *
 * 늘 보여야 한다. 한 번 들어오신 뒤로 코드를 다시 볼 곳이 없으면,
 * 폰을 바꾸시는 날 사장님께 전화가 온다.
 *
 * 처음엔 설명이 딸린 큰 카드, '저장했습니다' 를 누르시면 한 줄로 줄어든다.
 * 줄어들어도 코드 자체는 남는다 — 없애면 그날 또 못 찾으신다.
 */
.mycode { border-color: var(--line); }
.mycode-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mycode-label b {
  display: block; font-size: 11.5px; font-weight: 500; color: var(--muted);
  margin-bottom: 2px;
}
/* 코드는 눈으로 베껴 적으실 수도 있다. 크고, 글자 하나하나가 떨어져 보이게. */
.mycode-value {
  margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.mycode .under { margin: 10px 0 0; }
.mycode-btns { display: flex; gap: 8px; margin-top: 10px; }
.mycode-btns .btn.small { flex: 1; padding: 8px 10px; font-size: 12.5px; text-align: center; }
.mycode .btn.small.quiet {
  flex: none; padding: 6px 11px; font-size: 12px;
  background: transparent; color: var(--muted);
}
.mycode .btn.small.quiet:hover { color: var(--text); }
/* 저장해 두신 뒤. 한 줄만 남는다. */
.mycode.tidy { padding-top: 10px; padding-bottom: 10px; }
.mycode.tidy .mycode-value { font-size: 15px; letter-spacing: .05em; }

.addhome { border-color: var(--accent); }
.addhome-top { display: flex; align-items: flex-start; gap: 10px; }
.addhome-top img { flex: none; border-radius: 8px; }
.addhome-top b { display: block; font-size: 13px; line-height: 1.45; margin-bottom: 4px; }
.addhome-top p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
/* 아이폰 공유 아이콘처럼 '눌러야 하는 것' 은 글자를 살려 적는다. */
.addhome-top p b { display: inline; color: var(--text); font-size: inherit; }
.addhome-x {
  appearance: none; border: 0; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  padding: 0 2px; flex: none;
}
.addhome-x:hover { color: var(--text); }
.addhome .btn.small { width: 100%; margin-top: 10px; padding: 8px 12px; font-size: 12.5px; }

/*
 * ══ 지난 글 ══
 *
 * 결과칸 바로 위에 **접었다 펴는** 목록.
 * 보관된 글이 없으면 통째로 감춰지므로(hidden), 처음 오신 분 화면에는 아예 안 보인다.
 *
 * ★ 늘 펼쳐두면 폰에서 목록이 결과 칸을 밀어내고, 방금 나온 글이 화면 밖으로 나간다.
 *   그래서 접어두고, 편 상태는 기억한다 (app.js 의 SAVEDOPEN_KEY).
 *
 * flex: none — 위 .main 이 세로 flex 라, 이걸 안 주면 결과칸과 높이를 나눠 갖는다.
 */
.saved {
  flex: none; border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
/* 누르는 자리라 손가락이 닿을 만큼 넓게. 기본 삼각형은 지우고 직접 그린다. */
.saved-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600;
}
.saved-head::-webkit-details-marker { display: none; }
.saved-head:hover { background: var(--card); }
.saved-title { display: flex; align-items: center; gap: 5px; }
/* 펼침 표시. 열리면 아래를 가리킨다. */
.saved-title::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.saved[open] .saved-title::before { transform: rotate(90deg) translateX(1px); }
.saved-title span { color: var(--muted); font-weight: 400; }
.saved-head em {
  font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted);
}
.saved-body { padding: 0 16px 12px; }
.saved-lead { margin: 0 0 10px; }
.saved-body .btn.small { margin-top: 8px; }
.saved .hint { margin: 8px 0 0; }
.saved .hint b { font-weight: 600; color: var(--text); }

/* 작고 조용한 버튼. 여기 말고 쓰는 데가 없어 .saved 안에 둔다. */
.saved .btn.small { padding: 4px 9px; font-size: 11px; }
.saved .btn.quiet { background: transparent; color: var(--muted); }
.saved .btn.quiet:hover { color: var(--text); }

.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.saved-list li {
  display: flex; align-items: stretch; gap: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  overflow: hidden;
}
/* 지금 화면에 띄워둔 글. 목록에서 어느 것을 보고 있는지 알아야 한다. */
.saved-list li.on { border-color: var(--accent); }

.saved-open {
  appearance: none; border: 0; background: transparent; color: inherit;
  font-family: inherit; cursor: pointer; text-align: left;
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px;
  padding: 8px 4px 8px 10px;
}
/* 제목이 길어도 줄을 넘기지 않는다. 폰에서 한 줄에 한 편씩 보여야 훑기 쉽다. */
.saved-open b {
  font-size: 13px; font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saved-open em { font-style: normal; font-size: 11px; color: var(--muted); flex: none; }
.saved-open:hover b { text-decoration: underline; }

.saved-del {
  appearance: none; border: 0; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0 10px; flex: none;
}
.saved-del:hover { color: var(--err); }

/*
 * 후기 칸.
 *
 * 무료 2편을 다 쓰신 그 자리에서 여쭤본다. 그때가 제일 할 말이 많은 순간이다.
 * 오류 안내(빨간 테두리) 바로 아래에 오므로, 여기는 색을 눌러서 재촉처럼 안 보이게 둔다.
 */
.reviewbox {
  border-top: 1px solid var(--line); padding: 16px 24px 20px;
  background: var(--panel-2); flex: none;
}
.reviewbox h3 { margin: 0 0 4px; font-size: 16px; }
.reviewbox .under { color: var(--muted); font-size: 12px; margin: 0 0 10px; line-height: 1.6; }
.reviewbox textarea, .reviewbox input {
  width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-family: inherit; font-size: 16px;   /* 16px 밑이면 사파리가 화면을 확대한다 */
}
.reviewbox textarea { margin-bottom: 8px; resize: vertical; }
.reviewbox textarea:focus, .reviewbox input:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
.rv-who { display: flex; gap: 8px; margin-bottom: 8px; }
.rv-who input { flex: 1; min-width: 0; }
.reviewbox .btn { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.reviewbox a.btn { display: block; text-align: center; text-decoration: none; }
.reviewbox a.btn.primary { color: #06210f; }
.rv-error { color: var(--err); font-size: 12px; margin: 0 0 8px; }

/*
 * ══ 후기 감사 이용권 ══
 *
 * 무료 두 편을 다 쓰신 그 자리에서 "후기 남기시면 한 달 드립니다" 를 말하는 칸입니다.
 * 여기가 안 읽히면 후기가 안 들어옵니다. 그래서 이 화면에서 제일 크고 눈에 띄게 둡니다.
 *
 * ★ 빨간색은 이 화면에서 여기 하나뿐입니다. 오류 색과 같은 빨강이지만,
 *   오류는 테두리 있는 칸(.notice)에만 뜨고 이건 글자라서 헷갈리지 않습니다.
 *   여기저기 빨강을 쓰기 시작하면 그때부터 아무 데도 안 걸립니다.
 * ★ 어두운 화면에서 진한 빨강은 탁해집니다. 조금 밝은 쪽으로 올려둡니다.
 */
.rv-gift {
  margin: 0 0 10px;
  font-size: 17px; line-height: 1.55; font-weight: 650;
  color: var(--err);
}
.rv-gift b {
  display: inline-block;
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  color: var(--err);
}

/* 별점. 폰에서 손가락으로 눌러야 해서 넉넉하게 띄운다. */
.stars { display: flex; gap: 4px; margin-bottom: 10px; }
.star {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 30px; line-height: 1; padding: 2px 4px;
  color: var(--line); transition: color .1s;
}
.star.on { color: #F5B301; }
.star:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }

/*
 * 고쳐 쓰기 칸.
 *
 * 업종이 스물아홉 개다. 한 번에 마음에 꼭 드는 글이 나올 수가 없다.
 * 글 바로 아래에 붙여둔다 — 읽다가 거슬리는 곳을 발견한 그 자리에서 적으셔야 한다.
 */
.fixbox {
  border-top: 1px solid var(--line); padding: 14px 24px 18px;
  background: var(--panel-2); flex: none;
}
.fixbox label { display: block; font-size: 14px; margin-bottom: 3px; }
.fixbox .under { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.fixbox textarea {
  width: 100%; margin-bottom: 8px; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-family: inherit; resize: vertical;
  /* 폰에서 16px 밑으로 내려가면 사파리가 화면을 확대해 버린다. */
  font-size: 16px;
}
.fixbox textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.fixbox .btn { width: 100%; }

/*
 * 사진 자리.
 * 후기성 글은 사진이 본문이고 글이 사진 설명이다.
 * 어디에 무슨 사진이 들어가는지 눈에 보여야 붙여넣고 헤매지 않으신다.
 */
.preview .photo {
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 10px 12px; color: var(--muted); font-size: 13px;
  background: var(--panel-2);
}

/*
 * 사진 찍을 목록.
 * 현장에 다시 갈 수는 없다. 다음 현장부터 이걸 보고 찍으시라고 뽑아준다.
 * 복사되는 글에는 안 들어간다 — 블로그에 올라갈 내용이 아니다.
 */
.shotlist {
  margin-top: 22px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
}
.shotlist h4 { margin: 0 0 4px; font-size: 14px; }
.shotlist .under { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.shotlist ul { margin: 0; padding-left: 20px; font-size: 13px; }

/*
 * 다른 제목 안.
 * 제목 하나만 주면 그게 마음에 안 들 때 글을 통째로 다시 뽑게 된다 — 한 편이 그냥 나간다.
 * 눌러서 바꿀 수 있게 두면 편수를 안 쓰고 고르실 수 있다.
 */
.titles { margin: 0 0 20px; }
.titles-cap { color: var(--muted); font-size: 11px; margin: 0 0 6px; }
.title-pick {
  display: block; width: 100%; text-align: left; margin-bottom: 6px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 14px; line-height: 1.4;
}
.title-pick:hover { border-color: var(--accent); color: var(--accent-text); }

/*
 * 비교 표.
 * 좁은 폰에서 표가 칸을 밀어내면 페이지 전체가 옆으로 흐른다.
 * 표만 제 안에서 굴러가게 가둔다.
 */
.tablewrap { overflow-x: auto; margin: 0 0 14px; }
.preview table { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 13px; }
.preview th, .preview td {
  border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top;
}
.preview th { background: var(--panel-2); font-weight: 650; white-space: nowrap; }

/* 이 글에 든 돈. 원가를 모르고 팔면 나중에 손해가 나서 매번 보이게 둔다. */
.cost {
  margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px;
}
.cost b { color: var(--text); }
.cost span { opacity: .75; }

.notice { border: 1px solid var(--err); color: var(--err); border-radius: 8px; padding: 12px 14px; font-size: 13px; }
.notice p { margin: 0 0 10px; }
.notice p:last-child { margin: 0; }
.notice .btn { color: var(--text); }
/*
 * 편수를 다 쓰신 자리에서 바로 결제로 가는 문.
 * 안내만 하고 끝내면 판매 페이지를 다시 찾아 들어가셔야 하고, 그 사이에 마음이 식는다.
 */
.notice .btn.primary {
  display: block; box-sizing: border-box; text-align: center;
  text-decoration: none; color: #06210f;
}
.notice .buy-sub { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* 준비 중 안내 — 오류가 아니라 안내이므로 톤을 낮춘다 */
.notice.soft {
  border-color: var(--line); color: var(--muted);
  background: var(--panel-2); margin-top: 4px;
}
select:disabled, .field select { cursor: pointer; }

/*
 * 폰 대응.
 *
 * 시공업자는 현장에서 폰으로 쓴다. 두 칸 그리드(340px + 본문)를 그대로 두면
 * 375px 화면에서 가로로 넘쳐서 아예 못 쓴다. 한 칸으로 바꾸고 높이 고정도 푼다.
 */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }

  .layout {
    grid-template-columns: 1fr;   /* 입력 위, 결과 아래 */
    height: auto;                 /* 100vh 고정을 풀어야 아래로 스크롤된다 */
    padding: 10px;
    gap: 10px;
  }
  .side { overflow-y: visible; }
  .gate { padding: 12px 10px 30px; }
  .gate-card { padding: 14px; }
  .badges { font-size: 11px; }
  .main { min-height: 55vh; }
  .panel { padding: 16px; }
  .preview h1 { font-size: 20px; }

  /*
   * iOS 사파리는 입력칸 글씨가 16px 미만이면 탭할 때마다 화면을 확대해버린다.
   * 기본값이 13px이라 칸을 누를 때마다 화면이 튄다. 폰에서만 16px로 올린다.
   */
  .field input, .field textarea, .field select { font-size: 16px; padding: 11px 12px; }
  .btn { padding: 12px 16px; }
  /* 폰에서는 더 크게. 잘못 누르면 글 종류가 통째로 바뀐다. */
  .kind { min-height: 64px; padding: 12px 14px; }
  .kind-body b { font-size: 15px; }
  .kind-body em { font-size: 13px; }
}