:root{
  --bg:#fffaf5;
  --paper:#fff;
  --ink:#3f393b;
  --muted:#80787d;
  --pink:#ec8fa5;
  --pink-dark:#cf6680;
  --pink-soft:#ffe5e9;
  --mint:#d6ebd9;
  --green:#528b6b;
  --lilac:#f0e8fb;
  --border:#eee3e2;
  --shadow:0 16px 45px rgba(92,69,64,.09);
  --radius:24px;
  --font:ui-rounded,"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif
}

*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  line-height:1.72;
  overflow-x:hidden
}
button,input{
  font:inherit
}
button{
  cursor:pointer
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid #84aee9;
  outline-offset:3px
}
button:disabled{
  cursor:not-allowed
}
a{
  color:inherit
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2,h3{
  line-height:1.45
}
.ambient{
  position:fixed;
  z-index:-1;
  pointer-events:none;
  filter:blur(18px);
  border-radius:50%
}
.ambient-one{
  width:380px;
  height:380px;
  top:60px;
  right:-180px;
  background:#ffeef2
}
.ambient-two{
  width:400px;
  height:400px;
  bottom:-160px;
  left:-180px;
  background:#edf5e7
}
body.modal-open{
  overflow:hidden
}

.site-header{
  height:84px;
  position:relative;
  z-index:15;
  background:#fffdfaf5;
  border-bottom:1px solid #f1e8e3;
  backdrop-filter:blur(12px)
}
.header-inner{
  max-width:1320px;
  margin:auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  gap:16px
}
.brand{
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  min-width:0
}
.brand-mark{
  display:grid;
  place-items:center;
  background:#ffebed;
  box-shadow:inset 0 -4px 0 #f8d1d9;
  border-radius:16px;
  min-width:46px;
  height:46px;
  font-size:26px
}
.brand-name{
  font-size:20px;
  letter-spacing:-.9px;
  font-weight:900;
  line-height:1.35;
  white-space:nowrap
}
.brand-name span{
  color:#d87790
}
.brand-name small{
  display:block;
  color:#a7a09d;
  letter-spacing:2px;
  font-size:9px;
  font-weight:800;
  margin-top:2px
}
.header-actions{
  display:flex;
  align-items:center;
  gap:12px
}
.header-cap{
  display:flex;
  gap:4px;
  align-items:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  color:#a7837e;
  background:#fff3ef;
  border:1px solid #f7e6de;
  border-radius:30px;
  padding:8px 13px
}
.header-cap strong{
  color:var(--pink-dark);
  font-size:14px
}
.button{
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:11px 17px;
  border-radius:14px;
  font-weight:800;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease
}
.button:active{
  transform:scale(.97)
}
.button-primary{
  background:var(--pink);
  color:#fff;
  box-shadow:0 4px 0 #d36a84
}
.button-primary:hover{
  background:#df7991
}
.button-soft{
  background:#fff2ec;
  color:#a8736a
}
.button-outline{
  color:#b55a74;
  background:#fff;
  border:2px solid #efd1d9
}
.button-outline:hover{
  background:#fff0f5
}
.button-filter{
  background:#fff;
  border:1px solid #efdee1;
  box-shadow:0 3px 14px #6b4f5110;
  color:#9e6677;
  display:none
}
.button-filter .dot{
  width:7px;
  height:7px;
  background:#f17a9a;
  border-radius:50%
}

.app-shell{
  max-width:1320px;
  margin:0 auto;
  padding:26px 30px 0;
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  align-items:start;
  gap:30px
}
.filter-panel{
  background:white;
  border:1px solid var(--border);
  border-radius:26px;
  box-shadow:var(--shadow);
  min-width:0;
  position:sticky;
  top:18px;
  overflow:hidden;
  max-height:calc(100vh - 32px);
  display:flex;
  flex-direction:column;
  z-index:11
}
.filter-head{
  padding:24px 23px 16px;
  border-bottom:1px solid #f1e8e8;
  display:flex;
  justify-content:space-between;
  align-items:flex-start
}
.eyebrow{
  display:block;
  font-size:10px;
  font-weight:1000;
  letter-spacing:2.5px;
  color:#d58aa0;
  margin-bottom:4px
}
.filter-head h2{
  font-size:20px;
  margin:0 0 4px
}
.filter-head p{
  font-size:11px;
  color:#978f90;
  margin:0
}
.filter-scroll{
  overflow:auto;
  overscroll-behavior:contain;
  padding:0 23px 18px;
  scrollbar-width:thin;
  flex:1;
  min-height:0
}
.filter-block{
  padding:20px 0 18px;
  border-bottom:1px dashed #efe5e2
}
.filter-title{
  display:block;
  font-weight:900;
  font-size:13px;
  margin:0 0 12px
}
.filter-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.filter-help{
  margin:11px 0 0;
  color:#9b9193;
  font-size:10.5px;
  line-height:1.65
}
.search-field{
  display:flex;
  gap:8px;
  align-items:center;
  padding:0 12px;
  background:#faf7f6;
  border:1px solid #eadedd;
  border-radius:13px;
  height:44px
}
.search-field span{
  font-size:25px;
  color:#bba4a2
}
.search-field input{
  border:0;
  outline:0;
  min-width:0;
  width:100%;
  background:transparent;
  color:#4e4243;
  font-size:13px
}
.search-field:focus-within{
  outline:2px solid #f0c6d0
}
.mini-search{
  width:100%;
  height:38px;
  border:1px solid #f0e4e2;
  background:#fffbf8;
  padding:0 12px;
  border-radius:12px;
  outline:0;
  margin-bottom:9px
}
.mini-search:focus{
  border-color:#e79caf
}
.chip-grid{
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.chip{
  border:1px solid #e9e0de;
  background:#fff;
  color:#746e72;
  border-radius:13px;
  padding:6px 11px;
  font-size:11.5px;
  font-weight:750;
  min-height:32px;
  transition:background .15s,border .15s,color .15s
}
.chip:hover{
  background:#fff4f4
}
.chip[aria-pressed="true"]{
  background:#fff0f2;
  border-color:#e799ad;
  color:#bb5976;
  box-shadow:inset 0 0 0 1px #efadc0
}
.chip.negative[aria-pressed="true"]{
  background:#fff4ed;
  border-color:#e4b190;
  color:#9e5b37
}
.chip-tick{
  margin-right:3px;
  color:#bd7a8b
}
.micro-badge{
  background:#fef1f3;
  color:#b66c81;
  padding:2px 8px;
  border-radius:12px;
  font-size:10px;
  font-weight:800
}
.mode-box{
  display:flex;
  background:#faf7f6;
  border-radius:12px;
  margin-top:14px;
  padding:4px;
  gap:3px
}
.mode-box label{
  flex:1;
  cursor:pointer;
  text-align:center;
  font-size:11px;
  font-weight:900;
  color:#8f8584;
  border-radius:9px;
  padding:7px 4px
}
.mode-box input{
  accent-color:#d77691;
  vertical-align:middle;
  transform:scale(.9)
}
.mode-box label:has(input:checked){
  background:#fff;
  box-shadow:0 2px 8px #5d3d3212;
  color:#b35c77
}
.filter-more{
  border-bottom:1px dashed #eee2e0
}
.filter-more summary{
  display:flex;
  justify-content:space-between;
  gap:8px;
  list-style:none;
  cursor:pointer;
  padding:18px 0;
  font-size:12px;
  font-weight:900
}
.filter-more summary::-webkit-details-marker{
  display:none
}
.filter-more summary:before{
  content:'+';
  margin-right:5px;
  color:#d27b94
}
.filter-more[open] summary:before{
  content:'−'
}
.filter-more summary span{
  margin-left:auto;
  color:#b8878d
}
.detail-pad{
  padding:0 0 20px
}
.filter-bottom{
  border-top:1px solid #f2e6e6;
  padding:16px 20px 22px;
  background:#fff
}
.filter-tally{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#7a7776;
  font-weight:800;
  font-size:11px;
  margin-bottom:11px
}
.filter-tally strong{
  font-size:25px;
  color:#d4748e;
  font-variant-numeric:tabular-nums
}
.filter-tally small{
  font-size:12px;
  color:#aea5a1
}
.filter-actions{
  display:flex;
  gap:8px
}
.filter-actions>.button-soft{
  width:90px;
  white-space:nowrap;
  padding:10px 7px
}
.filter-actions>.button-primary{
  flex:1;
  font-size:12px
}
.close-filters{
  display:none
}
.filter-backdrop[hidden]{
  display:none
}

.main-area{
  min-width:0
}
.intro{
  background:linear-gradient(122deg,#ffedef 0%,#fff2e6 67%,#fff7ec);
  border:1px solid #f8e4e4;
  border-radius:30px;
  position:relative;
  overflow:hidden;
  padding:32px 34px 25px;
  box-shadow:0 12px 40px #e6b3ad15
}
.intro:after{
  content:'';
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  border:40px solid #fff9f477;
  right:-120px;
  bottom:-180px
}
.intro-sticker{
  display:inline-block;
  color:#bd6681;
  font-size:11px;
  background:#fff;
  border:1px solid #f4d1d8;
  border-radius:100px;
  font-weight:900;
  padding:6px 12px;
  margin-bottom:12px;
  box-shadow:0 3px 0 #edcbd3
}
.intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 185px;
  align-items:center
}
.intro h1{
  font-size:clamp(26px,3vw,38px);
  letter-spacing:-1.5px;
  line-height:1.45;
  margin:0 0 13px;
  font-weight:950
}
.intro h1 em{
  font-style:normal;
  color:#d6718d;
  position:relative
}
.sparkle{
  display:inline-block;
  color:#e6ae72;
  font-size:24px;
  vertical-align:top;
  margin-left:5px
}
.intro p{
  color:#817780;
  font-size:13px;
  line-height:1.95;
  margin-bottom:14px;
  font-weight:650
}
.intro-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.intro-tags span{
  background:#fff9fb;
  color:#94727d;
  font-size:10px;
  padding:5px 9px;
  border-radius:20px;
  font-weight:900
}
.intro-art{
  height:182px;
  position:relative
}
.intro-disc{
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:50%;
  box-shadow:inset 0 -9px 0 #0000000c,0 10px 20px #cbaea642;
  border:6px solid #fff9fa;
  font-size:45px
}
.disc-a{
  width:109px;
  height:109px;
  background:#cfe7d9;
  top:13px;
  left:18px;
  transform:rotate(-18deg)
}
.disc-b{
  width:86px;
  height:86px;
  background:#f5d5dd;
  top:66px;
  left:92px;
  transform:rotate(12deg)
}
.disc-c{
  width:77px;
  height:77px;
  background:#ece2f8;
  top:103px;
  left:0;
  transform:rotate(-10deg)
}
.intro-art>span{
  position:absolute;
  color:#eeac87;
  font-size:29px;
  right:20px;
  top:2px
}

.view-tabs{
  display:flex;
  gap:9px;
  padding:20px 1px 16px;
  overflow:auto;
  scrollbar-width:none
}
.view-tabs::-webkit-scrollbar{
  display:none
}
.tab{
  border:1px solid #f0e3e5;
  background:white;
  white-space:nowrap;
  color:#92838a;
  padding:10px 17px;
  border-radius:14px;
  font-size:12px;
  font-weight:900;
  transition:.16s
}
.tab:hover{
  background:#fff1f3
}
.tab.is-active{
  background:#df8199;
  color:white;
  border-color:#df8199;
  box-shadow:0 4px 0 #e4b1bf
}
.tab small{
  font-size:10px;
  opacity:.8
}
.main-content{
  background:white;
  border:1px solid #f1e7e2;
  border-radius:25px;
  box-shadow:var(--shadow);
  padding:22px 24px 25px;
  min-width:0
}
.main-content[hidden]{
  display:none!important
}
.condition-summary{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  background:#fdf9f7;
  border:1px dashed #f0dfdc;
  border-radius:16px;
  padding:11px 13px;
  margin-bottom:20px
}
.small-label{
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  color:#9c8187
}
.summary-tags{
  display:flex;
  align-items:center;
  flex:1;
  gap:5px;
  flex-wrap:wrap
}
.summary-chip{
  background:#fff;
  color:#a77984;
  border:1px solid #f2e1e1;
  border-radius:13px;
  font-size:10px;
  font-weight:800;
  padding:4px 8px
}
.subtle-link{
  font-size:10px;
  font-weight:800;
  color:#b97688;
  border:0;
  background:transparent;
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap
}
.gacha-panel{
  background:radial-gradient(circle at 88% 5%,#fff9ec 0,#fff6f4 28%,#fff9f9 70%);
  border:1px solid #f6e2e2;
  border-radius:24px;
  overflow:hidden;
  text-align:center;
  position:relative
}
.gacha-title{
  text-align:left;
  padding:22px 22px 0;
  display:flex;
  justify-content:space-between;
  gap:8px
}
.gacha-title h2{
  font-size:22px;
  margin:0 0 3px;
  letter-spacing:-.7px
}
.gacha-title p{
  font-size:11px;
  color:#928587;
  margin:0
}
.lucky-symbol{
  font-size:34px;
  color:#efbdca
}
.machine-area{
  height:330px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}
.machine{
  width:238px;
  height:309px;
  position:relative;
  transform:translateY(8px);
  transform-origin:center bottom;
  filter:drop-shadow(0 12px 11px #dfacb94b)
}
.machine-dome{
  position:absolute;
  width:216px;
  height:178px;
  left:11px;
  top:0;
  background:linear-gradient(132deg,#ffffffdd,#f5fcf9c9);
  border:10px solid #e89ba9;
  border-radius:115px 115px 42px 42px;
  overflow:hidden;
  box-shadow:inset 0 -10px 0 #edc8c3a3
}
.dome-shine{
  width:56px;
  height:130px;
  position:absolute;
  left:24px;
  top:10px;
  border-radius:70% 30% 60% 50%;
  transform:rotate(27deg);
  background:#ffffff99
}
.capsule{
  position:absolute;
  width:61px;
  height:61px;
  border-radius:50%;
  border:4px solid #fff;
  box-shadow:inset 0 -7px 0 #00000010,0 3px 6px #ac8d9a29;
  display:block
}
.capsule:after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:29px;
  height:4px;
  background:#fff9
}
.c1{
  background:#ffd4a8;
  bottom:-2px;
  left:14px;
  transform:rotate(-15deg)
}
.c2{
  background:#c9e6d2;
  bottom:18px;
  left:63px;
  transform:rotate(30deg)
}
.c3{
  background:#f3c5da;
  bottom:-8px;
  right:15px;
  transform:rotate(60deg)
}
.c4{
  background:#e0d5f6;
  bottom:66px;
  right:28px;
  transform:rotate(25deg)
}
.c5{
  background:#f7db93;
  top:37px;
  left:38px;
  transform:rotate(-18deg)
}
.c6{
  background:#bee7e0;
  top:26px;
  right:39px;
  transform:rotate(28deg)
}
.c7{
  background:#ffd4e1;
  bottom:37px;
  left:3px
}
.machine-middle{
  background:linear-gradient(90deg,#ee96a8,#e681a1 48%,#ef9fb5);
  height:118px;
  width:222px;
  position:absolute;
  top:165px;
  left:8px;
  border-radius:10px 10px 12px 12px;
  border:7px solid #de7d97;
  box-shadow:inset 0 5px #f5b9c7,0 8px #b96c81;
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:10px
}
.machine-brand{
  border-radius:12px;
  background:#fff6e7;
  box-shadow:inset 0 -4px #f8dec2;
  width:78px;
  min-height:76px;
  display:grid;
  place-items:center;
  line-height:1.5;
  font-size:14px;
  color:#c07789;
  font-weight:950;
  transform:rotate(-3deg)
}
.machine-dial{
  width:61px;
  height:61px;
  background:#fff1ef;
  border:7px solid #f7cfda;
  border-radius:50%;
  position:relative;
  box-shadow:0 4px #b86d83
}
.machine-dial span{
  width:53px;
  height:14px;
  border-radius:10px;
  background:#cc7891;
  position:absolute;
  top:17px;
  left:-3px;
  box-shadow:0 3px #a95d75;
  transform:rotate(-36deg)
}
.machine-slot{
  width:40px;
  height:34px;
  background:#b96885;
  border-radius:9px;
  position:absolute;
  bottom:6px;
  right:31px;
  border:4px solid #f3c6d0
}
.machine-slot span{
  display:block;
  margin:8px auto;
  background:#fff0f2;
  border-radius:7px 7px 0 0;
  width:23px;
  height:16px
}
.machine-stand{
  position:absolute;
  bottom:12px;
  width:188px;
  height:18px;
  border-radius:7px;
  background:#dc809b;
  left:25px;
  box-shadow:0 6px #bb6884
}
.machine-feet{
  position:absolute;
  bottom:0;
  left:39px;
  width:158px;
  height:14px;
  border-radius:5px;
  background:#b7718b
}
.side-sparkle{
  position:absolute;
  pointer-events:none
}
.side-sparkle-a{
  font-size:38px;
  color:#eec3d1;
  left:20%;
  top:28%
}
.side-sparkle-b{
  font-size:26px;
  color:#ddc6a7;
  right:22%;
  bottom:22%
}
.machine.is-spinning{
  animation:wobble .55s linear 2
}
.machine.is-spinning .machine-dial span{
  animation:spinhandle .4s linear infinite
}
.machine.is-spinning .capsule{
  animation:jump .3s ease-in-out infinite alternate
}
.gacha-bottom{
  max-width:390px;
  margin:auto;
  padding:0 17px 23px
}
.match-number{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:900;
  color:#8f7c81;
  margin-bottom:10px
}
.match-number strong{
  font-size:26px;
  color:#d6708b;
  line-height:1
}
.match-number small{
  font-size:11px;
  margin-left:3px
}
.draw-button{
  width:100%;
  border:0;
  background:linear-gradient(120deg,#f294a5,#e37891);
  color:#fff;
  border-radius:18px;
  padding:11px 24px 12px;
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:center;
  box-shadow:0 7px 0 #c96984,0 12px 20px #e3b0bc48;
  transition:transform .18s,box-shadow .18s;
  touch-action:manipulation
}
.draw-button>span{
  font-weight:950;
  font-size:21px;
  letter-spacing:.4px
}
.draw-button>small{
  font-size:10px;
  letter-spacing:.3px;
  opacity:.95
}
.draw-button:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 9px 0 #c96984,0 15px 18px #e3b0bc58
}
.draw-button:active:not(:disabled){
  transform:translateY(5px);
  box-shadow:0 2px 0 #c96984
}
.draw-button:disabled{
  opacity:.55
}
.draw-progress{
  font-size:10px;
  color:#a18d92;
  margin:14px 0 0
}
.drawn-section{
  text-align:center;
  margin-top:26px;
  animation:showup .45s ease
}
.drawn-section[hidden]{
  display:none
}
.winner-label{
  display:inline-block;
  color:#b86579;
  border:1px solid #f6d9dc;
  background:#fff0f3;
  font-size:12px;
  letter-spacing:1px;
  font-weight:950;
  padding:8px 17px;
  border-radius:20px;
  margin-bottom:14px
}
.drawn-section #redrawButton{
  margin-top:17px
}
.empty-state{
  background:#fff7ed;
  border:1px dashed #efdbc3;
  border-radius:19px;
  padding:22px;
  text-align:center;
  margin:18px 0
}
.empty-state[hidden]{
  display:none
}
.empty-state h3{
  margin:0 0 5px
}
.empty-state p{
  margin:0 0 13px;
  color:#8e7d78;
  font-size:12px
}
.relax-option{
  display:block;
  background:white;
  border:1px solid #ecd4bd;
  color:#9a6c57;
  font-size:12px;
  font-weight:850;
  border-radius:12px;
  padding:10px;
  margin:7px auto;
  width:100%;
  max-width:420px;
  text-align:left
}
.hint-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:18px 5px 0;
  color:#a69a98;
  font-size:11px
}
.hint-row span{
  font-size:18px
}
.hint-row p{
  margin:0
}
.hint-row strong{
  color:#c6768a
}

.recipe-card{
  background:white;
  border:1px solid #f2dfdf;
  border-radius:19px;
  padding:16px 17px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  box-shadow:0 5px 17px #e9a4b113;
  position:relative;
  transition:transform .18s,box-shadow .18s
}
.recipe-card:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 21px #e9a4b12a
}
.recipe-card .recipe-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.recipe-number{
  font-size:10px;
  font-weight:950;
  color:#cb8193;
  letter-spacing:1px
}
.recipe-emoji{
  font-size:31px;
  background:#f5f4ed;
  width:61px;
  height:61px;
  border-radius:19px;
  display:grid;
  place-items:center;
  margin:7px 0 3px
}
.recipe-card h3{
  margin:0;
  color:#564448;
  font-size:16px;
  line-height:1.65;
  word-break:break-word
}
.recipe-card .meta{
  color:#9d8d8e;
  font-size:11px
}
.recipe-card .labels{
  display:flex;
  gap:5px;
  flex-wrap:wrap
}
.recipe-card .labels span{
  background:#f8f3ef;
  border-radius:8px;
  font-size:10px;
  font-weight:900;
  color:#9e8486;
  padding:3px 6px
}
.card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
  gap:10px
}
.read-recipe{
  background:#ffe9ed;
  color:#b45c73;
  border:0;
  border-radius:12px;
  font-size:12px;
  font-weight:900;
  padding:9px 13px;
  flex:1
}
.save-heart{
  display:grid;
  place-items:center;
  border:1px solid #f1dfe2;
  background:white;
  color:#b6a8a8;
  border-radius:12px;
  width:39px;
  height:39px;
  font-size:21px
}
.save-heart.is-saved{
  color:#ec7e9b;
  border-color:#efb9c9;
  background:#fff2f5
}
.recipe-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px
}
.recipe-card.drawn{
  width:100%;
  max-width:430px;
  margin:auto;
  text-align:left;
  border:2px solid #f2b2c3;
  box-shadow:0 14px 35px #edc5d2a3;
  padding:20px 21px
}
.recipe-card.drawn h3{
  font-size:21px
}
.recipe-card.drawn .recipe-emoji{
  font-size:41px;
  width:80px;
  height:80px
}
.recipe-card.drawn .read-recipe{
  font-size:14px
}
.section-heading{
  margin:0 0 23px
}
.section-heading h2{
  font-size:25px;
  margin:0 0 3px
}
.section-heading p{
  font-size:12px;
  color:#9b8d90;
  margin:0
}
.list-meta{
  margin:0 0 13px;
  font-size:12px;
  color:#a07885;
  font-weight:900
}
.load-more{
  margin:25px auto 0;
  background:#fff4f6;
  border:1px solid #ebc4d0;
  color:#b76c80;
  padding:12px 32px;
  border-radius:14px;
  font-weight:900;
  display:block
}
.load-more[hidden]{
  display:none
}
.empty-list{
  text-align:center;
  grid-column:1/-1;
  padding:40px 15px;
  color:#a49698;
  border:1px dashed #ecdfe0;
  border-radius:16px
}
.empty-list .empticon{
  font-size:35px;
  display:block;
  margin-bottom:9px
}
.history-heading{
  margin:27px 0 14px;
  font-size:15px
}
.history-heading:first-of-type{
  margin-top:4px
}
.danger-button{
  margin:22px 0 0;
  font-size:11px
}

