/* 에임 도덕 활동지 공통 모양 · ws.css v1.0 (2026-09-29) — 견본(우정 온도계)의 모양을 그대로 옮김 */

  :root{ --night:#1d2b4a; --brass:#c8912f; --needle:#d8434b; --paper:#f6f8fb; --line:#cfd6e2; --soft:#5d6b85; --ok:#2f7d5b; --blush:#fff3f1; }
  *{box-sizing:border-box}
  html,body{margin:0;background:#e9edf3}
  body{color:var(--night);font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;line-height:1.6;word-break:keep-all;font-size:15px}
  button{font-family:inherit;cursor:pointer}
  button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,label:focus-within{outline:3px solid var(--brass);outline-offset:2px}
  .bar{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);padding:10px 14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
  .bar a{font-size:.84rem;color:var(--soft);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:6px 12px}
  .btn{font-size:.86rem;font-weight:800;border:0;border-radius:10px;padding:9px 14px;background:var(--night);color:#fff}
  .btn.ghost{background:#fff;color:var(--night);border:1.5px solid var(--line)}
  .btn[aria-pressed="true"]{background:var(--brass);color:var(--night)}
  #msg{font-size:.8rem;color:var(--soft);width:100%;text-align:center;min-height:1.1em}
  .sheet{background:#fff;max-width:820px;margin:18px auto 60px;padding:34px 36px;box-shadow:0 8px 24px rgba(20,30,50,.08);border-radius:4px}
  @media (max-width:600px){ .sheet{padding:20px 14px;margin:10px 6px 40px} }

  .head{display:flex;gap:14px;align-items:center;border-bottom:3px solid var(--night);padding-bottom:10px;margin-bottom:12px}
  .head .icon{width:52px;height:52px;flex:none;border-radius:14px;background:var(--blush);display:flex;align-items:center;justify-content:center;font-size:30px}
  .head .kicker{font-size:.8rem;color:var(--soft);margin:0}
  .head h1{margin:0;font-size:1.6rem;letter-spacing:-.02em}
  .who{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 12px}
  @media (max-width:600px){ .who{grid-template-columns:1fr 1fr} }
  .who label{display:flex;align-items:center;gap:6px;font-size:.86rem;font-weight:700;min-width:0}
  .who input{width:100%}
  .who input{flex:1;min-width:0;border:0;border-bottom:1.5px solid var(--night);font:inherit;padding:2px 4px;background:transparent}
  .q{background:var(--blush);border-radius:10px;padding:10px 14px;margin:0 0 16px}
  .q b{color:var(--needle)}
  .q p{margin:2px 0}

  h2{font-size:1.1rem;margin:22px 0 6px;padding-left:10px;border-left:6px solid var(--brass)}
  .guide{margin:0 0 8px;color:var(--soft);font-size:.9rem}
  .kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
  @media (max-width:600px){ .kinds{grid-template-columns:1fr} }
  .kinds div{border:1px solid var(--line);border-top:4px solid;border-radius:8px;padding:8px 10px;font-size:.84rem}
  .kinds b{display:block;font-size:.9rem}
  table{width:100%;border-collapse:collapse;margin:0 0 10px;font-size:.9rem}
  th,td{border:1px solid #9aa6bb;padding:6px 8px;vertical-align:middle}
  th{background:#eef1f6;font-size:.84rem}
  td.c{text-align:center;width:74px}
  tr{break-inside:avoid}
  @media (max-width:600px){ th,td{padding:4px 5px} th{font-size:.72rem} td.c{width:44px} table{font-size:.84rem} th br{display:none} }
  .box{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  .box input{position:absolute;opacity:0;width:1px;height:1px}
  .box span{width:20px;height:20px;border:2px solid var(--night);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;background:#fff}
  .box input:checked + span::after{content:'✔'}
  .box.round span{border-radius:50%}
  .chk{display:flex;gap:8px;align-items:flex-start;margin:4px 0;font-size:.92rem;cursor:pointer}
  .chk .box{margin-top:1px}
  .cols{columns:2;column-gap:20px}
  @media (max-width:600px){ .cols{columns:1} }
  .cols .chk{break-inside:avoid}

  .write{margin:4px 0 10px}
  .write label{display:block;font-weight:700;font-size:.9rem;margin-bottom:3px}
  .write textarea{width:100%;border:1.5px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;line-height:28px;resize:vertical;min-height:62px;
    background-image:repeating-linear-gradient(transparent 0 27px,#dfe4ec 27px 28px);background-attachment:local}
  .ptext{display:none}
  .dil{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 10px;break-inside:avoid}
  .dil p{margin:0 0 6px;font-weight:700}
  .ab{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 6px}
  @media (max-width:600px){ .ab{grid-template-columns:1fr} }
  .hint{font-size:.82rem;color:var(--soft);margin:0 0 4px}
  .note{font-size:.84rem;background:#eef2f9;border-radius:8px;padding:8px 12px;margin:0 0 10px}
  .self td:first-child{width:auto}
  .sign{display:flex;justify-content:flex-end;gap:20px;margin-top:14px;font-size:.88rem}
  .sign span{border-bottom:1.5px solid var(--night);min-width:120px;display:inline-block}
  .foot{margin-top:18px;font-size:.76rem;color:var(--soft);text-align:center}

  .ans{display:none;color:var(--ok);font-weight:800;font-size:.82rem}
  body.show-ans .ans{display:inline}
  body.show-ans td.good{background:#eaf5ef}

  @page{size:A4;margin:12mm}
  @media print{
    html,body{background:#fff}
    .bar{display:none}
    .sheet{box-shadow:none;margin:0;max-width:none;padding:0}
    textarea{display:none}
    .ptext{display:block;border:1px solid #9aa6bb;border-radius:4px;padding:4px 8px;line-height:28px;white-space:pre-wrap;min-height:62px}
    .ptext.empty{background-image:repeating-linear-gradient(transparent 0 27px,#9aa6bb 27px 28px)}
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    h2{break-after:avoid}
  }
  .card-note{font-size:.84rem;color:var(--soft)}
  .qtext{margin:0 0 6px;font-weight:700}
  .row-in{display:flex;align-items:center;gap:6px}
  .row-in input{width:64px;border:0;border-bottom:1.5px solid var(--night);font:inherit;text-align:center;background:transparent}
  .row-in input.wide{width:100%;text-align:left}
  .helpbox{margin-top:14px;font-size:.84rem;background:#eef2f9;border-radius:8px;padding:8px 12px}
  .sec{break-inside:auto}
  .bullets{margin:0 0 10px;padding-left:1.2em;font-size:.9rem}
  .bullets li{margin:2px 0}
  .chk .ans{margin-left:4px}
  /* 칸이 셋 이상인 표: 휴대폰에서는 문장을 위에, 고르는 칸을 아래 한 줄로 */
  .m-label{display:none}
  @media (max-width:600px){
    table.many tr{display:grid;grid-template-columns:repeat(var(--n),1fr)}
    table.many tr:first-child{display:none}
    table.many td:first-child{grid-column:1/-1;border-bottom:0}
    table.many td.c{width:auto;border-top:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px}
    table.many .m-label{display:block;font-size:.66rem;line-height:1.25;text-align:center;color:var(--soft)}
  }