/* The chart shares the site's warm paper, ink and terracotta palette. */
#manseryeok-root{max-width:760px;margin:0 auto;padding:0;color:var(--ui-ink);font-family:var(--sans)}
#manseryeok-root [hidden]{display:none!important}
.ms-intro{margin:0 0 24px;color:var(--ui-muted);line-height:1.7}
.ms-guest-notice{margin:0 0 18px;padding:18px 20px;border:1px solid var(--ui-gold);border-radius:var(--ui-radius);background:var(--ui-soft);font-size:14px;line-height:1.7;text-align:center}
.ms-guest-notice p{margin:0}
.ms-account{margin-bottom:16px;padding:18px 20px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-soft);font-size:14px}
.ms-account p{margin:0;line-height:1.75;overflow-wrap:anywhere}
.ms-login{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;color:var(--ui-action);font-weight:700;text-underline-offset:4px}
.ms-account .ms-login,.ms-guest-notice .ms-login{display:flex;width:max-content;margin:8px auto 0}
.ms-guest-notice .ms-login{box-sizing:border-box;justify-content:center;width:min(100%,240px);margin-top:14px;padding:10px 16px;border-radius:10px;background:#fee500;color:#191600;text-align:center;text-decoration:none}
.ms-guest-notice .ms-login:hover{background:#f5d900}
.ms-profile{display:flex;flex-direction:column;gap:8px;margin:16px 0;font-size:13px;font-weight:600;color:var(--ui-muted)}
.ms-account .ms-profile{margin-bottom:0}
.ms-form{padding:24px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-surface)}
.ms-form-heading{margin:0 0 6px;font:700 20px/1.4 var(--serif);letter-spacing:-.035em}
.ms-form-lead{margin:0 0 24px;color:var(--ui-muted);font-size:13px;line-height:1.75}
.ms-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.ms-field{display:flex;min-width:0;flex-direction:column;gap:8px;font-size:13px;font-weight:600}
.ms-field input,.ms-field select,.ms-profile select{box-sizing:border-box;width:100%;min-width:0;min-height:48px;border:1px solid var(--ui-line);border-radius:var(--ui-control-radius);padding:11px 12px;background:var(--ui-surface);color:var(--ui-ink);font:400 16px/1.5 var(--sans);transition:border-color .15s,box-shadow .15s}
.ms-field input:hover:not(:disabled),.ms-field select:hover:not(:disabled),.ms-profile select:hover{border-color:var(--ui-gold)}
.ms-field input:focus-visible,.ms-field select:focus-visible,.ms-profile select:focus-visible{outline:2px solid var(--ui-action);outline-offset:3px}
.ms-field input:disabled,.ms-field select:disabled{background:var(--ui-soft);color:var(--ui-muted);cursor:not-allowed}
.ms-field input::placeholder{color:var(--ui-muted);font-size:14px}
.ms-options{display:flex;flex-wrap:wrap;gap:4px 20px;margin:22px 0;padding:16px 0;border-top:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line);font-size:13px}
.ms-options label{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer}
.ms-options label:has(input:disabled){color:var(--ui-muted);cursor:default}
.ms-options input{accent-color:var(--ui-action);width:18px;height:18px;flex-shrink:0;margin:0}
.ms-options input:focus-visible{outline:2px solid var(--ui-action);outline-offset:3px}
.ms-submit{width:100%;min-height:48px;border:1px solid var(--ui-action);border-radius:var(--ui-control-radius);background:var(--ui-action);color:var(--ui-surface);font:600 15px/1.5 var(--sans);cursor:pointer}
.ms-submit:hover:not(:disabled){background:var(--ui-action-hover)}
.ms-submit:focus-visible,.ms-other:focus-visible,.ms-export:focus-visible,.ms-login:focus-visible{outline:2px solid var(--ui-action);outline-offset:3px}
.ms-submit:disabled,.ms-export:disabled{opacity:.55;cursor:default}
.ms-status{font-size:13px;line-height:1.7;margin:14px 0;color:var(--ui-muted)}
.ms-status:empty{display:none}
.ms-result{scroll-margin-top:90px}
.ms-card{margin-top:20px;padding:24px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-surface);overflow:hidden}
.ms-card:first-child,.ms-guest-notice+.ms-card{margin-top:0}
.ms-card h3{margin:0 0 18px;font:700 21px/1.45 var(--serif);letter-spacing:-.035em;overflow-wrap:anywhere}
.ms-meta,.ms-note{font-size:12px;color:var(--ui-muted);line-height:1.85;overflow-wrap:anywhere}
.ms-meta{margin:-6px 0 20px}
.ms-note{margin:16px 0 0}
.ms-table-wrap{overflow-x:auto;border:1px solid var(--ui-line);border-radius:12px}
.ms-table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:0;font-size:12px;text-align:center}
.ms-table th,.ms-table td{padding:12px 7px;border-bottom:1px solid var(--ui-line);vertical-align:middle;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
.ms-table tbody tr:last-child>*{border-bottom:0}
.ms-table thead th{background:var(--ui-soft);color:var(--ui-muted);font-size:13px;font-weight:600}
.ms-table th:first-child{width:62px;color:var(--ui-muted);font-size:11px;font-weight:500}
.ms-table td:nth-child(3),.ms-table thead th:nth-child(3){background:#f7ede4}
.ms-table thead th:nth-child(3){color:var(--ui-action);font-weight:700}
.ms-symbol{font-family:var(--serif),serif;font-size:36px;line-height:1.3;font-weight:700;display:inline-block}
.ms-symbol[data-element=목],.ms-element[data-element=목]{color:#486d54}
.ms-symbol[data-element=화],.ms-element[data-element=화]{color:#a4574c}
.ms-symbol[data-element=토],.ms-element[data-element=토]{color:#8b6b2e}
.ms-symbol[data-element=금],.ms-element[data-element=금]{color:#746c61}
.ms-symbol[data-element=수],.ms-element[data-element=수]{color:#496f82}
.ms-elements{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ms-element{display:flex;min-width:0;flex-direction:column;align-items:center;gap:9px;padding:16px 10px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-soft)}
.ms-element strong{font:700 24px/1.4 var(--serif)}
.ms-element span{font-size:13px}
.ms-element meter{width:100%;height:8px;accent-color:currentColor}
.ms-element meter::-webkit-meter-bar{background:#e6ded2;border:0;border-radius:4px}
.ms-element meter::-webkit-meter-optimum-value{background:currentColor;border-radius:4px}
.ms-element meter::-moz-meter-bar{background:currentColor;border-radius:4px}
.ms-strength{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--ui-soft);color:var(--ui-action);font-size:15px;line-height:1.6}
.ms-periods{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#c8b7a3 transparent}
.ms-periods:focus-visible{outline:2px solid var(--ui-action);outline-offset:3px}
.ms-period{box-sizing:border-box;display:flex;flex:0 0 92px;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:134px;padding:14px 6px;border:1px solid var(--ui-line);background:var(--ui-surface);border-radius:12px;text-align:center;scroll-snap-align:start}
.ms-period.is-current{background:var(--ui-soft);border:2px solid var(--ui-gold)}
.ms-period small{font-size:11px;color:var(--ui-muted);line-height:1.6}
.ms-period strong{font-family:var(--serif),serif;font-size:27px;line-height:1.4}
.ms-period span{font-size:12px;color:var(--ui-muted)}
.ms-period.is-current strong{color:var(--ui-action)}
.ms-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px;padding:0}
.ms-actions :is(.ms-other,.ms-export){display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:48px;padding:10px;border-radius:var(--ui-control-radius);font:600 14px/1.5 var(--sans);letter-spacing:-.02em;cursor:pointer}
.ms-other{color:var(--ui-ink);border:1px solid var(--ui-line);background:var(--ui-surface)}
.ms-other:hover{background:var(--ui-soft);border-color:var(--ui-gold)}
.ms-export{color:var(--ui-surface);border:1px solid var(--ui-action);background:var(--ui-action)}
.ms-export:hover:not(:disabled){background:var(--ui-action-hover)}
.ms-export-root{position:absolute;left:-100000px;top:0;box-sizing:border-box;padding:24px;background:#fbf7ee;color:var(--ui-ink);font-family:var(--sans)}
.ms-export-root .ms-card,.ms-export-root .ms-table-wrap{overflow:visible}
.ms-export-root .ms-table{min-width:0;width:100%}
.ms-export-root .ms-periods{overflow:visible;scroll-snap-type:none;gap:8px;flex-wrap:wrap}
.ms-export-root .ms-period{box-sizing:border-box;flex:0 0 86px;min-width:0}
.ms-export-meter{width:100%;height:8px;background:#e7dfd2;border-radius:4px;overflow:hidden}
.ms-export-meter span{height:100%;display:block;background:currentColor}
@media(max-width:540px){
  .ms-form,.ms-card{padding:20px 16px}
  .ms-account{padding:16px}
  .ms-fields{gap:18px 12px}
  .ms-field input,.ms-field select{padding:10px 8px}
  .ms-card h3{font-size:20px}
  .ms-table th,.ms-table td{font-size:11px;padding:10px 3px}
  .ms-table th:first-child{width:40px;font-size:10px}
  .ms-symbol{font-size:29px}
  .ms-elements{gap:5px}
  .ms-element{padding:12px 4px;gap:6px}
  .ms-element strong{font-size:21px}
  .ms-element span{font-size:12px}
  .ms-period{flex-basis:68px;padding:12px 4px}.ms-period small{font-size:10px}
}
@media(max-width:360px){
  .ms-form,.ms-card{padding:18px 12px}
  .ms-field-wide{grid-column:1/-1}
  .ms-actions :is(.ms-other,.ms-export){font-size:13px;padding:10px 6px}
  .ms-symbol{font-size:25px}
  .ms-table th:first-child{width:34px}
}
@media(prefers-reduced-motion:reduce){.ms-field input,.ms-field select,.ms-profile select{transition:none}}

/* 만세력 표 아래에 합친 오행 분포·신강신약 */
.ms-summary{display:grid;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--ui-line)}
.ms-sub{margin:0 0 8px;color:#8a7d6a;font:600 12px/1.4 var(--sans);letter-spacing:.06em}
.ms-summary .ms-elements{gap:6px}
.ms-summary .ms-element{padding:10px 4px 12px;gap:5px}
.ms-summary .ms-element strong{font-size:19px;line-height:1.2}
.ms-strength-row{display:grid;justify-items:start;gap:0}
.ms-strength-row .ms-strength{padding:8px 14px}

/* 입력 폼 — 기질 테스트와 같은 압축 배치(보조 선택은 라벨 줄 오른쪽 알약, 칸 높이 44px) */
.ms-form{padding:18px 18px 16px}
.ms-form-heading{font-size:18px}
.ms-form-lead{margin-bottom:14px}
.ms-fields{gap:12px 10px}
.ms-field input,.ms-field select{min-height:44px;height:44px;padding:0 13px}
.ms-block{display:grid;gap:6px}
.ms-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;color:var(--ui-ink);font:700 13px/1.3 var(--sans);letter-spacing:-.01em}
.ms-pills{display:flex;gap:2px;padding:2px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-soft)}
.ms-pill{display:grid;place-items:center;min-width:46px;height:26px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--ui-muted);font:600 12.5px/1 var(--sans);cursor:pointer;touch-action:manipulation}
.ms-pill[hidden]{display:none}
.ms-pill[aria-pressed=true]{background:var(--ui-action);color:#fbf3e4}
.ms-pill:focus-visible{outline:2px solid var(--ui-action);outline-offset:2px}
.ms-row{display:grid;align-items:center;gap:6px;color:var(--ui-muted);font:500 13px/1 var(--sans)}
.ms-row-date{grid-template-columns:minmax(0,1.5fr) auto minmax(0,1fr) auto minmax(0,1fr) auto}
.ms-row-time{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.5fr)}
.ms-part{box-sizing:border-box;width:100%;min-width:0;height:44px;padding:0 8px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface);color:var(--ui-ink);font:500 16px/1.2 var(--sans);text-align:center;font-variant-numeric:tabular-nums}
.ms-part::placeholder{color:#b3a999;font-weight:400}
.ms-part:focus-visible{outline:2px solid var(--ui-action);outline-offset:2px}
.ms-part:disabled{background:#efe9de;color:#a89e90}
.ms-gender{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ms-pill-wide{height:44px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface);font-size:15px}
.ms-pill-wide[aria-pressed=true]{border-color:var(--ui-action)}
.ms-options{margin:14px 0 12px;padding:10px 0;font-size:13px}
.ms-options summary{cursor:pointer;color:var(--ui-muted);font-weight:600;min-height:28px;display:flex;align-items:center}
.ms-place{margin-top:10px}
.ms-options>label{margin-top:8px}
.ms-fields[data-compact]{grid-template-columns:minmax(0,1fr)}
.ms-place{grid-template-columns:repeat(2,minmax(0,1fr))}
.ms-place .ms-field-wide{grid-column:auto}

/* 사진 저장: 결과 아래 하단에 붙어 따라오는 큰 단추. 뒤로는 종이색이 번져 글씨가 겹쳐 보이지 않는다. */
.ms-actions{position:sticky;bottom:0;z-index:5;grid-template-columns:minmax(0,1fr);margin:18px -4px 0;padding:18px 4px calc(14px + env(safe-area-inset-bottom,0px));background:transparent}
.ms-actions .ms-export{min-height:54px;gap:8px;border:0;border-radius:14px;background:linear-gradient(135deg,#6a3a33,#55312d);box-shadow:0 8px 20px #55312d40,inset 0 1px 0 #ffffff26;font:700 16px/1.4 var(--sans);letter-spacing:-.02em}
.ms-actions .ms-export::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ms-actions .ms-export:hover:not(:disabled){background:linear-gradient(135deg,#5c332d,#432520)}
.ms-actions .ms-export:active:not(:disabled){transform:translateY(1px)}
.ms-actions[hidden]{display:none}

/* 이미지 내보내기(430px 폭 두 장): 화면 결과를 복제해 모바일 한 화면에 들어오게 압축한다. */
.ms-export-root{padding:16px 14px 12px;background:#fbf7ee;background-image:linear-gradient(#fbf7ee,#f6efe1)}
.ms-export-root .ms-card{margin:0 0 10px;padding:14px 12px;border-radius:14px;box-shadow:none}
.ms-export-root .ms-card h3{margin:0 0 6px;font-size:17px;line-height:1.35}
.ms-export-root .ms-meta{margin:-2px 0 8px;font-size:11px;line-height:1.6}
.ms-export-root .ms-note{margin:8px 0 0;font-size:10.5px;line-height:1.6}
.ms-export-root .ms-table th,.ms-export-root .ms-table td{padding:5px 2px;font-size:10.5px;line-height:1.45}
.ms-export-root .ms-table th:first-child{width:46px;font-size:9.5px}
.ms-export-root .ms-table thead th{font-size:11px}
.ms-export-root .ms-symbol{font-size:26px;line-height:1.2}
.ms-export-root .ms-summary{gap:8px;margin-top:10px;padding-top:10px}
.ms-export-root .ms-sub{margin:0 0 5px;font-size:11px}
.ms-export-root .ms-elements{gap:5px}
.ms-export-root .ms-element{gap:4px;padding:7px 2px 8px;border-radius:10px}
.ms-export-root .ms-element strong{font-size:16px;line-height:1.2}
.ms-export-root .ms-element span{font-size:11px}
.ms-export-root .ms-export-meter{height:6px}
.ms-export-root .ms-strength-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ms-export-root .ms-strength-row .ms-sub{margin:0}
.ms-export-root .ms-strength{padding:5px 10px;font-size:12px;line-height:1.4}
.ms-export-root .ms-periods{display:grid;gap:5px;padding:0;overflow:visible}
.ms-export-root .ms-period{flex:none;gap:3px;min-height:0;min-width:0;padding:8px 2px;border-radius:9px}
.ms-export-root .ms-period small{font-size:9px;line-height:1.4}
.ms-export-root .ms-period strong{font-size:20px;line-height:1.25}
.ms-export-root .ms-period span{font-size:10px}
/* 대운 5칸 · 세운 7칸 · 월운 6칸: 두 줄씩이라 둘째 장도 한 화면에 들어온다. */
.ms-export-root .ms-card:nth-of-type(1) .ms-periods{grid-template-columns:repeat(5,minmax(0,1fr))}
.ms-export-root .ms-card:nth-of-type(2) .ms-periods{grid-template-columns:repeat(7,minmax(0,1fr))}
.ms-export-root .ms-card:nth-of-type(3) .ms-periods{grid-template-columns:repeat(6,minmax(0,1fr))}
.ms-export-root .ms-card:nth-of-type(n+2) .ms-period{padding:6px 1px;gap:2px}
.ms-export-root .ms-card:nth-of-type(n+2) .ms-period small{font-size:8px;line-height:1.3;word-break:keep-all}
.ms-export-root .ms-card:nth-of-type(n+2) .ms-period strong{font-size:16px}
.ms-export-root .ms-card:nth-of-type(n+2) .ms-period span{font-size:9px}
.ms-export-foot{margin:2px 0 0;color:#8a7d6a;font:600 11px/1.5 var(--sans);text-align:center;letter-spacing:.08em}
.ms-export-brand{margin:2px 0 0;color:#a08a5f;font:600 10px/1.5 var(--serif);text-align:center;letter-spacing:.1em}

.ms-export-root .ms-period small.is-split{white-space:nowrap;letter-spacing:-.03em}
.ms-export-root .ms-card:nth-of-type(1) .ms-period{padding:6px 2px}
.ms-export-root .ms-card:nth-of-type(1) .ms-period strong{font-size:18px}

.ms-row-single{display:block}
.ms-single{text-align:left;padding:0 14px}