.safety-note{
  background:#fff;
  border:1px solid #f0e3e4;
  border-radius:18px;
  margin:20px 0 0;
  overflow:hidden
}
.safety-note summary{
  list-style:none;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  padding:17px 20px;
  display:flex;
  justify-content:space-between;
  gap:10px
}
.safety-note summary::-webkit-details-marker{
  display:none
}
.safety-note summary span{
  font-size:10px;
  color:#c78e9a
}
.safety-details{
  padding:0 20px 18px;
  color:#857980;
  font-size:12px
}
.safety-details ul{
  padding-left:21px
}
.safety-details li{
  margin-bottom:6px
}
.safety-details a{
  color:#c17a8d
}
.safety-sources{
  font-size:10px;
  margin-bottom:0
}
.footer{
  text-align:center;
  padding:28px 10px 50px;
  color:#b1a3a3;
  font-size:11px
}
.footer-heart{
  font-size:22px;
  color:#e4a7b8
}
.footer p{
  font-weight:900;
  color:#9d8a8c;
  margin:0 0 5px
}
.footer small{
  display:block
}
.footer>span{
  display:block;
  font-size:10px;
  margin-top:8px;
  line-height:1.7
}

.recipe-modal{
  border:none;
  padding:0;
  border-radius:25px;
  width:min(600px,calc(100vw - 24px));
  max-height:min(90vh,950px);
  box-shadow:0 26px 95px #39282a61;
  overscroll-behavior:contain;
  color:var(--ink)
}
.recipe-modal::backdrop{
  background:#35272fb0;
  backdrop-filter:blur(3px)
}
.modal-content{
  max-height:min(90vh,950px);
  overflow:auto;
  scrollbar-width:thin;
  padding:0 0 25px
}
.modal-toolbar{
  position:sticky;
  top:0;
  background:#fff;
  z-index:3;
  padding:17px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #f3e8e8
}
.modal-kicker{
  font-size:10px;
  color:#c17e93;
  font-weight:1000;
  letter-spacing:2px
}
.modal-close,.icon-button{
  border:0;
  background:#fff0f3;
  color:#af6980;
  border-radius:50%;
  font-size:24px;
  line-height:1;
  min-width:37px;
  height:37px;
  display:grid;
  place-items:center
}
.modal-body{
  padding:23px 24px 0
}
.modal-emoji{
  width:84px;
  height:84px;
  border-radius:27px;
  display:grid;
  place-items:center;
  background:#ffeced;
  font-size:45px;
  margin-bottom:10px
}
.modal-number{
  color:#ba778b;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px
}
.modal-title{
  font-size:clamp(19px,4.5vw,25px);
  margin:7px 0 12px
}
.modal-metas{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:18px
}
.modal-metas span{
  background:#fbf5f2;
  color:#967c81;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
  border-radius:10px
}
.modal-section{
  padding:19px 0;
  border-top:1px dashed #eddede
}
.modal-section h3{
  font-size:17px;
  margin:0 0 14px
}
.ingredient-row{
  display:flex;
  align-items:center;
  gap:11px;
  padding:7px 0;
  border-bottom:1px solid #f5efed;
  font-size:13px;
  cursor:pointer
}
.ingredient-row:last-child{
  border-bottom:none
}
.ingredient-row input{
  accent-color:#dd8199;
  width:16px;
  height:16px
}
.ingredient-row:has(input:checked) span{
  text-decoration:line-through;
  color:#b6a8a5
}
.steps-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px
}
.steps-list li{
  display:flex;
  gap:10px;
  align-items:flex-start
}
.step-number{
  background:#fde5ea;
  color:#c46b85;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:950;
  border-radius:10px;
  width:29px;
  height:29px;
  flex:0 0 29px
}
.step-text{
  font-size:13px;
  line-height:1.9;
  padding-top:2px
}
.tip-box{
  background:#fff8ed;
  border:1px solid #f6e8d6;
  border-radius:15px;
  padding:15px 16px;
  color:#8d736d;
  font-size:12px
}
.tip-box strong{
  display:block;
  color:#a77a68;
  margin-bottom:6px
}
.tip-box p{
  margin:0
}
.modal-warning{
  font-size:11px;
  color:#aa8b82;
  background:#fef9f5;
  padding:12px;
  border-radius:12px;
  margin-top:14px
}
.modal-actions{
  display:flex;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap
}
.modal-actions button{
  flex:1;
  min-width:112px
}
.toast{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translate(-50%,20px);
  background:#4d4246;
  color:#fff;
  box-shadow:0 6px 18px #44333330;
  border-radius:14px;
  padding:11px 19px;
  font-size:12px;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  z-index:150;
  transition:.2s
}
.toast.shown{
  opacity:1;
  transform:translate(-50%,0)
}

