:root{
      --bg: #f2f3f4; /* 회백색 테마 배경 */
      --panel: #eeeff1;
      --cell-border: #c8c9ca;
      --text: #222;
      --flag-red: #d32f2f;
    }
    body{
      margin: 20px;
      height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      background: linear-gradient(180deg, #f8f9fa, #e8e9ea);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial;
      color:var(--text);
    }
    .container{
      background:var(--panel);
      padding:16px;
      border-radius:12px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    h1{
      margin:0 0 6px 0;
      font-size:20px;
      color:#333;
    }
    .board-wrap{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    /* 게임 보드 (정사각형 그리드) */
    #board{
      display:grid;
      grid-template-columns: repeat(16, 34px);
      grid-template-rows: repeat(16, 34px);
      gap:4px;
      padding:12px;
      background: linear-gradient(180deg,#ffffff,#f5f6f7);
      border:1px solid var(--cell-border);
      border-radius:8px;
    }
    .cell{
      width:34px;
      height:34px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      background:var(--bg);
      border-radius:6px;
      user-select:none;
      cursor:pointer;
      border:1px solid rgba(0,0,0,0.05);
      position:relative;
      font-size:14px;
      color:var(--text);
    }
    .cell.open{
      background: #fff;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
      cursor:default;
    }
    .cell.flagged{
      color: var(--flag-red);
    }
    .cell img.flag-icon{
      width:18px;
      height:18px;
      pointer-events:none;
      filter: none;
    }
    .cell img.mine-icon{
      width:18px;
      height:18px;
      pointer-events:none;
    }
    /* 숫자 색상은 아래 JS에서 클래스 없이 텍스트 컬러로 직접 설정합니다 (주석 있음). */
    .controls{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:8px;
    }
    .status{
      display:flex;
      gap:12px;
      align-items:center;
      font-weight:700;
      color:#222;
    }
    .status .box{
      display:flex;
      align-items:center;
      gap:6px;
      background:var(--bg);
      padding:6px 10px;
      border-radius:8px;
      border:1px solid var(--cell-border);
      min-width:90px;
      justify-content:center;
    }
    .status img.icon{
      width:18px;
      height:18px;
      display:block;
    }
    .legend{
      font-size:14px;
      color:#555;
    }

    /* 상단 바 (top-bar) */
    .top-bar {              /* 전체 */
        font-family: Arial, sans-serif; /*와 sans!*/
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #f4f7f6;
        color: #222;
        display: flex;
        align-items: end;
        justify-content: space-between;
        padding: 10px 20px;  /* 코드를 복붙했는데 왜 다르게 보이는 건데 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }
    .top-bar .menu {        /* 버튼(글자) 전체 */
        display: flex;
        gap: 20px;
        font-size: 17px;
        margin-right: 40px;
    }
    .top-bar .menu a {      /* 버튼 각각 */
        text-decoration: none;
        color: #222;
        transition: color 0.25s;
    }
    .top-bar .menu a:hover {    /* 버튼 마우스 호버 */
        color: #444;
    }
    
    @media (max-width:768px){   /* 기기에 따른 화면 차이 (사실 잘 모르겠음) */
      #board{ transform: scale(0.8); transform-origin: top left; }
      body{ margin-top: 120px; margin-left: 350px; }
    }