/* 앱 전용 스타일.
   ⚠️ 화면 모양은 시안(sian-app.css / sian-admin.css)이 정한다. 여기서 덮어쓰지 않는다.
   아직 시안으로 갈아입히지 못한 화면만 `.wrap` 안에서 옛 스타일을 쓴다 —
   `.wrap` 을 붙이지 않으면 input·card·ok 같은 이름이 시안 화면까지 흘러들어가 모양이 깨진다.
   화면을 하나씩 시안으로 바꿀 때마다 여기 규칙도 같이 지워 나간다. */

.wrap{
  --ink:#22190e; --ink-soft:#55625a; --line:#e2ddcf;
  --paper:#faf8f3; --card:#fff; --sage:#7d9887; --sage-dk:#46604f;
  --sans:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',system-ui,sans-serif;
  --serif:'Noto Serif KR','Apple SD Gothic Neo',serif;
}

.wrap{max-width:840px;margin:0 auto;padding:0 20px 80px;
  font-family:var(--sans);color:var(--ink)}
.wrap .top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;
  max-width:840px;margin:0 auto}
.wrap .top .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.wrap .top .brand img{height:30px;width:auto;display:block}
.wrap .top .brand b{font-family:var(--serif);font-weight:500;font-size:15px}
.wrap .top nav{display:flex;gap:14px;font-size:13px;color:var(--ink-soft)}
.wrap .top nav a{text-decoration:none}
.wrap h1{font-family:var(--serif);font-weight:500;font-size:clamp(22px,4.4vw,30px);letter-spacing:-.02em;margin-bottom:8px}
.wrap .lede{font-size:14px;line-height:1.75;color:var(--ink-soft);margin-bottom:26px}
.wrap .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:clamp(18px,3.6vw,28px);margin-bottom:16px}
.wrap label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:8px}
.wrap /* password 가 빠져 있어 관리자 로그인·비밀번호 변경의 칸만 좁게 나왔다 (2026-08-20) */
input[type=text], .wrap input[type=tel], .wrap input[type=date], .wrap input[type=number], .wrap input[type=password], .wrap input[type=search], .wrap select, .wrap textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:13px 14px;font-family:inherit;font-size:15px;color:var(--ink);}
.wrap input:focus, .wrap textarea:focus, .wrap select:focus{outline:2px solid rgba(125,152,135,.45);outline-offset:1px}
.wrap textarea{resize:vertical;min-height:92px;line-height:1.7}
.wrap .row{display:flex;gap:12px;flex-wrap:wrap}
.wrap .row>*{flex:1;min-width:120px}
.wrap .field{margin-bottom:18px}
.wrap .hint{font-size:12px;color:#98a29a;margin-top:6px;line-height:1.6}
.wrap .radio{display:flex;gap:10px}
.wrap .radio label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;
  border:1px solid var(--line);border-radius:8px;padding:13px;background:#fff;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--ink)}
.wrap .radio input{accent-color:var(--sage-dk)}
.wrap .radio label:has(input:checked){border-color:var(--sage);background:#f2f6f2;color:var(--sage-dk)}
.wrap .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:none;border-radius:9px;background:var(--sage-dk);color:#fff;
  font-family:inherit;font-size:15px;font-weight:700;padding:15px;cursor:pointer;text-decoration:none}
.wrap .btn:hover{background:#3a5342}
.wrap .btn.ghost{background:#fff;color:var(--sage-dk);border:1px solid var(--line)}
.wrap .btn.line{background:#fff;color:var(--ink);border:1px solid var(--line)}
.wrap .btn.sm{width:auto;padding:10px 16px;font-size:13px}
.wrap .social{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.wrap .social a{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:9px;
  padding:15px;font-size:15px;font-weight:700;text-decoration:none;border:1px solid var(--line);background:#fff}
.wrap .social .kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.wrap .social .naver{background:#03C75A;border-color:#03C75A;color:#fff}
.wrap .social .google{background:#fff;color:#3c4043}
.wrap .divider{display:flex;align-items:center;gap:12px;color:#b3bab3;font-size:12px;margin:20px 0}
.wrap .divider::before, .wrap .divider::after{content:"";flex:1;height:1px;background:var(--line)}
.wrap .alert{background:#fdf3f3;border:1px solid #f0d5d5;color:#a4453f;border-radius:8px;
  padding:12px 14px;font-size:13.5px;line-height:1.6;margin-bottom:16px}
.wrap .ok{background:#eef5ef;border-color:#cfe0d2;color:#3a5342}
.wrap .agree{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.wrap .agree .item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:13.5px;line-height:1.6}
.wrap .agree input{margin-top:3px;accent-color:var(--sage-dk)}
.wrap .agree .req{color:var(--sage-dk);font-weight:700}
.wrap /* 일기 목록 */
.list{display:flex;flex-direction:column;gap:10px}
.wrap .item-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:16px 18px;text-decoration:none}
.wrap .item-row .d{font-family:var(--serif);font-size:17px;font-weight:500;min-width:104px}
.wrap .item-row .s{font-size:12.5px;color:var(--ink-soft)}
.wrap .badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
  border-radius:999px;padding:5px 10px;background:#eef1ee;color:#5d6a60}
.wrap .badge.done{background:#e7f0e8;color:#3a5342}
.wrap .badge.cmt{background:#f6efe2;color:#8a6d3a}
.wrap .spacer{flex:1}
.wrap /* 한 줄에 링크가 둘인 행 : 줄 전체는 하루치로, .wrap 끝의 작은 링크는 환자별 기록으로.
   <a> 안에 <a> 를 넣을 수 없어 바깥을 div 로 두고 안쪽을 나눴다. */
.rowmain{display:flex;align-items:center;gap:14px;flex-wrap:wrap;text-decoration:none;min-width:0}
.wrap .rowsub{font-size:12px;color:var(--sage-dk);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.wrap .rowsub:hover{background:#f2f6f2}
.wrap /* 끼니 탭 */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.wrap .tabs button{flex:1;min-width:76px;border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:12px 8px;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.wrap .tabs button.on{background:var(--sage-dk);border-color:var(--sage-dk);color:#fff}
.wrap .pane{display:none}
.wrap .pane.on{display:block}
.wrap .counter{text-align:right;font-size:12px;color:#98a29a;margin-top:6px}
.wrap .counter.warn{color:#b4643f}
.wrap .thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.wrap .thumb{position:relative;width:96px;height:96px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.wrap .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wrap .thumb button{position:absolute;top:4px;right:4px;border:none;background:rgba(20,26,20,.72);color:#fff;
  width:22px;height:22px;border-radius:50%;font-size:13px;line-height:1;cursor:pointer}
.wrap .filebtn{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--line);border-radius:9px;
  padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;background:#fff}
.wrap .actions{display:flex;gap:10px;margin-top:22px}
.wrap .actions .btn{flex:1}
.wrap /* 관리자 */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:10px}
.wrap .gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.wrap .slot-block{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.wrap .slot-block h3{font-size:14px;font-weight:700;margin-bottom:6px}
.wrap .slot-block p{font-size:14px;line-height:1.75;color:var(--ink-soft);white-space:pre-wrap}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-variant-numeric:tabular-nums}
.wrap /* ── 표 : 좁은 화면에서 칸이 찌그러지지 않게 ─────────────────────
   예전에는 768px 에서 머리글 '모드' 가 세로로 쪼개지고 전화번호가
   010-1111-\n2222 로 끊겼다. 표는 줄이지 말고 가로로 넘긴다. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.wrap table{width:100%;min-width:520px;border-collapse:collapse;font-size:13px}
.wrap th, .wrap td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;
  word-break:keep-all}
.wrap /* 한글 낱말이 중간에서 끊기지 않게 */
th{font-size:11.5px;letter-spacing:.08em;color:#98a29a;white-space:nowrap}
.wrap td.nowrap, .mono{white-space:nowrap}
.wrap /* 시각·전화번호는 붙여 둔다 */
td .msg{white-space:pre-wrap;overflow-wrap:anywhere;min-width:220px}
.wrap /* 긴 URL 은 여기서만 끊는다 */

/* ── 태블릿 (561~899) ───────────────────────────────────────── */


/* ── 노트북 이상 (1200~) : 표가 있는 관리자 화면은 넓게 쓴다 ── */


/* ── 표 쌓기 (~700) : 칸이 6개라 태블릿 세로에서도 잘린다 ──── */


/* ── 폰 (~560) ─────────────────────────────────────────────── */


/* ── 주의 안내 : 저장은 됐지만 그대로 두면 안 되는 것 ────────────
   예) 200자를 넘겨 뒷부분이 저장되지 않은 칸. 예전에는 조용히 잘랐다. */
/* 앱 안내문 — 시안의 .notice(하단 안내 바)와 이름이 겹쳐 .alert 로 바꿨다 */
.alert{background:#fdf6e8;border:1px solid #ecdcb8;color:#8a6118;border-radius:12px;
  padding:13px 16px;font-size:14px;line-height:1.6}
.wrap /* 오류 화면의 '이렇게 해보세요' */
.steps{margin:0;padding-left:18px;font-size:12.15px;line-height:1.9;color:var(--body)}
.steps b{color:var(--ink);font-weight:600}
.wrap .steps li{margin-bottom:4px}
.wrap .steps b{color:var(--ink)}
.wrap /* 앞뒤 날짜 이동 (일기 작성 화면) */
.daynav{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:13px}
.wrap .daynav a, .wrap .daynav span{border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:9px 12px;text-decoration:none;color:var(--ink-soft);white-space:nowrap}
.wrap .daynav .off{color:#c3c8c3;background:#f6f5f1}
.wrap .daynav .spacer{flex:1;border:0;background:none;padding:0}
.wrap /* 체중 추이 그래프 (관리자 히스토리) — 외부 라이브러리 없이 SVG 로 그린다 */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .line{fill:none;stroke:var(--point,#2c4636);stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart .dot{fill:#fffdf9;stroke:var(--point,#2c4636);stroke-width:2;vector-effect:non-scaling-stroke}
.chart-axis{display:flex;justify-content:space-between;font-size:10.53px;color:var(--body);margin-top:6px}
.wrap .stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.wrap .stat{flex:1;min-width:104px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff}
.wrap .stat .k{font-size:11.5px;letter-spacing:.06em;color:#98a29a}
.wrap .stat .v{font-family:var(--serif);font-size:20px;font-weight:500;margin-top:2px}
.down{color:var(--point,#2c4636);font-weight:600}
.wrap /* 체중이 줄었다 — 이 서비스에서는 좋은 방향 */
.up{color:var(--warn,#b4643f);font-weight:600}
.wrap /* 화면 상단 안내 — 시안에 대응하는 요소가 없어 여기에 둔다 */
.flash{background:var(--point-soft,#e6efe7);border:1px solid var(--point-line,rgba(44,70,54,.26));
  color:var(--point,#2c4636);border-radius:14px;padding:13px 16px;font-size:14px;line-height:1.6}
.wrap /* 시안에 없는 것 — 30일 밖 날짜로 가는 길 */
.hgo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 16px;
  padding:12px 14px;border:1px solid var(--line,rgba(0,0,0,.09));border-radius:16px;background:#fff}
.wrap .hgo label{margin:0;font-size:12.5px;font-weight:700;color:var(--body,#6f6f6f)}
.wrap .hgo input{flex:1;min-width:150px;border:1px solid var(--line,rgba(0,0,0,.09));border-radius:10px;
  padding:9px 10px;font:inherit;font-size:14px}
.wrap .hgo button{border:0;border-radius:10px;background:var(--point,#2c4636);color:#fff;
  padding:9px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}

@media (max-width:899px){
  .wrap .top, .wrap{max-width:100%}
  .wrap .radio label{padding:12px 10px;font-size:13.5px}
  .wrap .gallery{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}

@media (min-width:1200px){
  .wrap body.admin .top, .wrap body.admin .wrap{max-width:1120px}
}

@media (max-width:700px){
  .wrap /* 표는 가로로 밀지 않고 한 건씩 카드처럼 쌓는다.
     좁은 화면에서 옆으로 스크롤하면 행 높이만 커지고 빈 자리가 남는다. */
  .table-scroll{overflow-x:visible;margin:0;padding:0}
  .wrap table.stack{min-width:0}
  .wrap table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .wrap table.stack tr{display:block;border:1px solid var(--line);border-radius:10px;
    padding:12px 14px;margin-bottom:10px;background:#fff}
  .wrap table.stack td{display:flex;gap:10px;border:0;padding:4px 0;white-space:normal}
  .wrap table.stack td::before{content:attr(data-label);flex:0 0 64px;color:#98a29a;
    font-size:11.5px;letter-spacing:.06em;padding-top:2px}
  .wrap table.stack td:empty{display:none}
  .wrap table.stack td .msg{min-width:0}
}

@media (max-width:560px){
  .wrap .item-row{flex-wrap:wrap;gap:8px}
  .wrap .item-row .d{min-width:auto}
  .wrap .item-row .spacer{display:none}
  .wrap .actions{flex-direction:column}
  .wrap .tabs button{padding:11px 6px;font-size:13px}
  .wrap .thumb{width:84px;height:84px}
  .wrap .row>*{min-width:100%}
}

/* ── 시안으로 갈아입힌 화면에만 더하는 것 (시안에 없어서 앱이 보태는 부분) ── */
/* 목록의 날짜 점프 칸 · 일기의 '이 날짜로 옮기기'
   ⚠️ 접히게 두지 않으면 폰(390px)에서 한 줄이 39px 넘쳐, 크롬이 **페이지 전체를 축소**한다.
      가로 스크롤이 안 생기고 글자만 작아지므로 눈으로는 원인을 못 찾는다.
   ⚠️ 위쪽 `.wrap /* 주석 */ .hgo` 규칙은 주석이 선택자 사이에 있어 `.wrap .hgo` 로 좁혀진다 —
      거기 적힌 flex-wrap 은 앱 껍데기 안의 이 칸에는 오지 않는다. 그래서 여기 다시 적는다. */
.hgo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line);padding:12px 16px;margin-bottom:14px;font-size:11.34px}
.hgo input{border:0;outline:0;background:#f4f3f0;border-radius:10px;padding:8px 12px;font:inherit;font-size:12.96px;
  flex:1 1 130px;min-width:0}
.hgo input:focus{box-shadow:inset 0 0 0 1.5px var(--point)}
/* 저장은 됐지만 그대로 두면 안 되는 것 · 한 줄 안내 */
.appnotice,.flash{border-radius:var(--r-sm);padding:12px 16px;font-size:11.7px;line-height:1.7;
  margin-bottom:14px}
.appnotice{background:#fdf6e8;box-shadow:inset 0 0 0 1px #ecdcb8;color:#8a6118}
.flash{background:var(--point-soft,#e6efe7);box-shadow:inset 0 0 0 1px rgba(44,70,54,.26);color:var(--point,#2c4636)}
/* 스트레스 칩은 라벨이라 손 모양이 안 나온다 */
.wchip{cursor:pointer}

/* ── 시안에 없는 화면 (가입·약관·오류·관리자 보조 화면) ──────────────
   시안의 로그인 상자(.gate/.gbox)를 그대로 쓰되, 내용이 길어 스크롤이 필요한
   화면을 위해 고정 위치만 푼다. 색·서체·모서리는 전부 시안 것을 쓴다. */
.gate.flow{position:static;min-height:100dvh;display:grid;place-items:start center;
  padding:clamp(24px,5vh,64px) 20px 64px;overflow:visible}
/* 퍼널 화면은 여백을 더 준다 — 읽고 고르는 화면이라 빽빽하면 지친다 */
.gate.flow.flowform{padding:clamp(40px,8vh,96px) 20px clamp(72px,10vh,120px)}
.flowform .gbox h1{line-height:1.38}
.flowform .gbox .gsub{margin-top:14px}
.flowform .gbox>.whint{margin-top:16px;line-height:1.85}
.gate.flow .gbox{width:min(560px,100%);text-align:left}
.gate.flow .gbox h1{text-align:center}
.gate.flow .glogo{height:44px}
/* ══ 퍼널 폼 (오행체질 설문 · 문진표) ═══════════════════════════════
   2026-08-24 재설계. 예전에는 제목·설명·입력칸이 **전부 회색 알약**이라
   위계가 없고 화면이 알약 목록으로 보였다. 여백과 글자 크기로 위계를 만든다.

   ⚠️ `.flowform` 안에서만 바꾼다. `.wx` 는 작성 화면(오늘의 컨디션)도 쓰는 클래스라
      전역으로 고치면 그 화면이 같이 흔들린다.
   ⚠️ 원고 문구는 건드리지 않았다(명세 §13). 바꾼 것은 색·여백·크기뿐이다. */

/* 판 — 카드 테두리를 걷어내고 **여백**으로 나눈다 (컨셉덱 「여백의 미」)
   ⚠️ 색 규칙 (2026-08-24) : **퍼널은 갈색, 로그인 뒤 앱은 세이지 초록.**
      퍼널(소개페이지 → 설문 → 문진표)은 처음 오는 사람이 보는 한 벌이라
      소개페이지의 갈색으로 통일한다. 초록은 일기·관리자 화면의 신호로 남긴다. */
.flowform{
  --field:#f7f3ec; --field-line:rgba(84,69,47,.10); --rule:rgba(84,69,47,.13);
  --accent:#54452f; --accent-soft:#efe9dd; --accent-line:rgba(84,69,47,.28);
  /* 버튼도 갈색으로 — .pill 은 이 토큰들을 본다(sian-app.css) */
  --btn-1:#54452f; --btn-2:#5f4f37; --btn-3:#6b5940; --btn-4:#7a674a;
  --btn-glow:84,69,47; --btn-edge:30,22,12;
}
.flowform .card{background:none;box-shadow:none;border-radius:0;margin-top:0}
.flowform .card-b{padding:0}

/* 섹션 — 제목은 알약에서 꺼내 **진짜 제목**으로 세운다 */
.fsec{margin-top:clamp(40px,5.6vh,68px);padding-top:clamp(28px,3.8vh,40px);
  border-top:1px solid var(--rule)}
.fsec:first-of-type{margin-top:clamp(34px,4.6vh,52px)}
.fsec>h2{font-size:15.3px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.fsec>h2 em{font-style:normal;font-weight:500;font-size:11.34px;color:var(--body);
  margin-left:9px;letter-spacing:0}
.fsec>.flead{margin-top:10px;font-size:11.745px;line-height:1.8;color:var(--body)}
/* 제목과 내용 사이 — 15px 은 너무 붙었다(2026-08-24 지적). 한 호흡 준다 */
.fsec>.conds,.fsec>.fbody,.fsec>.fqs{margin-top:clamp(24px,3.2vh,34px)}

/* 입력 칸 — 알약(100px)을 걷어내고 네모난 칸으로. 바탕은 베이지 한 단 */
.flowform .conds{gap:11px}
.flowform .wx{border-radius:13px;background:var(--field);padding:15px 18px;gap:14px;
  box-shadow:inset 0 0 0 1px var(--field-line);transition:box-shadow .2s,background .2s}
.flowform .wx:hover{background:#f4efe5}
.flowform .wx:focus-within{background:#fff;box-shadow:inset 0 0 0 1.5px var(--accent)}
.flowform .wx>span{min-width:5.4em;font-size:11.34px;color:var(--body)}
.flowform .wx input,.flowform .wx select{font-size:13.5px}

/* 단계 — 번호를 크게 세워 타이포로 읽히게. 칸을 만들지 않는다 */
.fsteps{display:grid;gap:0}
.fstep{display:flex;gap:clamp(16px,2vw,26px);align-items:baseline;
  padding:18px 2px;border-top:1px solid var(--rule)}
.fstep:first-child{border-top:0;padding-top:4px}
.fstep>i{font-style:normal;font-size:12.15px;font-weight:600;color:var(--accent);
  flex:none;min-width:2.9em;letter-spacing:.02em}
.fstep>p{font-size:12.555px;line-height:1.75}
.fstep>p b{color:var(--ink);font-weight:600}

/* 혜택 — 줄마다 칸을 두르지 않고 **행간과 마커**로만 정리한다 */
.fgets{display:grid;gap:14px}
.fget{display:flex;gap:11px;font-size:12.15px;line-height:1.7}
/* 원고의 ✅ 는 **글자를 바꾸지 않고** 색만 눕힌다 — 형광 초록이 베이지 위에서 혼자 튄다.
   완전히 빼거나 다른 기호로 바꾸는 것은 원고 변경이라 병원 확인이 필요하다(명세 §13). */
.fget>i{font-style:normal;flex:none;font-size:11.5px;line-height:1.75;
  filter:grayscale(1) brightness(.72);opacity:.62}

/* 고르는 줄 — 체크박스가 왼쪽, 설명이 오른쪽 */
.flowform .wx.pick{cursor:pointer;align-items:flex-start;padding:14px 16px}
.flowform .wx.pick input[type=checkbox]{width:auto;flex:none;margin-top:2px;accent-color:var(--accent)}
.flowform .wx.pick.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.flowform .wx.pick b{font-weight:600;color:var(--ink)}
.flowform .wx.pick i{font-style:normal;color:var(--body);font-size:11.34px}

/* ── 문진표 문항 ────────────────────────────────────────────────
   라벨을 칸 안에 가두지 않는다. 보기가 5~7개인 문항이 많아 좌우로 나누면
   오른쪽이 터지고 줄이 들쭉날쭉해진다. **라벨 위 · 보기 아래**로 두고
   문항 사이는 얇은 선 하나로 나눈다 — 칸을 두르는 것보다 조용하다. */
.fqs{display:grid;gap:0}
.fq{padding:20px 2px 22px;border-top:1px solid var(--rule)}
.fq:first-child{border-top:0;padding-top:2px}
.fq-l{display:block;font-size:12.555px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.fq-l em{font-style:normal;font-weight:500;font-size:11.16px;color:var(--body);margin-left:8px}
.fq-a{margin-top:13px}
.fq-a .wchips{margin:0}
/* 숫자·글 칸은 답 길이만큼만. 라벨은 위에 있으므로 칸 안 라벨은 지운다 */
.flowform .fq .wx{max-width:min(340px,100%);border-radius:12px;padding:11px 15px}
.flowform .fq .wx.num input{width:5em;text-align:left}

/* 어디쯤 왔는지 — 끝이 보여야 계속 쓴다 */
.fprog{margin:22px auto 0;max-width:320px}
.fprog .bar{height:4px;border-radius:100px;background:rgba(84,69,47,.10);overflow:hidden}
.fprog .bar i{display:block;height:100%;background:var(--accent);border-radius:100px;
  transition:width .6s cubic-bezier(.22,.8,.3,1)}
.fprog .txt{margin-top:8px;text-align:center;font-size:11.16px;color:var(--body)}
.fprog .txt b{color:var(--ink);font-weight:600}

/* §1 — 앞 화면에서 온 값. 적는 곳이 아니라 보여주는 곳이라 칸을 눕힌다 */
.flowform .wx.wread{background:none;box-shadow:none;padding:11px 2px;border-radius:0;
  border-top:1px solid var(--rule)}
.flowform .conds .wx.wread:first-child{border-top:0}
.flowform .wx.wread>span{min-width:8em;color:var(--body)}
.flowform .wx.wread .wv{font-size:13.5px}

/* 칩 — 알약이되 이건 **고르는 물건**이라 남긴다. 색만 갈색으로 눕힌다.
   ⚠️ 아래쪽에 `.wx .wchip.on` 이 있다(특이도가 같고 뒤에 온다). 그래서 여기도
      `.flowform .wx .wchip.on` 으로 한 단 올려 두 자리를 다 덮는다.
      한쪽만 쓰면 `.wx` 안의 칩(달력·성별)만 초록으로 남는다. */
.flowform .wchip,
.flowform .wx .wchip{background:var(--field);box-shadow:inset 0 0 0 1px var(--field-line);
  padding:9px 15px;font-size:11.7px}
.flowform .wchip:hover,
.flowform .wx .wchip:hover{background:#efe8db;box-shadow:inset 0 0 0 1px var(--accent-line)}
.flowform .wchip.on,
.flowform .wx .wchip.on{background:var(--accent);color:#faf7f2;box-shadow:none}

/* 다음 한 걸음 — 「내 진단 결과」 맨 위. 명세 S4 의 「눈에 띄는 자리」다.
   카드들과 달리 바탕을 한 단 짙게 깔아 **읽고 지나가는 것이 아니라 누르는 것**임을 보인다. */
.fnext{display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap;
  background:var(--cream2);border-radius:var(--r-sm);
  padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,26px);margin-bottom:14px;
  box-shadow:inset 0 0 0 1px rgba(84,69,47,.10)}
.fnext>div{flex:1;min-width:min(260px,100%)}
.fnext b{display:block;font-size:13.5px;color:var(--ink);font-weight:600}
.fnext span{display:block;margin-top:5px;font-size:11.7px;line-height:1.7;color:var(--body)}
.fnext .pill{flex:none}

/* 필수·선택 표시 */
.req{color:var(--warn);font-weight:600}
.opt{color:var(--body);font-weight:500}
/* 동의 줄 — .wx 를 쓰되 체크박스가 왼쪽에 온다 */
.wx.agree{align-items:flex-start;gap:10px;cursor:pointer}
.wx.agree input[type=checkbox]{width:auto;flex:none;margin-top:2px;accent-color:var(--point)}
.wx.agree span{min-width:0;font-size:11.7px;line-height:1.65}
.wx.agree a{text-decoration:underline;text-underline-offset:2px}

/* 표 안의 짧은 부연 — 시안의 .sub 를 그대로 쓰되 표 안에서는 여백을 뗀다 */
.tbl .sub{display:inline-block;margin:0;font-size:10.53px;color:var(--body)}
/* 표 밖에서도 쓰는 짧은 부연 — 관리자 상세의 값 옆 설명 */
.card-b .sub{font-size:10.53px;color:var(--body)}
/* 상태 꼬리표에 종류가 없을 때(예: 수신 미동의) */
.tag{background:var(--cream3);color:var(--body)}

/* DB 스키마가 안 올라간 채로 떠 있을 때 — 모든 화면 맨 위. 눈에 띄어야 한다. */
.schemawarn{position:sticky;top:0;z-index:200;background:#b4262a;color:#fff;
  padding:10px 16px;font-size:11.7px;line-height:1.6;text-align:center}
.schemawarn b{font-weight:700}
.schemawarn .mono{opacity:.8;font-size:10.5px}

/* 로그인 — 시안에 없던 칸 (문자 인증번호). 시안의 .gs 버튼과 같은 결로 둔다.
   ⚠️ 예전에는 이 규칙들이 sian-app.css 에 손으로 들어가 있었다. 시안을 다시 뽑는 순간
   통째로 날아가 버튼이 맨 글자로 나왔다(2026-08-20). 시안에 없는 것은 여기 둔다. */
.gdev{text-align:left}
.gs.dev{background:var(--point);color:#fff;justify-content:center;width:100%}
.gs.dev:hover{filter:brightness(1.06)}
.gdev label{display:block;font-size:11.34px;color:var(--body);margin-bottom:7px;text-align:left}
.gdev label b{color:var(--ink);font-weight:600}
.gdev input{width:100%;border:0;outline:0;background:#fff;border-radius:14px;
  padding:15px 16px;font:inherit;font-size:15px;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line)}
.gdev input:focus{box-shadow:inset 0 0 0 1.6px var(--point)}
/* 인증번호 칸은 숫자를 띄워 놓는다. 안내 글까지 띄우면 '6 자 리' 로 벌어진다. */
.gdev input::placeholder{letter-spacing:normal;font-size:15px}
.gdev .gs{margin-top:10px;width:100%;border:0;cursor:pointer;font:inherit}
.glink{background:none;border:0;padding:4px;font:inherit;font-size:10.935px;
  color:var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.glink:hover{color:var(--ink)}
.divider{display:flex;align-items:center;gap:12px;margin:22px 0 14px;
  font-size:10.53px;color:var(--body)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
/* 로그인 ↔ 회원가입 건너가는 줄 */
.gswitch{margin-top:18px;text-align:center;font-size:11.7px;color:var(--body)}
.gswitch a{color:var(--point);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* 비밀번호 보기 — 확인 칸을 없앤 대신 둔다. 잘못 친 채로 지나가지 않게. */
.pwrap{position:relative}
.pwrap input{padding-right:56px}
.pwsee{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:6px 8px;font:inherit;font-size:11.34px;
  color:var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pwsee:hover{color:var(--ink)}
.pwsee.on{color:var(--point);font-weight:600}
/* 아는 사람만 여는 칸 (음력·태어난 시) */
.more{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.more summary{font-size:11.34px;color:var(--body);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:6px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"＋";font-size:12px;color:var(--point)}
.more[open] summary::before{content:"−"}
.more summary:hover{color:var(--ink)}
/* .wx 줄 안에 들어간 칩·비밀번호 칸 — 회색 칸 위에서 눌리는 것으로 읽혀야 한다 */
.wx .wchip{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.wx .wchip:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--point)}
.wx .wchip.on{background:var(--point);color:#fff;box-shadow:none}
.wx .pwrap{display:block}
.wx .pwrap input{width:100%}
/* 내 정보 읽기 모드 — 값이 칸처럼 보이지 않게 */
.wx .wv{flex:1;font-size:12.96px;font-weight:500;color:var(--ink)}
/* 「안 먹었어요」 — 거른 것도 기록이다. 빈칸과 구분되어야 한다. */
.wskip{display:flex;align-items:center;gap:9px;margin-top:12px;cursor:pointer;
  font-size:11.7px;color:var(--body)}
.wskip input{width:17px;height:17px;flex:none;accent-color:var(--point);cursor:pointer}
.wskip span b{color:var(--ink);font-weight:600}
.wskip:hover span{color:var(--ink)}
/* 거른 끼니는 그 칸을 흐리게 — 적을 게 없다는 뜻이 눈에 보이게 */
.wp.off .wshots,.wp.off .wta,.wp.off .wcc,.wp.off .whint:not(.wstatus){opacity:.35;pointer-events:none}
.wtab.skip{opacity:.72}
.wtab.skip .dot{background:transparent;box-shadow:inset 0 0 0 1.2px var(--point)}

/* ── 오행체질 자가진단 (2026-08-24) ────────────────────────────────
   연락처·생년월일은 칸을 나눠 받는다. 한 칸에 몰아 넣으면 모바일에서 틀리기 쉽고,
   틀린 자리를 고치려고 커서를 옮기다 이탈한다. */
.wsplit{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
/* 칸 너비는 받을 자릿수만큼만. 100% 로 늘리면 빈 회색 판이 넓게 남아 어디를 눌러야 할지 모른다 */
.wsplit input{flex:none;text-align:center;min-width:0;
  background:#fff;border-radius:8px;padding:5px 2px;box-shadow:inset 0 0 0 1px var(--line)}
.wsplit input:focus{box-shadow:inset 0 0 0 1.5px var(--point)}
.wsplit input[maxlength="2"]{width:3em}
.wsplit input[maxlength="3"]{width:3.6em}
.wsplit input[maxlength="4"]{width:4.6em}
.wsplit i{font-style:normal;font-size:11.16px;color:var(--muted);flex:none;margin:0 1px}
/* 고민·동의 줄은 체크박스가 왼쪽에 온다 — .wx.agree 와 같은 결 */
.conds .wx input[type=checkbox]{width:auto;flex:none;accent-color:var(--point);cursor:pointer}
.conds .wx:has(input[type=checkbox]){cursor:pointer;align-items:flex-start;gap:10px}
.conds .wx:has(input[type=checkbox]) span{min-width:0;font-size:11.7px;line-height:1.65}
/* 번호 붙은 단계 설명 — 앞 라벨을 고정폭으로 세운다 */
.conds li.wx>span{min-width:3.4em}
.conds ol,.conds ul{list-style:none;margin:0;padding:0}

/* 단계 설명 — 라벨은 고정폭, 본문은 한 덩어리로 흐른다 */
.conds .steps li.wx{align-items:flex-start}
.conds .steps li.wx>span{min-width:3.2em;padding-top:1px}
.conds .steps p{margin:0;font-size:11.7px;line-height:1.65;word-break:keep-all}

/* 되돌릴 수 없는 단추(탈퇴) — 저장·등록과 **같은 색으로 두지 않는다**.
   시안의 .pill 결은 그대로 두고 색만 경고색으로 바꾼다. */
.pill.warn{background-image:none;background-color:var(--warn,#c0562f);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -12px rgba(192,86,47,.8)}
.pill.warn:hover{filter:brightness(1.06)}

/* 내 정보 — 칸 하나씩 고치기 (2026-09-16 사용자 지시).
   읽기 줄 끝의 「수정」과, 그 칸만 열렸을 때의 줄(.wxf).
   ⚠️ .wx 는 gap 8px 짜리 flex 다. .wv 가 flex:1 이라 「수정」은 자연히 오른쪽 끝에 선다.
      누르는 자리가 44px 은 돼야 해서 글자보다 넉넉히 잡는다(폰에서 옆 줄을 누르게 된다). */
.wedit{flex:none;margin:-8px -6px -8px 0;padding:8px 10px;border-radius:8px;
  font-size:11.16px;font-weight:600;color:var(--point);text-decoration:none;white-space:nowrap}
.wedit:hover{background:rgba(0,0,0,.05)}
.wedit:focus-visible{outline:2px solid var(--point);outline-offset:-2px}

/* 열린 칸 — 입력 줄과 저장·취소를 한 덩어리로 묶는다.
   폰에서는 단추가 아래로 내려가야 입력 칸이 좁아지지 않는다. */
.wxf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wxf>.wx{flex:1 1 200px;min-width:0}
.wxf-act{display:flex;gap:6px;flex:none;margin-left:auto}
@media(max-width:480px){
  .wxf>.wx{flex:1 1 100%}
  .wxf-act{margin-left:0}
}

/* 눈에는 안 보이고 읽어 주기만 하는 글.
   「수정」만 여럿이면 화면 낭독기로는 어느 칸의 수정인지 알 수 없다. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* 칩 단추 — `.chip` 은 sian-admin.css 에만 있어서 **환자 화면에서는 아무 모양이 없었다**.
   /me 의 「내 진단 결과」·「수정하기」와 /me/result 의 「내 정보」·「보기」가 맨 글자로 나왔다
   (2026-09-16 확인). 관리자 화면과 **같은 모양**을 환자 쪽에도 준다.
   ⚠️ 범위를 씌우지 않으면 관리자 칩까지 덮는다 — app.css 가 sian-admin.css 보다 뒤에 온다. */
body:not(.admin) .chip{display:inline-flex;align-items:center;border-radius:100px;
  padding:7px 13px;font-size:10.53px;font-weight:500;text-decoration:none;white-space:nowrap;
  background:#f4f3f0;color:var(--body);transition:background .25s,color .25s}
body:not(.admin) .chip:hover{background:var(--cream3);color:var(--ink)}
body:not(.admin) .chip:focus-visible{outline:2px solid var(--point);outline-offset:2px}

/* 같은 문제가 더 있었다 — 아래 클래스도 sian-admin.css 에만 있어서 환자 화면에서 모양이 없었다.
     .meal .mkey .mtext        → 약관 전문(/policy/*) 의 조항 줄
     .tbl .tblwrap .mnone      → 내 진단 결과(/me/result) 의 인바디·문진표 표
   관리자 CSS 의 선언을 그대로 옮겼다(토큰도 같은 것을 쓴다). 관리자 쪽은 건드리지 않는다. */
body:not(.admin) .meal{padding:18px 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:82px minmax(0,1fr);gap:16px;align-items:start}
body:not(.admin) .meal:last-child{border-bottom:0}
body:not(.admin) .mkey{display:flex;flex-direction:column;gap:3px}
body:not(.admin) .mkey b{font-size:13.5px;color:var(--ink);font-weight:600}
body:not(.admin) .mkey i{font-style:normal;font-size:10.125px}
body:not(.admin) .mtext{font-size:12.555px;line-height:1.75;color:var(--ink)}
body:not(.admin) .mnone{font-size:11.745px;color:var(--body);background:#faf9f6;
  border-radius:var(--r-xs);padding:12px 15px}
body:not(.admin) .tblwrap{max-height:70vh;overflow:auto;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line);background:#fff}
body:not(.admin) .tbl{width:100%;border-collapse:collapse}
body:not(.admin) .tbl th,body:not(.admin) .tbl td{text-align:left;padding:12px 14px;
  font-size:11.745px;border-bottom:1px solid var(--line);vertical-align:middle}
body:not(.admin) .tbl th{font-size:10.53px;font-weight:600;color:var(--ink);background:#faf9f6;
  position:sticky;top:0;z-index:1}
body:not(.admin) .tbl td b{color:var(--ink);font-weight:600}
body:not(.admin) .tbl tr:last-child td{border-bottom:0}
/* 폰에서 조항 줄이 82px 칸 때문에 눌리지 않게 — 좁으면 위아래로 편다 */
@media(max-width:480px){
  body:not(.admin) .meal{grid-template-columns:minmax(0,1fr);gap:7px}
}

/* ══ 월간 기록 (/month) — 2026-09-16 ══════════════════════════════
   주간 비교는 시안 카드(.sp)를 쓰지만 저 판은 7칸에 맞춰 짜여 있어 한 달을 못 담는다.
   그래서 이 화면은 제 마크업을 쓴다. 색·모서리·선은 앱 토큰 그대로다.
   ⚠️ `.chip` 은 sian-admin.css 에만 있어 **환자 화면에서는 아무 모양이 없다**.
      그래서 보기 전환은 .mo-tab 으로 따로 짰다. */
.mo-switch{display:flex;gap:6px;flex-wrap:wrap}
.mo-tab,.mo-switch>.chip{border-radius:100px;padding:7px 14px;font-size:11.16px;font-weight:600;
  text-decoration:none;border:1px solid var(--point-line);color:var(--point);background:#fff;
  display:inline-flex;align-items:center;white-space:nowrap}
.mo-tab:hover{background:var(--point-soft)}
.mo-tab.on,.mo-switch>.chip.on{background:var(--point);border-color:var(--point);color:#fff}
.mo-tab:focus-visible{outline:2px solid var(--point);outline-offset:2px}

.mo-head{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 14px}
.mo-title{font-size:16.2px;font-weight:700;color:var(--ink);min-width:9.5em;text-align:center}
.mo-title i{font-style:normal;font-size:10.53px;font-weight:600;color:var(--point);
  background:var(--point-soft);border-radius:100px;padding:3px 9px;margin-left:8px;vertical-align:2px}
.mo-step{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
  color:var(--point);text-decoration:none;font-size:20px;line-height:1;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line)}
.mo-step:hover{background:var(--point-soft)}
.mo-step:focus-visible{outline:2px solid var(--point);outline-offset:2px}
.mo-step.off{color:rgba(0,0,0,.18);background:transparent;box-shadow:none;cursor:default}

/* 요약 다섯 칸 — 좁아지면 접힌다. 한 칸만 남는 줄이 생기지 않게 최소 폭을 넉넉히 잡았다. */
.mo-sums{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:10px;margin-bottom:16px}
.mo-s{background:#fff;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line);padding:13px 15px}
.mo-s span{display:block;font-size:10.53px;color:var(--body);margin-bottom:5px}
.mo-s b{font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mo-s b.good{color:var(--point)}
.mo-s em{font-style:normal;font-size:11.16px;font-weight:500;color:var(--body);margin-left:2px}

.mo-legend{display:flex;align-items:center;gap:6px;font-size:10.53px;color:var(--body)}
.mo-legend i{display:inline-block;margin-left:6px}
.mo-legend i.bar{width:7px;height:9px;border-radius:2px;background:var(--point-soft);
  box-shadow:inset 0 0 0 1px var(--point-line)}
.mo-legend i.line{width:12px;height:0;border-top:1.5px solid var(--point)}

/* 하루씩 그래프 — 막대(운동) 위에 선(체중)을 겹친다. 한 달이라 칸이 얇다. */
.mo-plotwrap{overflow-x:auto}
.mo-plot{position:relative;height:132px;min-width:min(100%,calc(var(--cols)*11px))}
.mo-bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);
  align-items:end;gap:1px}
.mo-bar{display:block;height:var(--h);border-radius:2px 2px 0 0;background:var(--point-soft);
  box-shadow:inset 0 0 0 1px var(--point-line)}
.mo-bar.none{box-shadow:none}
.mo-line{position:absolute;inset:0;width:100%;height:100%;color:var(--point);overflow:visible}
.mo-xaxis{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:1px;margin-top:7px;
  min-width:min(100%,calc(var(--cols)*11px))}
.mo-xaxis span{font-size:8.64px;color:var(--body);text-align:center;font-variant-numeric:tabular-nums}
.mo-xaxis span.sun{color:#b4553a}
.mo-xaxis span.sat{color:#4a6fa0}
.mo-scale{margin-top:10px}
.mo-empty{margin:6px 0}

/* 주차별 표 — 폰에서는 가로로 민다. 페이지 전체가 넘치지 않게 제 상자 안에서만 민다. */
.mo-tablewrap{overflow-x:auto;margin:0 -4px}
.mo-table{width:100%;border-collapse:collapse;font-size:12.06px;white-space:nowrap}
.mo-table th,.mo-table td{padding:10px 8px;text-align:right;font-variant-numeric:tabular-nums}
.mo-table thead th{font-size:10.53px;font-weight:600;color:var(--body);
  border-bottom:1px solid var(--line);text-align:right}
.mo-table th[scope=row]{text-align:left;font-weight:700;color:var(--ink)}
.mo-table thead th:first-child,.mo-table td.span{text-align:left}
.mo-table td.span{color:var(--body)}
.mo-table tbody tr{border-bottom:1px solid var(--line)}
.mo-table tbody tr:last-child{border-bottom:0}
.mo-table tbody td{color:var(--ink);font-weight:500}
.mo-table td.good{color:var(--point);font-weight:700}
.mo-table tr.empty th[scope=row],.mo-table tr.empty td{color:rgba(0,0,0,.28);font-weight:400}
.mo-table em{font-style:normal;font-size:10.08px;color:var(--body);font-weight:400;margin-left:1px}

/* 두 열 판(.cols)이 한 열로 접힐 때 — **minmax(0,1fr)** 로 둔다.
   `1fr` 은 열의 최소 폭이 '내용 폭'이라, 안에 든 표·차트·입력 줄이 열을 통째로 넓힌다.
   그러면 폰에서 페이지가 폭을 넘고, 크롬이 화면 전체를 축소해 글자만 작아진다
   (시안의 .shell 주석이 같은 함정을 적어 두었다. 여기도 같은 이유다).
   시안 파일은 손으로 고치지 않으므로(tools/sync-sian.js 가 다시 뽑는다) 이 파일에서 덮는다.
   접히는 지점이 관리자 1240px · 환자 1180px 로 달라 둘로 나눠 적는다. */
@media (max-width:1240px){
  body.admin .cols{grid-template-columns:minmax(0,1fr)}
  body.admin .cols>*{min-width:0}
}
@media (max-width:1180px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .cols>*{min-width:0}
}

/* Today diary: persistent starting/target weights and calculated loss. */
.weight-goal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin:0 0 26px;padding:24px;background:#fff;border:1px solid rgba(49,71,58,.16);border-radius:16px}
.weight-goal-field,.weight-goal-result{min-width:0;display:flex;flex-direction:column;gap:10px;font-size:13px;color:#31473a}
.weight-goal-input{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f6f3ed;border:1px solid #d9ded7;border-radius:8px}
.weight-goal-input input{min-width:0;width:100%;height:32px;border:0;background:transparent;color:#31473a;font-family:inherit;font-weight:600;font-size:22px;line-height:1.3}
.weight-goal em{font-size:13px;font-style:normal;opacity:.65}
.weight-goal-result{padding-left:24px;border-left:1px solid #e1e4dd;justify-content:center}
.weight-goal-result output{font-size:32px;font-weight:600;font-variant-numeric:tabular-nums;margin-right:8px}
.weight-goal-help,.weight-goal-error{grid-column:1/-1;margin:0;font-size:12px;line-height:1.6;color:#676b70}
.weight-goal-error{color:#a13b2d}
.weight-goal input:focus-visible{outline:2px solid #31473a;outline-offset:3px}
@media(max-width:600px){.weight-goal{grid-template-columns:1fr 1fr;padding:18px;gap:16px}.weight-goal-result{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;border-left:0;border-top:1px solid #e1e4dd;padding:14px 0 0}.weight-goal-field{font-size:12px}}