@keyframes wobble{
  0%,100%{
    transform:translateY(8px) rotate(0)
  }
  25%{
    transform:translateY(6px) rotate(4deg)
  }
  75%{
    transform:translateY(6px) rotate(-4deg)
  }

}
@keyframes spinhandle{
  to{
    transform:rotate(324deg)
  }

}
@keyframes jump{
  to{
    transform:translateY(-13px) rotate(24deg)
  }

}
@keyframes showup{
  from{
    opacity:0;
    transform:translateY(14px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }

}

@media(min-width:1050px){
  .intro{
    padding-right:45px
  }
  .intro-grid{
    grid-template-columns:minmax(0,1fr) 200px
  }

}

@media(max-width:1080px){
  .app-shell{
    grid-template-columns:290px minmax(0,1fr);
    gap:18px;
    padding:20px 20px 0
  }
  .header-inner{
    padding:0 20px
  }
  .intro{
    padding:25px
  }
  .intro-grid{
    grid-template-columns:minmax(0,1fr) 145px
  }
  .intro-art{
    transform:scale(.85);
    transform-origin:center left
  }
  .filter-scroll{
    padding:0 16px 18px
  }
  .filter-head{
    padding:21px 17px 14px
  }
  .filter-bottom{
    padding:14px 16px 19px
  }

}

@media(max-width:820px){
  .app-shell{
    display:block;
    padding:16px 16px 0
  }
  .header-inner{
    padding:0 16px
  }
  .button-filter{
    display:inline-flex
  }
  .filter-panel{
    position:fixed;
    z-index:101;
    right:0;
    top:0;
    bottom:0;
    width:min(420px,100vw);
    max-height:none;
    border-radius:24px 0 0 24px;
    transform:translateX(105%);
    visibility:hidden;
    transition:transform .24s ease,visibility .24s;
    box-shadow:-20px 0 50px #34252d31
  }
  .filters-open .filter-panel{
    transform:translateX(0);
    visibility:visible
  }
  .filters-open .filter-backdrop{
    display:block!important;
    position:fixed;
    inset:0;
    z-index:100;
    background:#40303675
  }
  .filters-open{
    overflow:hidden
  }
  .filter-head{
    padding:22px 22px 14px
  }
  .filter-scroll{
    padding:0 22px 20px
  }
  .close-filters{
    display:grid
  }
  .filter-bottom{
    padding:16px 22px 24px
  }
  .intro-grid{
    grid-template-columns:minmax(0,1fr) 180px
  }
  .intro-art{
    transform:none
  }
  .view-tabs{
    padding-top:16px
  }

}

@media(max-width:580px){
  .site-header{
    height:69px
  }
  .brand-mark{
    min-width:41px;
    height:41px;
    border-radius:13px;
    font-size:23px
  }
  .brand-name{
    font-size:16px;
    letter-spacing:-.5px
  }
  .brand-name small{
    font-size:7px;
    letter-spacing:1.6px
  }
  .header-cap{
    display:none
  }
  .button-filter{
    font-size:12px;
    padding:10px 12px
  }
  .app-shell{
    padding:11px 11px 0
  }
  .intro{
    padding:20px 19px;
    border-radius:22px
  }
  .intro-sticker{
    font-size:10px;
    padding:4px 10px;
    margin-bottom:11px
  }
  .intro-grid{
    grid-template-columns:minmax(0,1fr) 91px;
    align-items:start
  }
  .intro h1{
    font-size:clamp(23px,6vw,29px);
    letter-spacing:-1px
  }
  .intro p{
    font-size:11px;
    line-height:1.8
  }
  .intro-art{
    height:118px;
    transform:scale(.55);
    transform-origin:top left
  }
  .intro-tags span{
    font-size:9px;
    padding:4px 6px
  }
  .view-tabs{
    gap:6px
  }
  .tab{
    padding:9px 12px;
    font-size:11px
  }
  .main-content{
    padding:14px 13px 17px;
    border-radius:20px
  }
  .condition-summary{
    padding:9px;
    margin-bottom:15px
  }
  .gacha-title{
    padding:17px 15px 0
  }
  .gacha-title h2{
    font-size:18px
  }
  .gacha-title p{
    font-size:10px
  }
  .machine-area{
    height:319px
  }
  .machine{
    transform:translateY(-5px) scale(.85)
  }
  .machine.is-spinning{
    animation:wobblemobile .55s linear 2
  }
  .side-sparkle-a{
    left:7%
  }
  .side-sparkle-b{
    right:10%
  }
  .gacha-bottom{
    padding-bottom:22px
  }
  .recipe-grid{
    grid-template-columns:1fr
  }
  .section-heading h2{
    font-size:21px
  }
  .recipe-card.drawn{
    padding:17px 16px
  }
  .recipe-card.drawn h3{
    font-size:18px
  }
  .modal-body{
    padding:17px 17px 0
  }
  .modal-toolbar{
    padding:12px 16px
  }
  .modal-content{
    max-height:91vh
  }
  .recipe-modal{
    max-height:91vh
  }
  .filter-panel{
    width:min(390px,100vw)
  }

}

@media(max-width:360px){
  .brand-name{
    font-size:14px
  }
  .brand-name small{
    font-size:6px
  }
  .tab{
    padding:8px 9px
  }
  .intro-grid{
    grid-template-columns:minmax(0,1fr) 58px
  }
  .intro-art{
    transform:scale(.4)
  }

}

@keyframes wobblemobile{
  0%,100%{
    transform:translateY(-5px) scale(.85) rotate(0)
  }
  25%{
    transform:translateY(-7px) scale(.85) rotate(4deg)
  }
  75%{
    transform:translateY(-7px) scale(.85) rotate(-4deg)
  }

}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }

}


