.walk-app { --walk-soft:#eef4f8; --walk-coral:#ed7255; --walk-blue:#d8e8f1; font-family:var(--jp); }
.walk-app button,.walk-app input { font-family:inherit; }
.walk-tabs { display:flex; align-items:center; gap:25px; min-height:53px; border-bottom:1px solid var(--line); margin-bottom:30px; font-size:15px; font-weight:600; }
.walk-tabs a { display:inline-flex; align-items:center; gap:6px; position:relative; padding:12px 0 15px; color:var(--muted); white-space:nowrap; }
.walk-tabs a[aria-current] { color:var(--ink); }
.walk-tabs a[aria-current]::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:3px; background:var(--walk-coral); border-radius:3px; }
.walk-tabs .social-icon { width:14px; height:14px; }
.walk-tabs a:last-child { margin-left:auto; }
.walk-unread { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-left:4px; }
.walk-kicker { font:800 11px/1.5 var(--sans); letter-spacing:.12em; color:#6b8795; margin:0 0 12px; }
.walk-lead { color:var(--muted); font-size:17px; line-height:1.95; margin:20px 0 0; }
.walk-app h1 { font-size:clamp(29px,3vw,39px); line-height:1.65; font-weight:800; letter-spacing:-.05em; margin:0; }
.walk-app h1 em { font-style:normal; color:#d8694d; }
.walk-home-intro { position:relative; padding:9px 0 18px; display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:10px; }
.walk-home-intro h1 > span { text-decoration:underline; text-decoration-color:#ffd5bd; text-decoration-thickness:8px; text-underline-offset:-3px; text-decoration-skip-ink:none; }
.walk-scene { min-height:245px; position:relative; isolation:isolate; overflow:clip; }
.walk-sun { position:absolute; width:180px; height:180px; border-radius:50%; background:#e0ebdf; top:33px; left:calc(50% - 90px); z-index:-2; }
.walk-trail { position:absolute; width:190%; height:220px; left:-45%; top:22px; color:#93afbc; z-index:-1; }
.walk-home-pet { position:absolute; top:72px; left:calc(50% - 43px); display:flex; flex-direction:column; align-items:center; }
.walk-owner { width:86px; height:86px; border:5px solid #fff; box-shadow:0 7px 15px #354f5d0d; font-size:30px; background:#e0eaf0; }
.walk-pet-name { background:#fff; font-size:13px; font-weight:700; border-radius:7px; padding:2px 12px; margin-top:-7px; z-index:1; box-shadow:0 2px 9px #253d4c08; }
.walk-orbit { position:absolute; width:53px; height:53px; border:4px solid #fff; box-shadow:0 4px 10px #253d4c0a; }
.orbit-1 { top:20px; left:8%; transform:rotate(-9deg); }
.orbit-2 { top:35px; right:0; transform:rotate(9deg); }
.orbit-3 { bottom:26px; right:10%; transform:rotate(6deg); }
.walk-mystery { display:flex; justify-content:center; align-items:center; border-radius:50%; background:#f8ebdc; color:#c58c6c; }
.walk-mystery .social-icon { width:24px; height:24px; opacity:.55; }
.walk-mystery > span { position:absolute; right:-4px; top:-6px; font:800 13px var(--sans); color:#9b7359; }
.walk-scene-label { position:absolute; bottom:0; left:0; right:0; text-align:center; color:#79909b; font:700 12px/1.6 var(--sans); }
.walk-letter { background:#fffefa; border:1px solid #deded1; border-radius:20px; margin:22px 0 36px; overflow:hidden; box-shadow:0 13px 32px #42515c05; transform:rotate(-.6deg); }
.walk-letter-top,.walk-letter-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:17px 25px; color:#8a8d7d; font:700 11px/1.7 var(--sans); letter-spacing:.06em; }
.walk-letter-top { border-bottom:1px dashed #dddccc; }
.walk-letter-top span:first-child { display:inline-flex; align-items:center; gap:8px; }
.walk-letter-top .social-icon { width:18px; height:18px; }
.walk-letter-bottom { border-top:1px dashed #dddccc; font-size:10px; }
.walk-letter-content { text-align:center; padding:30px 24px 35px; }
.walk-letter-seal { display:inline-flex; justify-content:center; align-items:center; width:46px; height:46px; background:#f5dac5; color:#b97657; border-radius:50%; margin-bottom:18px; }
.walk-letter-seal .social-icon { width:23px; height:23px; }
.walk-letter h2 { font-size:26px; line-height:1.65; letter-spacing:-.04em; margin:0 0 13px; }
.walk-letter p:not(.walk-kicker) { color:var(--muted); font-size:16px; line-height:1.95; margin:0 0 25px; }
.walk-button { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:54px; padding:14px 25px; background:var(--accent); color:#fff; border:1px solid transparent; border-radius:12px; font:700 16px/1.5 var(--jp); text-align:center; text-decoration:none; cursor:pointer; }
.walk-button:hover:enabled,a.walk-button:hover { background:#d65f43; }
.walk-button .social-icon { width:20px; height:20px; }
.walk-letter .walk-button { min-width:270px; }
.walk-section-head { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:20px; }
.walk-section-head h2 { font-size:24px; line-height:1.5; letter-spacing:-.04em; margin:0; }
.walk-section-head .walk-kicker { margin-bottom:6px; }
.walk-section-head > span { font-size:13px; color:var(--muted); white-space:nowrap; padding-bottom:3px; }
.walk-report { margin-top:25px; scroll-margin-top:12px; }
.walk-encounter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); background:#fff; border:1px solid #dce5e9; border-radius:18px; overflow:hidden; margin-bottom:20px; }
.walk-encounter-photo { position:relative; min-height:310px; background:#e5edf0; }
.walk-portrait { width:100%; height:100%; min-height:310px; border-radius:0; background:#e2edf1; font-size:80px; }
.walk-portrait img { position:absolute; inset:0; }
.walk-visit { position:absolute; left:14px; top:14px; background:#fffffff0; padding:6px 11px; border-radius:7px; font-size:11px; font-weight:600; }
.walk-encounter-copy { padding:24px; min-width:0; }
.walk-encounter-copy > .walk-kicker { font-size:9px; margin-bottom:9px; }
.walk-encounter h2 { font-size:29px; letter-spacing:-.04em; line-height:1.4; margin:0 0 12px; overflow-wrap:anywhere; }
.walk-reason { color:#b65b42; font-size:16px; font-weight:700; line-height:1.8; margin:0 0 13px; overflow-wrap:anywhere; }
.walk-bio { color:var(--muted); font-size:15px; line-height:1.9; margin:0 0 15px; overflow-wrap:anywhere; }
.walk-common { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:15px; }
.walk-common span { background:#f1f6f8; color:#627b88; font-size:11px; padding:4px 8px; border-radius:5px; overflow-wrap:anywhere; }
.walk-profile-link,.walk-text-link { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; background:none; padding:5px 0; }
.walk-profile-link .social-icon,.walk-text-link .social-icon { width:16px; height:16px; }
.walk-encounter-actions { border-top:1px solid #e7eef2; margin-top:17px; padding-top:17px; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.walk-keep { display:flex; justify-content:center; align-items:center; gap:8px; min-height:47px; padding:9px 10px; background:#fff6f0; color:#bd6249; border:1px solid #f4c8b8; border-radius:10px; font-size:13px; font-weight:700; line-height:1.6; }
.walk-keep .social-icon { width:19px; height:19px; }
.walk-keep.is-kept { background:#eaf2e5; border-color:#d6e4c9; color:#557148; }
.walk-keep:hover:enabled { background:#ffece0; }
.walk-hide { align-self:center; background:none; font-size:12px; color:#7e909a; text-decoration:underline; text-underline-offset:4px; padding:5px; }
.walk-mutual { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#ab6349; background:#fff4e8; border-radius:7px; padding:8px 10px; }
.walk-mutual .social-icon { width:17px; height:17px; }
.walk-report-end { text-align:center; font-size:16px; line-height:2; color:#6c8591; padding:25px 10px 20px; }
.walk-report-end > .social-icon { display:block; margin:0 auto 12px; width:26px; height:26px; color:#b2c4cc; }
.walk-report-end span { font-size:13px; }
.walk-keeps { margin:38px 0; }
.walk-keeps .walk-section-head h2 { font-size:22px; }
.walk-keep-list { display:flex; gap:20px; overflow-x:auto; padding:6px 0 13px; scroll-snap-type:x proximity; }
.walk-kept-person { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:92px; max-width:135px; flex-shrink:0; scroll-snap-align:start; background:none; font-size:14px; font-weight:600; text-align:center; }
.walk-kept-person > span:not(.pet-avatar) { overflow-wrap:anywhere; }
.walk-kept-avatar { width:70px; height:70px; border:4px solid #fff; box-shadow:0 0 0 1px #dce6eb; }
.walk-kept-person > small { font-size:10px; color:#b26f51; }
.walk-next { margin:30px 0 18px; padding:23px 0; border-block:1px solid var(--line); }
.walk-next > div { display:flex; gap:16px; align-items:flex-start; }
.walk-next > div > .social-icon { width:28px; height:28px; margin-top:3px; color:#af986e; }
.walk-next strong { font-size:17px; }
.walk-next p { font-size:14px; color:var(--muted); line-height:1.9; margin:7px 0 12px; }
.walk-next > a { margin-left:44px; }
.walk-footnote { font-size:12px; line-height:1.9; color:#7b909a; margin:20px 0; }
.walk-waiting { text-align:center; padding:35px 22px; background:#ffffffb0; border:1px solid #dfe8eb; border-radius:18px; margin-top:25px; }
.walk-envelope-icon { display:inline-flex; padding:17px; background:#e7eee1; border-radius:50%; margin-bottom:18px; color:#6c8a5d; }
.walk-waiting h2 { font-size:23px; margin:0 0 12px; }
.walk-waiting p:not(.walk-kicker) { font-size:16px; line-height:1.95; color:var(--muted); }
.walk-waiting a { margin:6px 10px; }
.walk-welcome { position:relative; }
.walk-welcome > h1 { font-size:clamp(31px,3.3vw,44px); line-height:1.6; }
.walk-welcome > .walk-scene { width:60%; margin:10px auto 25px; min-height:230px; }
.walk-start-panel { background:#fff; border:1px solid var(--line); padding:30px; border-radius:18px; }
.walk-start-panel h2 { font-size:24px; letter-spacing:-.04em; line-height:1.6; margin:0 0 13px; }
.walk-start-panel > p:not(.walk-kicker) { font-size:16px; line-height:1.95; color:var(--muted); }
.walk-start-panel > small { display:block; font-size:12px; color:var(--muted); line-height:1.9; margin-top:17px; }
.walk-consent { display:flex; align-items:flex-start; gap:12px; margin:20px 0; cursor:pointer; }
.walk-consent input { width:20px; height:20px; min-width:20px; margin:4px 0 0; padding:0; accent-color:var(--accent); }
.walk-consent > span { font-size:14px; line-height:1.9; }
.walk-history h1 { font-size:34px; }
.walk-history-list { margin-top:30px; }
.walk-history-row { display:flex; align-items:center; gap:15px; padding:20px 0; border-bottom:1px solid var(--line); }
.walk-history-row > div { flex:1; min-width:0; }
.walk-history-row strong { display:block; font-size:17px; }
.walk-history-row small { color:var(--muted); font-size:13px; }
.walk-history-icon { display:inline-flex; justify-content:center; align-items:center; width:49px; height:56px; background:#fffdf5; border:1px solid #e0dfd0; border-radius:9px; color:#a59c77; transform:rotate(-4deg); }
.walk-new-tag { font:800 10px var(--sans); letter-spacing:.06em; color:#cf6d50; background:#ffeddf; padding:5px 7px; border-radius:5px; }
.walk-note { display:block; color:var(--muted); font-size:12px; line-height:1.9; margin-top:16px; }
.walk-soft-empty { font-size:16px; padding:25px; background:#ffffff8c; border-radius:14px; }
.walk-back { display:inline-flex; font-size:14px; margin:0 0 25px; text-decoration:underline; text-underline-offset:5px; }
.walk-settings { background:#fff; padding:25px; border-radius:16px; margin:25px 0; }
.walk-settings h2 { font-size:22px; margin:0 0 14px; }
.walk-settings h3 { font-size:17px; margin-top:25px; }
.walk-settings p { font-size:15px; line-height:1.95; color:var(--muted); }
.walk-settings > .walk-button { background:#fff; color:var(--ink); border-color:var(--line); }
.walk-hidden-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.walk-hidden-row .walk-button { font-size:12px; background:#edf4f8; color:var(--ink); min-height:42px; padding:9px 12px; }
.walk-pending { padding:40px 0; }
.walk-pending h1 { font-size:32px; line-height:1.7; margin:10px 0 20px; }
.walk-pending p { color:var(--muted); font-size:16px; }
.walk-pending a { display:flex; width:fit-content; margin-top:20px; }
.walk-preview-bar { display:flex; flex-wrap:wrap; gap:7px 15px; padding:11px 15px; margin:0 0 15px; background:#e2ebf2; border:1px solid #cbdce7; border-radius:8px; font-size:11px; line-height:1.8; color:#536e7e; }
.walk-preview-bar a { font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.walk-sample-profile { text-align:center; }
.walk-sample-profile h2 { font-size:29px; margin:20px 0 13px; }
.walk-sample-profile p { font-size:16px; line-height:1.95; }
.walk-sample-avatar { width:150px; height:150px; border-radius:22px; }
.walk-aside-pet { margin-bottom:22px; }
.walk-aside-pet .pet-avatar { width:75px; height:75px; border:5px solid #fff; }
.walk-aside-note { font-size:14px; color:var(--muted); line-height:1.95; }
.sns-nav a .walk-unread { margin-left:auto; }
.walk-inline-settings { font-size:13px; color:var(--muted); margin-top:10px; display:inline-flex; gap:5px; align-items:center; }
.walk-page-tools { display:flex; justify-content:flex-end; margin:0 0 17px; }
.walk-page-tools a { font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.walk-page-tools .social-icon { width:18px; height:18px; }
@media(min-width:1101px) { .social-mode .sns-shell { grid-template-columns:165px minmax(0,720px) 200px; max-width:1290px; gap:35px; } }
@media(min-width:901px) {
  .walk-letter-content { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 22px; text-align:left; padding:25px; }
  .walk-letter-content > .walk-letter-seal { display:none; }
  .walk-letter-content > .walk-kicker { grid-column:1/-1; margin:0; }
  .walk-letter-content > h2 { grid-column:1; grid-row:2; font-size:23px; margin:0; }
  .walk-letter-content > p:not(.walk-kicker) { grid-column:1; grid-row:3; font-size:14px; margin:0; }
  .walk-letter-content > .walk-button { grid-column:2; grid-row:2 / span 2; min-width:255px; padding-inline:16px; }
}
@media(min-width:701px) { .walk-app { min-width:0; } .walk-welcome > .walk-scene { margin-top:-135px; margin-left:50%; width:48%; } .walk-welcome > .walk-lead { max-width:55%; min-height:140px; } }
@media(max-width:900px) and (min-width:701px) { .walk-encounter { grid-template-columns:1fr; } .walk-encounter-photo,.walk-portrait { min-height:280px; max-height:360px; } }
@media(max-width:700px) {
  .social-mode .header { min-height:76px; padding:12px 5%; background:#f6f9fbf5; }
  .social-mode .header .header-login { font-size:13px; }
  .social-mode .sns-shell { padding-top:12px; }
  .sns-nav a { font-size:11px; }
  .sns-nav a .walk-unread { position:absolute; margin:0 0 0 21px; top:2px; }
  .sns-nav .sns-post-link .social-icon { background:var(--accent); color:#fff; border-radius:8px; padding:5px; width:32px; height:32px; margin-top:-5px; margin-bottom:-3px; }
  .walk-tabs { font-size:13px; gap:18px; margin-bottom:22px; min-height:48px; }
  .walk-tabs a { padding-block:12px; }
  .walk-home-intro { grid-template-columns:1.5fr .7fr; padding-top:5px; gap:0; align-items:end; }
  .walk-app h1 { font-size:28px; line-height:1.65; }
  .walk-home-intro .walk-lead { font-size:14px; line-height:1.95; margin-top:14px; }
  .walk-home-intro h1 { font-size:26px; }
  .walk-home-intro .walk-scene { min-height:235px; margin-left:0; align-self:center; }
  .walk-sun { width:125px; height:125px; top:60px; left:calc(50% - 62px); }
  .walk-trail { height:210px; top:35px; width:210%; left:-60%; }
  .walk-owner { width:70px; height:70px; border-width:4px; font-size:25px; }
  .walk-home-pet { top:90px; left:calc(50% - 35px); }
  .walk-pet-name { font-size:11px; padding:2px 8px; max-width:100px; overflow-wrap:anywhere; }
  .walk-orbit { width:43px; height:43px; border-width:3px; }
  .orbit-1 { top:33px; left:2%; }
  .orbit-2 { top:54px; right:0; }
  .orbit-3 { bottom:37px; right:8%; }
  .walk-scene-label { font-size:9px; bottom:10px; }
  .walk-home-intro .walk-scene-label { display:none; }
  .walk-letter { margin-top:15px; border-radius:16px; }
  .walk-letter-content { padding:25px 17px 28px; }
  .walk-letter-content > .walk-letter-seal,.walk-letter-content > .walk-kicker,.walk-letter-content > p:not(.walk-kicker) { display:none; }
  .walk-letter-top,.walk-letter-bottom { padding:14px 18px; font-size:10px; }
  .walk-letter-bottom { font-size:9px; }
  .walk-letter h2 { font-size:24px; }
  .walk-letter p:not(.walk-kicker) { font-size:15px; }
  .walk-letter .walk-button { min-width:0; width:100%; }
  .walk-kicker { font-size:10px; }
  .walk-section-head h2 { font-size:22px; }
  .walk-section-head { flex-direction:column; align-items:flex-start; gap:6px; }
  .walk-section-head > span { font-size:11px; }
  .walk-encounter { grid-template-columns:1fr; border-radius:16px; margin-bottom:25px; }
  .walk-encounter-photo { min-height:0; aspect-ratio:1.14; }
  .walk-portrait { min-height:0; height:100%; position:absolute; inset:0; font-size:70px; }
  .walk-encounter-copy { padding:24px; }
  .walk-encounter-copy > .walk-kicker { font-size:10px; }
  .walk-encounter h2 { font-size:28px; }
  .walk-bio { font-size:16px; }
  .walk-reason { font-size:17px; }
  .walk-common span { font-size:12px; }
  .walk-keep { min-height:51px; font-size:15px; }
  .walk-hide { font-size:13px; }
  .walk-keeps .walk-section-head h2 { font-size:21px; }
  .walk-next strong { font-size:16px; }
  .walk-next p { font-size:13px; }
  .walk-welcome > h1 { font-size:32px; }
  .walk-welcome > .walk-lead { font-size:16px; }
  .walk-welcome > .walk-scene { width:80%; min-height:220px; margin-top:0; }
  .walk-welcome > .walk-scene .walk-owner { width:80px; height:80px; }
  .walk-start-panel { padding:25px 22px; }
  .walk-start-panel h2 { font-size:22px; }
  .walk-start-panel .walk-button { width:100%; padding-inline:12px; }
  .walk-consent > span { font-size:14px; }
  .walk-footnote { font-size:11px; }
  .walk-waiting { padding:30px 18px; }
  .walk-waiting h2 { font-size:21px; }
  .walk-waiting p:not(.walk-kicker) { font-size:15px; }
  .walk-history h1 { font-size:30px; }
  .walk-history-row strong { font-size:16px; }
  .walk-settings { padding:22px; }
  .walk-hidden-row { flex-wrap:wrap; }
  .walk-preview-bar { font-size:10px; padding:10px 12px; }
}
@media(max-width:360px) { .walk-app h1 { font-size:25px; } .walk-home-intro { grid-template-columns:minmax(0,1fr) 80px; } .walk-home-intro h1 { font-size:22px; } .walk-tabs { gap:13px; font-size:12px; } .walk-home-intro .walk-lead { font-size:13px; } .walk-section-head { flex-wrap:wrap; gap:7px; } }
@media(prefers-reduced-motion:reduce) { .walk-letter,.walk-orbit,.walk-history-icon { transform:none; } }