/* 손글씨 서비스 전용. 공통 색·여백 토큰을 그대로 사용합니다. */
.hf { --hf-gap: var(--gap-card); padding-bottom: var(--gap-section); }
.hf [hidden] { display: none !important; }
.hf-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.hf-tag { font-size: .76rem; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; }
.hf h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 400; margin: 0 0 18px; }
.hf-lead { max-width: 50ch; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.hf-scope { margin: 18px 0 0; max-width: 64ch; color: var(--muted); font-size: .9rem; }
.hf-steps { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; margin: 32px 0; font-size: .85rem; color: var(--muted); }
.hf-steps li[aria-current="step"] { color: var(--text); font-weight: 600; }
.hf-steps span { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; margin-right: 7px; }
.hf-setup { max-width: 720px; }
.hf label { display: block; font-size: .9rem; margin-bottom: 8px; }
.hf input[type="text"], .hf textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--text); background: var(--bg); font: inherit; min-width: 0; }
.hf textarea { resize: vertical; min-height: 100px; }
.hf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hf-actions { margin-top: 24px; }
.hf button, .hf .btn { min-height: 44px; }
.hf-note { color: var(--muted); font-size: .82rem; }
.hf-error { color: var(--danger); font-size: .9rem; margin: 14px 0; min-height: 1.5em; }
.hf-status { font-size: .87rem; color: var(--muted); min-height: 1.5em; margin: 14px 0 0; }
.hf-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.hf-panel { min-width: 0; }
.hf-panel h2 { font-size: 1.3rem; }
.hf-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hf-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; margin: 18px 0; }
.hf-char { position: relative; border-radius: 12px; min-width: 0; min-height: 60px !important; padding: 7px; border: 1px solid transparent; background: var(--surface); color: var(--text); font: inherit; font-size: 1.35rem; cursor: pointer; }
.hf-char[aria-pressed="true"] { border-color: var(--text); background: var(--surface2); }
.hf-char small { display: block; font: 10px/1.3 var(--font); color: var(--muted); }
.hf-char.hf-saved small { color: var(--ok); }
.hf-char img { display: block; width: 36px; height: 36px; margin: 0 auto; border-radius: 4px; }
.hf-progress { width: 100%; height: 5px; accent-color: var(--text); }
.hf-write-area { border-radius: 24px; background: var(--surface); padding: var(--pad-card); }
.hf-canvas-shell { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 18px auto 12px; background: var(--cp-bg); border: 1px solid var(--cp-line); border-radius: 18px; overflow: hidden; }
.hf-canvas-shell::before, .hf-canvas-shell::after { content: ""; position: absolute; pointer-events: none; opacity: .45; }
.hf-canvas-shell::before { top: 50%; width: 100%; border-top: 1px dashed var(--cp-line); }
.hf-canvas-shell::after { left: 50%; height: 100%; border-left: 1px dashed var(--cp-line); }
.hf-canvas-shell canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; position: relative; z-index: 1; }
.hf-write-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hf-target { font-size: 2rem; line-height: 1; }
.hf-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.hf-tools .btn { font-size: .82rem; padding: 8px 14px; }
.hf-slider { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; gap: 12px; align-items: center; margin: 18px 0; }
.hf-slider label { margin: 0; font-size: .82rem; }
.hf-slider input { width: 100%; accent-color: var(--text); min-width: 0; }
.hf-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.hf-preview { padding-top: 6px; }
.hf-preview-stage { min-height: 160px; padding: var(--pad-card); border-radius: 20px; background: var(--surface); display: flex; align-items: center; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 56px; line-height: 1.6; margin: 16px 0; }
.hf-preview-stage.hf-empty { color: var(--muted); font-size: 1rem; }
.hf-download { margin-top: 28px; }
.hf-download label { margin-top: 22px; }
.hf-details { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; font-size: .86rem; }
.hf-details summary { cursor: pointer; min-height: 44px; }
.hf-danger { margin-top: 38px; }
.hf-summary { padding: 12px 0; font-size: .9rem; }
.hf-visual { display: grid; place-items: center; width: 100%; height: 100%; font-size: clamp(32px, 4vw, 54px); }
.hf-visual span { transform: rotate(-7deg); display: inline-block; border-bottom: 2px solid var(--text); padding: 8px; }
.hf-back { margin-bottom: 12px; }
.hf .btn:disabled { opacity: .45; cursor: not-allowed; }
.hf-preview-wrap { margin-top: 30px; }
.hf-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gap-card); margin: 28px 0; }
.hf-choice-grid > div { padding: var(--pad-card); border: 1px solid var(--line); border-radius: 20px; }
.hf-choice-grid h3 { font-size: 1.05rem; }
.hf-choice-grid .btn { width: 100%; }
.hf label.hf-option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0; }
.hf-option input { width: 18px; height: 18px; accent-color: var(--text); }
.hf-paper { margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.hf-paper summary { cursor: pointer; min-height: 44px; }
.hf-upload-feedback { min-height: 1.7em; margin: 12px 0; font-size: .9rem; overflow-wrap: anywhere; }
.hf-upload-feedback.hf-upload-error { color: var(--danger); font-weight: 500; }
.hf-paper select { max-width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.hf-paper label { margin: 0; }
.hf-photo-stage { padding: var(--pad-card); background: var(--surface); border-radius: 24px; margin-bottom: 32px; scroll-margin-top: 80px; }
#hf-photo-canvas { display: block; width: min(100%,600px); height: auto; margin: 20px auto; cursor: crosshair; touch-action: manipulation; border: 1px solid var(--line); }
@media (max-width: 600px) { .hf-choice-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 900px) { .hf-grid { grid-template-columns: minmax(0, 1fr); } .hf-write-area { max-width: 600px; } }
@media (max-width: 400px) { .hf-tools { justify-content: flex-start; } .hf-steps { gap: 12px; font-size: .77rem; } .hf-row > .btn { flex: 1 1 auto; } .hf-write-area { padding: 16px; } }

/* Browse card: drawn strokes settle into reusable type. No images or requests. */
.hf-card-motion{width:100%;height:100%;color:var(--text);overflow:visible}.hf-card-stroke,.hf-card-rule{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:hf-card-write 8s ease-in-out infinite;animation-delay:var(--delay,0s)}.hf-card-rule{stroke-width:1.5;--delay:1.8s}.hf-card-hand{transform-origin:180px 108px;animation:hf-card-settle 8s ease-in-out infinite}.hf-card-type>g{animation:hf-card-tile 8s ease-in-out infinite;animation-delay:calc(var(--tile)*.12s);transform-origin:180px 110px;opacity:0}.hf-card-type rect{fill:var(--bg);stroke:var(--line);stroke-width:1}.hf-card-type text{fill:currentColor;font-family:inherit;font-size:30px;font-weight:500}.hf-card-caption{fill:var(--muted);font-size:12px;font-family:inherit}.hf-card-pen{fill:currentColor;animation:hf-card-pen 8s ease-in-out infinite}
@keyframes hf-card-write{0%,5%{stroke-dashoffset:1}32%,72%{stroke-dashoffset:0}86%,100%{stroke-dashoffset:1}}
@keyframes hf-card-settle{0%,35%{opacity:1;transform:rotate(-6deg)}49%{opacity:1;transform:rotate(0)}57%,90%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:rotate(-6deg)}}
@keyframes hf-card-tile{0%,51%{opacity:0;transform:translateY(12px) scale(.9)}62%,84%{opacity:1;transform:translateY(0) scale(1)}94%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes hf-card-pen{0%{opacity:0;transform:translate(0,0)}5%{opacity:1}16%{transform:translate(44px,31px)}26%{transform:translate(95px,10px)}36%{transform:translate(154px,43px)}45%{opacity:1;transform:translate(203px,64px)}50%,100%{opacity:0;transform:translate(203px,64px)}}