/* 食材ドット絵セレクター：食材だけカード型、時間・味付けなどは従来のチップ型 */
.ingredient-chips{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  align-items:stretch
}

.food-choice{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  min-height:101px;
  padding:9px 4px 7px;
  border:1.5px solid #f1e5e2;
  border-radius:15px;
  background:#fffbfa;
  color:#766b6b;
  box-shadow:0 2px 5px #66555509;
  transition:background .15s,border-color .15s,transform .15s;
  cursor:pointer
}

.food-choice:hover{
  background:#fff2f4;
  border-color:#ebc8cf
}

.food-choice:active{
  transform:scale(.97)
}

.food-choice[aria-pressed="true"]{
  background:#fff0f3;
  border-color:#de849e;
  box-shadow:inset 0 0 0 1px #e9a9bc
}

.food-choice.food-choice-exclude[aria-pressed="true"]{
  background:#fff1e6;
  border-color:#df9f78;
  box-shadow:inset 0 0 0 1px #ebbb9c
}

.food-choice-visual{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  max-width:100%;
  flex:none
}

.food-choice-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  display:block
}

.food-choice-emoji{
  font-size:31px;
  line-height:1;
  display:block
}

.food-choice-name{
  font-size:10.5px;
  font-weight:900;
  line-height:1.3;
  text-align:center;
  overflow-wrap:anywhere;
  letter-spacing:-.2px
}

.food-choice-check{
  position:absolute;
  right:4px;
  top:4px;
  display:none;
  place-items:center;
  min-width:19px;
  height:19px;
  border-radius:50%;
  background:#d77791;
  color:white;
  font-size:12px;
  font-weight:1000;
  line-height:1
}

.food-choice[aria-pressed="true"] .food-choice-check{
  display:grid
}

.food-choice.food-choice-exclude .food-choice-check{
  background:#d89a73
}

@media(max-width:360px){
  .ingredient-chips{
    gap:6px
  }
  .food-choice{
    padding-left:2px;
    padding-right:2px;
    min-height:93px
  }
  .food-choice-visual{
    height:55px;
    width:55px
  }
  .food-choice-name{
    font-size:10px
  }

}


/* 監査で確認した操作性の局所修正（既存の配色・レイアウトを維持） */
.chip{
  min-height:44px
}

.tab{
  min-height:44px
}

.save-heart{
  min-width:44px;
  min-height:44px
}

.modal-close,.icon-button{
  min-width:44px;
  height:44px
}

.mode-box label{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px
}

.recipe-card{
  cursor:pointer
}

.recipe-card:focus-visible{
  outline:3px solid #84aee9;
  outline-offset:3px
}

html:has(body.filters-open){
  overflow:hidden
}

@media(max-width:820px){

 .filter-bottom{
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))
  }

}

@supports(height:100dvh){

 @media(max-width:820px){
    .filter-panel{
      height:100dvh;
      max-height:100dvh;
      bottom:auto
    }

  }

}

/* PCでは絞り込みパネルは常時表示。閉じられない×ボタンを隠す。 */
@media(min-width:821px){
  .close-filters{
    display:none
  }

}

/* 小さすぎる補助テキスト・食材名の読みやすさを微調整 */
.food-choice-name{
  font-size:11.5px
}

.filter-help{
  font-size:11.5px
}

@media(max-width:580px){

 .intro-tags span{
    font-size:10px
  }

 .gacha-title p{
    font-size:11px
  }

}

@media(max-width:360px){
  .food-choice-name{
    font-size:11px
  }

}



/* Screen cutouts and dynamic toolbars: keep the original layout in normal viewports. */
@media (max-width:820px){

 .site-header{
    height:calc(84px + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px)
  }

 .filter-bottom{
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))
  }

}

@media (max-width:580px){

 .site-header{
    height:calc(69px + env(safe-area-inset-top,0px))
  }

}

@media (max-width:820px) and (orientation:landscape){

 .header-inner{
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px))
  }

 .app-shell{
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px))
  }

 .filter-panel{
    padding-right:env(safe-area-inset-right,0px)
  }

 .recipe-modal{
    max-width:calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))
  }

}

@media (max-width:580px) and (orientation:landscape){

 .app-shell{
    padding-left:max(11px,env(safe-area-inset-left,0px));
    padding-right:max(11px,env(safe-area-inset-right,0px))
  }

}

@supports (height:100dvh){

 .recipe-modal,.modal-content{
    max-height:min(90dvh,950px)
  }

 @media(max-width:580px){
    .recipe-modal,.modal-content{
      max-height:91dvh
    }

  }

}

@supports(padding-bottom:env(safe-area-inset-bottom,0px)){

 .footer{
    padding-bottom:max(50px,calc(22px + env(safe-area-inset-bottom,0px)))
  }

}



/* === 視認性・情報整理（元の世界観、既存素材、操作ロジックを保持） === */
/* 27-30: 明確な文字階層、8pxベースの余白、控えめな影と境界 */
:root {
   --legible:#66565b;
   --legible-secondary:#766c70;

}

body {
   font-size:16px;
   line-height:1.65;

}

.eyebrow {
   color:#b56d85;
   font-size:11px;
   letter-spacing:1.8px;

}

.main-content {
   box-shadow:0 9px 26px rgba(92,69,64,.055);

}

.section-heading {
   margin-bottom:18px;

}

.section-heading h2 {
   font-size:clamp(20px,2vw,24px);
   margin-bottom:5px;

}

.section-heading p {
   font-size:14px;
   color:var(--legible-secondary);
   line-height:1.6;

}

/* 01-06: top area shorter and quieter, existing hero art preserved */
.intro {
   padding:24px 28px 20px;
   box-shadow:0 7px 24px #e6b3ad10;

}

.intro-sticker {
   margin-bottom:8px;
   padding:4px 11px;

}

.intro-question {
   font-weight:950;

}

.intro-answer {
   font-size:.88em;
   font-weight:850;

}

.intro h1 {
   margin-bottom:9px;
   line-height:1.34;

}

.intro p {
   font-size:14px;
   line-height:1.6;
   margin-bottom:10px;
   color:#6e6268;

}

.intro-art {
   height:154px;

}

.intro-tags {
   gap:6px;

}

.intro-tags span {
   font-size:11px;
   padding:4px 9px;
   white-space:nowrap;
   background:#fffafbe0;

}

.view-tabs {
   gap:8px;
   padding:15px 1px 13px;

}

.tab {
   color:#70646a;
   border-color:#f2e7e6;
   background:#fffefa;
   box-shadow:none;
   font-size:13px;

}

.tab.is-active {
   background:#df8199;
   border-color:#df8199;
   color:#fff;
   box-shadow:0 2px 0 #deb3be;

}

.tab small {
   opacity:.95;

}

/* 07-14: ingredient first, compact selected summary, clear collapsible filters */
.filter-head {
   padding-bottom:14px;

}

.filter-head p {
   font-size:13px;
   color:var(--legible-secondary);

}

.filter-scroll {
   font-size:14px;

}

.filter-block {
   padding:16px 0;

}

.filter-title {
   font-size:15px;
   margin-bottom:10px;
   color:#51464a;

}

.filter-help {
   font-size:13px;
   color:#756b70;
   line-height:1.6;
   margin-top:9px;

}

.filter-active {
   margin:12px 0 0;
   padding:10px 12px;
   border-radius:14px;
   background:#fff7f8;
   border:1px solid #f4e5e8;

}

.filter-active[hidden] {
   display:none;

}

.filter-active-title {
   display:block;
   font-size:12px;
   font-weight:900;
   color:#815b68;
   margin-bottom:6px;

}

.filter-active-chips {
   display:flex;
   gap:5px;
   flex-wrap:wrap;

}

.filter-active-chips span {
   font-size:12px;
   font-weight:800;
   padding:4px 8px;
   color:#8b606d;
   background:#fff;
   border:1px solid #f1dce2;
   border-radius:10px;
   overflow-wrap:anywhere;

}

.filter-more {
   border-color:#f0e8e5;

}

.filter-more summary {
   align-items:center;
   min-height:54px;
   padding:14px 0;
   gap:7px;
   font-size:15px;
   color:#51464a;
   line-height:1.4;

}

.filter-more summary:before {
   flex:none;
   font-size:17px;

}

.filter-more summary .filter-status {
   color:#a26779;
   background:#fff4f6;
   border-radius:20px;
   font-size:12px;
   padding:4px 8px;
   font-weight:800;
   max-width:42%;
   line-height:1.45;
   text-align:right;

}

.filter-more summary .filter-status.is-active {
   color:#b24d6e;
   background:#ffe8ee;

}

.filter-basic-pad {
   padding:4px 0 16px;

}

.chip {
   font-size:13px;
   min-height:44px;
   padding:8px 12px;
   line-height:1.3;

}

.mini-search {
   height:44px;
   font-size:14px;

}

.search-field input {
   font-size:14px;

}

.micro-badge {
   font-size:12px;
   padding:4px 9px;

}

.mode-box label {
   font-size:13px;

}

.ingredient-chips {
   grid-template-columns:1fr;
   gap:13px;

}

.food-group {
   min-width:0;

}

.food-group-title {
   display:flex;
   align-items:center;
   gap:7px;
   font-size:13px;
   font-weight:900;
   margin:3px 0 9px;
   color:#826970;

}

.food-group-title small {
   color:#a38f93;
   font-size:11px;
   font-weight:800;

}

.food-group-grid {
   display:grid;
   grid-template-columns:repeat(3,minmax(0,1fr));
   gap:8px;

}

.food-choice {
   min-height:100px;
   padding:8px 4px;
   gap:4px;
   box-shadow:none;
   border-color:#f0e5e4;

}

.food-choice-visual {
   width:56px;
   height:56px;

}

.food-choice-name {
   font-size:12px;
   line-height:1.35;
   color:#5c4f53;
   overflow-wrap:anywhere;

}

.food-choice[aria-pressed="true"] {
   background:#fff0f3;
   border-color:#de849e;
   box-shadow:inset 0 0 0 1px #e9a9bc;

}

.food-choice-check {
   min-width:21px;
   height:21px;
   font-size:13px;

}

.filter-bottom {
   box-shadow:0 -4px 14px rgba(94,68,72,.045);

}

.filter-tally {
   font-size:13px;
   margin-bottom:10px;
   color:#5d5358;

}

.filter-tally strong {
   font-size:27px;

}

.filter-actions .button-soft {
   background:transparent;
   color:#865e69;
   border:1px solid #f1e5e5;
   box-shadow:none;

}

.filter-actions>.button-primary {
   font-size:14px;

}

/* 15-20: visually group recipe identity before metadata and action */
.recipe-grid {
   gap:13px;

}

.recipe-card {
   padding:16px;
   gap:10px;
   border-color:#f1e5e4;
   box-shadow:0 4px 12px #e9a4b10c;

}

.recipe-card:hover {
   box-shadow:0 6px 16px #e9a4b121;

}

.recipe-card .recipe-topline {
   line-height:1.2;

}

.recipe-number {
   font-size:11px;
   color:#987e87;

}

.recipe-identity {
   display:flex;
   align-items:center;
   gap:12px;
   min-width:0;

}

.recipe-primary {
   flex:1;
   min-width:0;

}

.recipe-card .recipe-emoji {
   width:60px;
   height:60px;
   flex:none;
   margin:0;
   font-size:30px;
   border-radius:16px;

}

.recipe-card h3 {
   font-size:18px;
   line-height:1.5;
   text-wrap:pretty;
   color:#483c41;
   letter-spacing:-.2px;
   margin:0 0 5px;

}

.recipe-card .meta {
   font-size:13px;
   color:#71676d;
   line-height:1.5;

}

.recipe-card .labels {
   gap:5px;

}

.recipe-card .labels span {
   font-size:12px;
   line-height:1.3;
   padding:4px 8px;
   color:#79696d;
   background:#faf6f4;

}

.recipe-card .card-bottom {
   margin-top:auto;

}

.read-recipe {
   font-size:14px;
   min-height:44px;

}

.save-heart {
   flex:none;

}

.recipe-card.drawn {
   padding:18px;

}

.recipe-card.drawn h3 {
   font-size:20px;

}

.recipe-card.drawn .recipe-emoji {
   width:72px;
   height:72px;
   font-size:37px;

}

/* 21-26: readable recipe sheet, unchanged text and safety advice */
.modal-body {
   padding:24px 24px 0;

}

.modal-title {
   font-size:clamp(20px,4.5vw,26px);
   line-height:1.5;
   text-wrap:balance;
   overflow-wrap:anywhere;
   word-break:normal;
   letter-spacing:-.4px;
   margin:8px 0 14px;

}

.modal-number {
   font-size:12px;
   color:#9c7681;

}

.modal-metas span {
   font-size:13px;
   padding:7px 10px;
   color:#685e63;

}

.modal-section {
   padding:22px 0;

}

.modal-section h3 {
   font-size:19px;
   line-height:1.4;
   margin-bottom:14px;
   color:#51434a;

}

.ingredient-row {
   min-height:46px;
   padding:9px 3px;
   gap:12px;
   font-size:16px;
   line-height:1.55;
   color:#4f484b;

}

.ingredient-row input {
   width:20px;
   height:20px;
   flex:none;

}

.steps-list {
   gap:16px;

}

.steps-list li {
   gap:12px;

}

.step-number {
   width:32px;
   height:32px;
   flex:0 0 32px;
   border-radius:50%;
   font-size:14px;

}

.step-text {
   font-size:16px;
   line-height:1.8;
   padding-top:1px;

}

.heat-mark {
   color:#ac4d69;
   background:#fff2f5;
   border-radius:4px;
   padding:1px 3px;
   font-weight:900;

}

.tip-box {
   font-size:14px;
   line-height:1.65;

}

.modal-warning {
   font-size:13px;
   line-height:1.6;
   color:#806c67;

}

.modal-toolbar {
   padding:12px 22px;
   min-height:64px;

}

.modal-actions button {
   min-height:44px;

}

/* Keep compact components compact on small phones, but do not shrink body copy. */
@media (max-width:1080px){

  .intro {
     padding:21px 23px 18px;

  }

  .intro-art {
     height:140px;

  }

}

@media (max-width:820px){

  .intro {
     padding:20px 22px 17px;

  }

  .intro-grid {
     grid-template-columns:minmax(0,1fr) 150px;

  }

  .intro-art {
     height:134px;
     transform:scale(.75);
     transform-origin:top left;

  }

  .filter-scroll {
     padding-bottom:16px;

  }

}

@media (max-width:580px){

  .app-shell {
     padding:10px 11px 0;

  }

  .intro {
     padding:16px 17px 15px;
     border-radius:22px;

  }

  .intro-sticker {
     font-size:10px;
     margin-bottom:7px;

  }

  .intro-grid {
     grid-template-columns:minmax(0,1fr) 77px;

  }

  .intro h1 {
     font-size:clamp(24px,6.4vw,27px);
     margin-bottom:7px;
     letter-spacing:-1px;

  }

  .intro-answer {
     font-size:.85em;

  }

  .intro p {
     font-size:12px;
     line-height:1.55;
     margin-bottom:9px;

  }

  .intro-tags {
     gap:4px;

  }

  .intro-tags span {
     font-size:10px;
     padding:3px 7px;

  }

  .intro-art {
     height:105px;
     transform:scale(.47);
     transform-origin:top left;

  }

  .view-tabs {
     gap:5px;
     padding-top:12px;
     padding-bottom:12px;

  }

  .tab {
     padding:8px 10px;
     font-size:12px;

  }

  .main-content {
     padding:16px 14px 18px;

  }

  .section-heading h2 {
     font-size:21px;

  }

  .section-heading p {
     font-size:14px;

  }

  .recipe-card {
     padding:14px;
     gap:9px;

  }

  .recipe-card .recipe-emoji {
     width:56px;
     height:56px;

  }

  .recipe-card h3 {
     font-size:17px;

  }

  .recipe-card.drawn h3 {
     font-size:19px;

  }

  .modal-body {
     padding:18px 17px 0;

  }

  .modal-toolbar {
     padding:10px 16px;

  }

  .modal-title {
     font-size:22px;

  }

  .filter-head {
     padding:18px 18px 12px;

  }

  .filter-scroll {
     padding:0 18px 16px;

  }

  .filter-bottom {
     padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px));

  }

}

@media(max-width:360px){

  .intro-grid {
     grid-template-columns:minmax(0,1fr) 60px;

  }

  .intro-art {
     transform:scale(.38);

  }

  .intro-tags span {
     font-size:9.5px;

  }

  .food-group-grid {
     gap:6px;

  }

  .food-choice-visual {
     width:50px;
     height:50px;

  }

  .food-choice-name {
     font-size:11.5px;

  }

  .recipe-card h3 {
     font-size:17px;

  }

}

@media (max-width:820px) and (orientation:landscape){

  .filter-bottom {
     padding-bottom:max(12px,env(safe-area-inset-bottom,0px));

  }

}



/* 第08版｜細部デザイン20項目。配色体系・画面構成・操作仕様は維持。 */
/* 01-02: header alignment and optical centering. */
.header-inner{align-items:center}
.brand-mark{flex:none}
.brand-name{transform:translateY(-1px)}
.button-filter{align-self:center}
@media(max-width:580px){
  .header-inner{padding-left:11px;padding-right:11px}
}
@media(max-width:580px) and (orientation:landscape){
  .header-inner{padding-left:max(11px,env(safe-area-inset-left,0px));padding-right:max(11px,env(safe-area-inset-right,0px))}
}
/* 03-04: soften secondary badge, keep the three vegetable graphics contained. */
.intro-sticker{border-color:#f4dfe4;box-shadow:0 2px 6px #e9b1c012}
.intro-art .intro-disc{box-shadow:0 3px 10px #c7869218}
.intro-art .disc-b{margin-left:1px}
.intro-art .disc-c{margin-top:2px}
/* 05: uniform emoji column, same tab text and tab actions. */
.view-tabs .tab{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.tab-emoji{display:inline-flex;width:1.5em;min-width:1.5em;flex:none;align-items:center;justify-content:center;line-height:1.3}
.tab-label{display:inline-block}
.view-tabs .tab small{margin-left:0}
/* 06-07: coherent hierarchy inside the gacha header and decoration clearance. */
.gacha-title .eyebrow{display:inline-block;margin-bottom:6px}
.gacha-title h2{margin-bottom:6px}
.gacha-title p{line-height:1.6}
.side-sparkle-a{transform:translateX(-3px)}
.side-sparkle-b{transform:translateX(3px)}
/* 08: matching-condition badges use consistent baselines and touch-safe wrapping. */
.summary-tags{align-items:center;row-gap:7px}
.summary-chip{display:inline-flex;align-items:center;min-height:27px;line-height:1.35;max-width:100%;overflow-wrap:anywhere}
/* 09-10: metadata aligns at the top; predictable avatar-to-title gap. */
.recipe-card .recipe-topline{min-height:18px;align-items:baseline}
.recipe-card .recipe-topline .recipe-number{line-height:1.45}
.recipe-identity{gap:12px;align-items:center}
.recipe-primary{min-width:0}
/* 11,14: category titles and counts stay visually distinct. */
.food-group+.food-group{margin-top:6px}
.food-group-title{align-items:baseline;gap:8px;margin-bottom:10px}
.food-group-title small{font-size:11px;color:#9f9294;letter-spacing:0}
/* 12: only display-scale optical corrections; no bitmap resampling. */
.food-choice-visual{overflow:visible}
.food-choice-visual img{transform:scale(var(--food-optical-scale,1));transform-origin:center;image-rendering:pixelated}
/* 13: all ingredient labels start on the same horizontal baseline. */
.food-choice-name{display:flex;align-items:flex-start;justify-content:center;min-height:2.7em;line-height:1.35}
.food-choice{justify-content:flex-start}
/* 15: changing numbers don't shift the filter footer. */
.filter-tally strong,.filter-tally #filterCount,.match-number strong,#matchCount{font-variant-numeric:tabular-nums;white-space:nowrap}
.filter-tally small{white-space:nowrap}
/* 16-17: stable checkbox center, separate name and amount visually only. */
.ingredient-row input{margin:0;align-self:center;flex:none}
.ingredient-text{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:baseline;gap:9px}
.ingredient-name{min-width:0;overflow-wrap:anywhere}
.ingredient-amount{flex:none;white-space:normal;text-align:right;font-weight:750;color:#74626b}
.ingredient-row:has(input:checked) .ingredient-text{color:#b6a8a5}
/* 18-19: equal-height info pills and a stable, safe modal close button. */
.modal-metas{align-items:stretch;row-gap:8px}
.modal-metas span{display:inline-flex;align-items:center;min-height:35px;line-height:1.45}
.modal-toolbar{gap:18px}
.modal-close{flex:none;margin-left:auto}
@media(max-width:360px){.modal-toolbar{gap:12px}}
/* 20: consistent but visible keyboard focus and understated native scrollbars. */
:where(button,a,input,summary,.recipe-card):focus-visible{outline:3px solid #c75f82;outline-offset:3px}
.filter-scroll,.modal-content{scrollbar-width:thin;scrollbar-color:#edc6d1 transparent}
.filter-scroll::-webkit-scrollbar,.modal-content::-webkit-scrollbar{width:7px}
.filter-scroll::-webkit-scrollbar-thumb,.modal-content::-webkit-scrollbar-thumb{background:#edc6d1;border-radius:20px}
.filter-scroll::-webkit-scrollbar-track,.modal-content::-webkit-scrollbar-track{background:transparent}
/* Layout remains fluid; icons and amounts never force horizontal overflow. */
@media(max-width:580px){
  .view-tabs .tab{gap:3px}
  .tab-emoji{width:1.3em;min-width:1.3em}
  .ingredient-text{gap:6px}
}
@media(max-width:360px){
  .view-tabs .tab{gap:2px;padding-left:7px;padding-right:7px}
  .ingredient-text{flex-wrap:wrap;row-gap:0}
  .ingredient-amount{margin-left:auto}
}

/* Final tiny-screen safeguards / keyboard-visible focus. */
.ingredient-amount{max-width:54%;min-width:0;overflow-wrap:anywhere;flex:0 1 auto}
.ingredient-name{flex:1 1 auto}
.recipe-card:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c75f82;outline-offset:3px}
.search-field:focus-within{outline-color:#c75f82}